/* 017777.com — Number Intelligence Hub */
:root{
  --ink:#14223D; --ink-2:#22345A; --paper:#F5F7FA; --card:#FFFFFF;
  --gold:#F4C430; --gold-ink:#5A4300; --teal:#0F766E; --rose:#BE3455; --slate:#5B6577;
  --line:#DCE1EA; --text:#1B2333; --muted:#5B6577;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --wrap:1160px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1729; --card:#16223A; --text:#E8ECF4; --muted:#A3AEC2; --line:#2A3A5C; --ink:#0A1222; --ink-2:#1B2A48;
  }
}
:root[data-theme="dark"]{--paper:#0E1729; --card:#16223A; --text:#E8ECF4; --muted:#A3AEC2; --line:#2A3A5C; --ink:#0A1222; --ink-2:#1B2A48;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--text);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--rose)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:750}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose li{margin-bottom:.4em}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:#000;padding:8px 12px}

/* Owner banner */
.owner-bar{background:var(--gold);color:#1a1400;font-size:.92rem;text-align:center;padding:8px 14px}
.owner-bar a{color:#1a1400;font-weight:700}

/* Header */
.site-head{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.3rem}
.brand:hover{color:#fff}
.brand .tiles{display:inline-flex;gap:2px}
.brand .tiles b{display:inline-block;background:#0A1222;border:1px solid #33456b;color:var(--gold);padding:0 5px;border-radius:4px;font-variant-numeric:tabular-nums}
.nav{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap;align-items:center}
.nav a{color:#D6DEEE;text-decoration:none;padding:8px 9px;border-radius:var(--r-sm);font-size:.93rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{background:var(--ink-2);color:#fff}
.nav .cta{background:var(--gold);color:#1a1400;font-weight:700}
.nav .cta:hover{background:#ffd54f;color:#1a1400}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid #3b4d74;color:#fff;border-radius:var(--r-sm);padding:8px 12px;font:inherit}
@media (max-width:1180px){
  .menu-btn{display:block}
  .nav{display:none;flex-wrap:wrap;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;padding:10px 20px 18px}
  .nav.open{display:flex}
}

/* Hero */
.hero{background:var(--ink);color:#fff;padding:56px 0 64px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero p.lead{font-size:1.18rem;color:#C9D3E6;max-width:52ch}
.hero h1{color:#fff}
.hero .wrap>*{min-width:0}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.board{background:#0A1222;border:1px solid #2b3c62;border-radius:var(--r-lg);padding:22px}
.flaps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:96px}
.flap{position:relative;width:clamp(40px,8vw,64px);height:clamp(64px,12vw,92px);background:linear-gradient(#1c2a47 50%,#16223a 50%);border-radius:8px;display:flex;align-items:center;justify-content:center;font:800 clamp(2rem,6vw,3.4rem)/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#0A1222}
.flap.gap{background:none;box-shadow:none;width:14px}
.flap.gap::after{display:none}
.flap.flip{animation:flip .32s ease-in-out}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.board form{display:flex;gap:8px;margin-top:18px}
.board input{flex:1;min-width:0;background:#13203a;border:1px solid #33456b;color:#fff;border-radius:var(--r-sm);padding:12px 14px;font:600 1.1rem var(--body)}
.board .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.board .facts div{background:#13203a;border-radius:var(--r-sm);padding:10px}
.board .facts small{display:block;color:#93A1BD;font-size:.8rem}
.board .facts strong{font-family:var(--display);font-size:1.05rem;color:#fff;word-break:break-all}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-sm);padding:12px 20px;font:700 1rem var(--body);cursor:pointer;text-decoration:none;background:var(--teal);color:#fff}
.btn:hover{background:#0b5f59;color:#fff}
.btn.gold{background:var(--gold);color:#1a1400}.btn.gold:hover{background:#ffd54f;color:#1a1400}
.btn.ghost{background:transparent;border:1.5px solid currentColor;color:inherit}
.btn.rose{background:var(--rose)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Sections */
section.block{padding:64px 0}
section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}.board .facts{grid-template-columns:repeat(2,1fr)}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.panel h3 a{text-decoration:none;color:inherit}
.panel.big{border-radius:var(--r-lg);padding:30px}
.tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--teal);background:rgba(15,118,110,.1);padding:2px 8px;border-radius:99px;margin-bottom:8px}
.stat{font:800 2.4rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .stat{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .stat{color:var(--gold)}}
.page-head{background:var(--ink);color:#fff;padding:44px 0 40px}
.page-head h1{color:#fff;margin:0}
.page-head p{color:#C9D3E6;max-width:64ch;margin:.6em 0 0;font-size:1.1rem}
.crumbs{font-size:.88rem;color:#93A1BD;margin-bottom:10px}
.crumbs a{color:#C9D3E6}
table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.96rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);background:rgba(20,34,61,.05)}
.table-scroll{overflow-x:auto}
.callout{border-left:4px solid var(--gold);background:var(--card);padding:16px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.2em 0}
.callout.teal{border-color:var(--teal)}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;margin:0 0 2em}
.toc ol{margin:.4em 0 0;padding-left:1.2em}
.layout-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}
.layout-side>*,.grid>*{min-width:0}
@media (max-width:960px){.layout-side{grid-template-columns:1fr}}
aside .panel{position:static}
aside .tool-out dl{grid-template-columns:1fr;gap:0}
aside .tool-out dd{margin-bottom:8px}

/* Forms */
form.lead label{display:block;font-weight:700;margin:12px 0 6px}
form.lead input,form.lead select,form.lead textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;background:var(--paper);color:var(--text)}
form.lead input:focus,form.lead select:focus,form.lead textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(15,118,110,.2)}
form.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){form.lead .row{grid-template-columns:1fr}}
form.lead .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem}
form.lead .check input{width:auto;margin-top:5px}
.hp{position:absolute!important;left:-5000px!important}
.form-note{font-size:.88rem;color:var(--muted);margin-top:10px}
.form-status{margin-top:12px;font-weight:700}
.form-status.err{color:var(--rose)}
.steps-bar{display:flex;gap:6px;margin-bottom:16px}
.steps-bar span{flex:1;height:6px;border-radius:9px;background:var(--line)}
.steps-bar span.on{background:var(--teal)}
.step{display:none}.step.active{display:block}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:620px){.choice-grid{grid-template-columns:1fr}}
.choice{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px;display:flex;gap:10px;cursor:pointer;font-weight:400!important;margin:0!important}
.choice:has(input:checked){border-color:var(--teal);background:rgba(15,118,110,.07)}
.choice input{width:auto!important}

/* Tiers */
.tier{display:flex;flex-direction:column}
.tier .price{font:800 2rem var(--display);margin:.2em 0}
.tier ul{padding-left:1.1em;flex:1}
.tier.feature{border:2px solid var(--gold)}
.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--teal)}

/* Tools */
.tool-out{margin-top:14px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-sm);padding:14px;min-height:48px}
.tool-out dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.tool-out dt{color:var(--muted)}
.tool-out dd{margin:0;font-weight:700;word-break:break-word}
.kv{display:flex;flex-wrap:wrap;gap:8px}
.kv span{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:.9rem}

/* Video */
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-md);overflow:hidden}
.video button{all:unset;cursor:pointer;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.video .play{position:relative;width:68px;height:48px;background:var(--rose);border-radius:12px;display:flex;align-items:center;justify-content:center}
.video .play::before{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:700;font-family:var(--display);font-size:1.08rem}
details p{margin:.6em 0 0}

/* Footer */
.site-foot{background:var(--ink);color:#C9D3E6;padding:52px 0 26px;margin-top:0;font-size:.95rem}
.site-foot a{color:#E8ECF4;text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.site-foot h4{color:#fff;font-size:1rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:6px 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-legal{border-top:1px solid #2b3c62;margin-top:34px;padding-top:18px;font-size:.84rem;color:#93A1BD}
.newsletter{display:flex;gap:8px;margin-top:10px}
.newsletter input{flex:1;min-width:0;padding:10px 12px;border-radius:var(--r-sm);border:1px solid #33456b;background:#13203a;color:#fff;font:inherit}

/* Cookie */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:0 10px 40px rgba(10,18,34,.25);z-index:80;display:none}
.cookie.show{display:block}
.cookie .btn-row{margin-top:10px}
.sticky-cta{position:fixed;right:16px;bottom:16px;z-index:60;display:none}
@media (max-width:620px){.sticky-cta{display:block}}
.theme-toggle{margin-left:6px;background:none;border:1px solid #3b4d74;color:#fff;border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;font:inherit}
.ad-note{font-size:.75rem;color:var(--muted);text-align:center;margin:8px 0}