/* ========================================================================== #557 M04 — HOMEPAGE REFRESH DARK theme retained from the live aicloudpartners.com. This is a refresh: existing colours kept, only the SECTIONS are updated to the professional recommendations in the CEO AFTER column. Prototype only. No backend, no analytics, no tracking. ========================================================================== */ :root{ /* ---- EXISTING SITE COLOURS — sampled from live aicloudpartners.com ---- */ --navy-deep:#0A1628; /* page canvas */ --navy:#0D1B2A; /* alternating section */ --navy-card:#0F2136; /* card surface = --ai-card (solid, one shade above panel) */ --navy-mid:#1E3A5F; /* brand navy */ --blue:#0F2136; /* was #0F3460 — Azure Ice carries no deep blue; = --ai-card */ --cyan:#00E5FF; /* primary signal / CTA */ --turq:#40E0D0; /* secondary signal */ --ok:#3DDC97; /* updated / done = --ai-ok */ /* STATE TOKENS — these replace --gold/--amber. Azure Ice carries no gold and no orange, but gold here encoded MEANING, so each state keeps a DISTINCT colour rather than collapsing into one. Decorative gold became --turq. */ --soon:#9C8CFF; /* "Coming soon", "in production" = --ai-t-play */ --without:#FF7AB6; /* the "Without PIE" beat, warnings = --ai-t-attr */ --note:#7C9CFF; /* notes, promo tag, zone labels = --ai-t-cert */ --muted-blue:#8FA3BA; /* muted text = --ai-muted */ --light-grey:#C9D6E6; /* body text = --ai-body */ --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --maxw:1440px; --gut:clamp(20px,3.4vw,56px); --r:12px; --r-lg:16px; --sh:0 14px 38px rgba(0,0,0,.4); --font:'Inter','Segoe UI',system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);background:var(--navy-deep);color:var(--light-grey); font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--cyan);text-decoration:none} a:hover{text-decoration:underline} p,li,h1,h2,h3,h4{overflow-wrap:break-word} h1,h2,h3,h4{color:#fff;line-height:1.15;margin:0;letter-spacing:-.021em;font-weight:700} h1{font-size:clamp(2.1rem,3.3vw,3rem);font-weight:800;letter-spacing:-.03em} h2{font-size:clamp(1.55rem,2.3vw,2.1rem);margin-bottom:10px} h3{font-size:1.04rem;font-weight:700} p{margin:0 0 1em} p:last-child{margin-bottom:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} section{padding:clamp(48px,6vw,78px) 0} .band{background:var(--navy)} .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--cyan);margin:0 0 12px} /* Founder, 2026-10-07: the section ledes "wrap around" mid-page. Measured at a 1680px section they were boxed into 795px and broke to 2-3 ragged lines with 900px of empty space beside them. The cap came off the lede, and text-wrap balance evens whatever still has to break. The HEADINGS are deliberately NOT freed with it — each h2 is either short or already capped on its own rule (.p3 .sec-head h2), so widening .sec-head leaves every heading as it was; measured before the change: 1, 3, 1, 1 lines. */ .lede{font-size:clamp(1rem,1.15vw,1.09rem);color:var(--light-grey);max-width:100%;text-wrap:balance} .small{font-size:.86rem;color:var(--muted-blue)} .sec-head{margin-bottom:clamp(26px,3.2vw,40px);max-width:none} .sec-head h2{margin-bottom:8px} /* ---------- prototype ribbon ---------- */ .proto{background:var(--blue);color:#ffffff;font-size:.74rem;letter-spacing:.03em; padding:7px 0;text-align:center} .proto b{color:var(--cyan);font-weight:700} /* ---------- N00 · promo bar ---------- */ .promo{background:#0a1628;color:var(--light-grey);font-size:.82rem;border-bottom:1px solid var(--line)} .promo-in{max-width:var(--maxw);margin:0 auto;padding:9px var(--gut); display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center} .promo b{color:#fff;font-weight:600} .promo .sep{color:rgba(255,255,255,.22)} .promo .tag{background:var(--note);color:#0a1628;font-size:.7rem;font-weight:800; letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap} /* ---------- N01 · navigation ---------- */ .hdr{background:var(--navy-deep);position:sticky;top:0;z-index:90;border-bottom:1px solid var(--line)} .hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut); display:flex;align-items:center;gap:26px;min-height:70px} .logo{flex:0 0 auto;display:flex;align-items:center} .logo img{height:34px;width:auto;max-width:none} .nav{display:flex;align-items:center;gap:2px;margin-left:auto} .nav>a,.nav .drop>button{font:inherit;font-size:.9rem;font-weight:500;color:var(--light-grey); background:none;border:0;padding:9px 13px;border-radius:8px;cursor:pointer; display:inline-flex;align-items:center;gap:5px;text-decoration:none;white-space:nowrap} .nav>a:hover,.nav .drop>button:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none} .nav .caret{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;opacity:.65} .drop{position:relative} .drop[data-open="true"]>button{color:#fff;background:rgba(255,255,255,.08)} .dropmenu{position:absolute;top:calc(100% + 9px);left:0;min-width:290px;background:var(--navy-card); border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh); padding:8px;display:none;z-index:99} .drop[data-open="true"] .dropmenu{display:block} .dropmenu a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;color:#fff} .dropmenu a:hover{background:rgba(255,255,255,.06);text-decoration:none} .dropmenu b{display:block;font-size:.92rem;font-weight:650;color:#fff} .dropmenu span{display:block;font-size:.8rem;color:var(--muted-blue);line-height:1.45;margin-top:1px} .hdr-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto} .burger{display:none;background:none;border:1px solid var(--line-2);border-radius:8px; width:38px;height:38px;cursor:pointer;flex-direction:column;justify-content:center; align-items:center;gap:4px;flex:0 0 auto} .burger span{display:block;width:16px;height:2px;background:var(--light-grey);border-radius:2px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:650;font-size:.93rem;padding:12px 22px;border-radius:9px;border:1px solid transparent; cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2; transition:background .15s,border-color .15s,color .15s,transform .15s} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-sm{padding:9px 16px;font-size:.87rem} .btn-cyan{background:var(--cyan);color:#0a1628;border-color:var(--cyan);font-weight:700} .btn-cyan:hover{background:#40E0D0;border-color:#40E0D0} .btn-ghost{background:transparent;color:#fff;border-color:var(--line-2)} .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)} .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* TRUST STRIP — hero. Marks AiCloudPartners actually holds; no licensed artwork. */ .tstrip{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:22px 0 0;padding:0;list-style:none} /* OFFICIAL Microsoft Marketplace badge. height fixed + width:auto locks the aspect ratio, so the guide’s no-stretch/no-distort rule holds by construction. 48px, not 34 -- at 34 the wordmark was illegible on screen. */ .mkt-badge{display:inline-block;line-height:0;border-radius:3px;transition:opacity .15s ease} .mkt-badge img{height:48px;width:auto;display:block} /* a.mkt-badge, not .mkt-badge — on this page the badge is a with no link (founder, 2026-10-07), and a hover fade on something unclickable reads as a broken link. The rules stay for any page that does link it. */ a.mkt-badge:hover{opacity:.85} a.mkt-badge:focus-visible{outline:2px solid var(--cyan);outline-offset:3px} .sec-badge-official{background:none;border:0;padding:0} .tmark{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:650;letter-spacing:.02em;color:#8FA3BA} .tmark svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9} @media (max-width:640px){.tstrip{gap:8px 16px}.tmark{font-size:.72rem}} .lnk{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--cyan);font-size:.93rem} .lnk::after{content:"→";transition:transform .15s} .lnk:hover{text-decoration:none} .lnk:hover::after{transform:translateX(3px)} /* ---------- N02 · hero ---------- */ .hero{background:var(--navy-deep);position:relative;overflow:hidden; padding:clamp(52px,6.5vw,86px) 0 clamp(56px,7vw,92px)} .hero::before{content:"";position:absolute;inset:0; background:radial-gradient(1100px 460px at 78% 22%, rgba(0,229,255,.10), transparent 62%), radial-gradient(760px 380px at 8% 88%, rgba(30,58,95,.5), transparent 65%); pointer-events:none} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(30px,4.5vw,64px);align-items:center} .hero .eyebrow{display:flex;align-items:center;gap:9px} .hero .eyebrow .bar{width:22px;height:2px;background:var(--cyan);display:inline-block;opacity:.85} .hero h1{max-width:17ch;margin-bottom:18px} .hero p.sub{color:var(--light-grey);font-size:clamp(1rem,1.2vw,1.11rem);max-width:54ch; margin-bottom:26px;line-height:1.72} .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0} .hero-shot{border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:var(--sh); width:100%;background:var(--navy)} /* ---------- N03 · product proof (alternating rows) ---------- */ /* ---------- cards ---------- */ .grid{display:grid;gap:clamp(16px,2vw,22px)} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .card{background:var(--navy-card);border:1px solid var(--line);border-radius:var(--r); padding:clamp(20px,2.2vw,26px);min-width:0} .card h3{margin-bottom:7px} .card p{font-size:.92rem;color:var(--muted-blue);margin:0} .ico{width:40px;height:40px;border-radius:10px;background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.2);display:grid;place-items:center;margin-bottom:14px;flex:0 0 auto} .ico svg{width:20px;height:20px;fill:none;stroke:var(--cyan);stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .card.accent{background:linear-gradient(145deg,rgba(0,229,255,.12),rgba(30,58,95,.28)); border-color:rgba(0,229,255,.34)} .card.accent h3{color:#fff} .card.accent p{color:var(--light-grey)} /* ---------- N05 · value model ---------- */ .value{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--navy-card)} .vstep{padding:clamp(22px,2.4vw,30px) clamp(14px,1.6vw,20px);text-align:center; border-right:1px solid var(--line);min-width:0} .vstep:last-child{border-right:0} .vstep .vico{width:42px;height:42px;border-radius:50%;background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.22);display:grid;place-items:center;margin:0 auto 14px} .vstep .vico svg{width:20px;height:20px;fill:none;stroke:var(--cyan);stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .vstep b{display:block;font-size:.88rem;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:#fff;margin-bottom:6px} .vstep span{display:block;font-size:.88rem;color:var(--muted-blue);line-height:1.5} /* ---------- N06 · the PIE platform ---------- */ .plat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,20px)} .pgroup{background:var(--navy-card);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2vw,22px);display:flex;flex-direction:column;min-width:0} .pgroup-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px} .pgroup-head .ico{margin-bottom:0;width:36px;height:36px;border-radius:9px} .pgroup-head .ico svg{width:18px;height:18px} .pgroup-head h3{font-size:.98rem;line-height:1.3} .pgroup ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .pgroup li{font-size:.88rem;color:var(--light-grey);padding:9px 0;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:8px} .pgroup li:last-child{border-bottom:0} .pgroup li svg{width:13px;height:13px;fill:none;stroke:var(--cyan);stroke-width:2.6; flex:0 0 auto;stroke-linecap:round;stroke-linejoin:round} .plat-foot{margin-top:22px;text-align:center} /* ---------- N09 · pricing ---------- */ .plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,26px); max-width:820px;margin:0 auto} .plan{background:var(--navy-card);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(24px,2.8vw,32px);text-align:center;position:relative;min-width:0} .plan.hi{border-color:rgba(0,229,255,.45);box-shadow:0 0 0 1px rgba(0,229,255,.12),var(--sh)} .plan .flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:var(--cyan);color:#0a1628;font-size:.68rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:4px 13px;border-radius:99px;white-space:nowrap} .plan h3{font-size:1.12rem;margin-bottom:4px} .plan .for{font-size:.87rem;color:var(--muted-blue);margin-bottom:18px} .price{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-bottom:6px} .price .cur{font-size:1.2rem;font-weight:700;color:#fff;align-self:flex-start;margin-top:6px} .price b{font-size:clamp(2.2rem,3.4vw,2.9rem);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1} .price span{font-size:.94rem;color:var(--muted-blue);font-weight:500} .plan .onb{font-size:.87rem;color:var(--light-grey);margin-bottom:20px} .plan .onb em{font-style:normal;color:var(--cyan);font-weight:650} .plan .btn{width:100%} .pricing-note{text-align:center;margin-top:22px} /* ---------- N10 · closing CTA ---------- */ .closer{background:linear-gradient(140deg,#0d1b2a,#0A1628 60%);position:relative;overflow:hidden; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .closer::before{content:"";position:absolute;inset:0; background:radial-gradient(760px 320px at 82% 50%, rgba(0,229,255,.13), transparent 62%); pointer-events:none} .closer .wrap{position:relative;z-index:1} .closer h2{margin-bottom:10px} .closer p{color:var(--light-grey);max-width:56ch;margin-bottom:22px} /* ---------- N11 · footer ---------- */ .ftr{background:#0a1628;color:var(--muted-blue);padding:clamp(42px,5vw,58px) 0 0; border-top:1px solid var(--line)} .ftr-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,40px);padding-bottom:clamp(30px,4vw,42px)} .ftr img.flogo{height:30px;width:auto;max-width:none;margin-bottom:13px} .ftr .tagline{font-size:.89rem;color:var(--muted-blue);max-width:34ch;margin:0} .ftr h4{color:#fff;font-size:.77rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; margin:0 0 13px} .ftr ul{list-style:none;margin:0;padding:0} .ftr li{margin-bottom:9px} .ftr a{color:var(--muted-blue);font-size:.89rem;text-decoration:none} .ftr a:hover{color:var(--cyan);text-decoration:none} .ftr-btm{border-top:1px solid var(--line);padding:18px 0 24px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.83rem} .social{display:flex;gap:9px} .social a{width:30px;height:30px;border-radius:7px;border:1px solid var(--line-2); display:grid;place-items:center} .social a:hover{border-color:var(--cyan);background:rgba(0,229,255,.1)} .social svg{width:14px;height:14px;fill:var(--muted-blue)} .social a:hover svg{fill:var(--cyan)} /* ---------- governance marks ---------- */ .note{border:1px solid rgba(124,156,255,.32);background:rgba(124,156,255,.07); border-left:3px solid var(--note);border-radius:9px;padding:14px 18px; font-size:.87rem;color:#C9D6E6} .note b{color:var(--note)} .illus{display:inline-block;background:rgba(124,156,255,.12);border:1px solid rgba(124,156,255,.3); color:var(--note);font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;background:var(--cyan);color:#0a1628; padding:12px 20px;z-index:999} .skip:focus{left:10px;top:10px} /* mobile sheet */ .sheet{position:fixed;inset:0;background:var(--navy-deep);z-index:200;padding:22px var(--gut); display:none;overflow-y:auto} .sheet[data-open="true"]{display:block} .sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px} .sheet-x{background:none;border:1px solid var(--line-2);border-radius:8px; font-size:1.3rem;line-height:1;padding:6px 12px;cursor:pointer;color:var(--light-grey)} .sheet a{display:block;padding:13px 0;border-bottom:1px solid var(--line); font-weight:600;color:#fff;text-decoration:none;font-size:1.02rem} .sheet .btn{width:100%;margin-top:20px} /* ---------- responsive ---------- */ @media (max-width:1100px){ .plat{grid-template-columns:repeat(2,minmax(0,1fr))} .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:960px){ .nav,.hdr-cta .btn-ghost{display:none} .burger{display:flex} .hero-grid{grid-template-columns:minmax(0,1fr)} .hero h1{max-width:20ch} .value{grid-template-columns:repeat(2,minmax(0,1fr))} .vstep{border-bottom:1px solid var(--line)} .vstep:nth-child(2n){border-right:0} } @media (max-width:760px){ .proof{grid-template-columns:minmax(0,1fr)} .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} .plans{grid-template-columns:minmax(0,1fr)} .plat{grid-template-columns:minmax(0,1fr)} .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .value{grid-template-columns:minmax(0,1fr)} .vstep{border-right:0} .cta-row .btn{width:100%} .ftr-btm{flex-direction:column;align-items:flex-start} } @media (max-width:520px){ .ftr-grid{grid-template-columns:minmax(0,1fr)} .hdr-in{min-height:62px;gap:12px} .logo img{height:28px} } /* ========================================================================== ENERGY LAYER — the product excitement the live site has today. Visual punch only: gradient, glow, depth, motion. No added claims. ========================================================================== */ /* --- gradient display type, the PIE brand gradient --- */ .grad{background:linear-gradient(105deg,var(--cyan) 0%,var(--turq) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent} h1,h2{letter-spacing:-.033em} h1{font-size:clamp(2.3rem,3.9vw,3.5rem);line-height:1.06} h2{font-size:clamp(1.75rem,2.8vw,2.55rem);line-height:1.1} /* --- hero: deeper wash + moving glow + grid --- */ .hero{padding:clamp(60px,7.5vw,104px) 0 clamp(64px,8vw,110px)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px); background-size:62px 62px; mask-image:radial-gradient(760px 420px at 70% 40%,#000,transparent 72%); -webkit-mask-image:radial-gradient(760px 420px at 70% 40%,#000,transparent 72%)} .hero::before{background: radial-gradient(900px 480px at 76% 26%, rgba(0,229,255,.20), transparent 62%), radial-gradient(620px 420px at 14% 84%, rgba(64,224,208,.13), transparent 66%), radial-gradient(520px 320px at 96% 86%, rgba(64,224,208,.07), transparent 70%); animation:heroGlow 13s ease-in-out infinite alternate} @keyframes heroGlow{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.05)}} .hero .eyebrow{font-size:.79rem;letter-spacing:.16em} .hero .eyebrow .bar{width:26px;height:2px; background:linear-gradient(90deg,var(--cyan),var(--turq));box-shadow:0 0 10px rgba(0,229,255,.8)} .hero-shot{box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 1px rgba(0,229,255,.16), 0 0 60px rgba(0,229,255,.12);transition:transform .5s cubic-bezier(.2,.7,.3,1)} .hero-visual:hover .hero-shot{transform:translateY(-6px) scale(1.012)} /* --- primary CTA: glow + sheen --- */ .btn-cyan{box-shadow:0 6px 22px rgba(0,229,255,.32);position:relative;overflow:hidden} .btn-cyan::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg)} .btn-cyan:hover::after{animation:sheen .85s ease} @keyframes sheen{to{left:135%}} .btn-cyan:hover{box-shadow:0 10px 30px rgba(0,229,255,.48)} /* --- cards lift and light up --- */ .card,.pgroup,.sitem,.plan,.pshot{transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s, background .22s} .card:hover,.pgroup:hover,.sitem:hover{transform:translateY(-4px); border-color:rgba(0,229,255,.42); box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 26px rgba(0,229,255,.12)} .ico{box-shadow:inset 0 0 18px rgba(0,229,255,.1)} .card:hover .ico,.pgroup:hover .ico,.sitem:hover .ico{ background:rgba(0,229,255,.18);border-color:rgba(0,229,255,.45); box-shadow:0 0 20px rgba(0,229,255,.3)} .card.accent{box-shadow:0 0 40px rgba(0,229,255,.14)} /* --- product proof: glowing frames + gradient step numbers --- */ .pshot{box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 0 1px rgba(0,229,255,.08)} .pstep:hover .pshot{transform:translateY(-5px);border-color:rgba(0,229,255,.4); box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 30px rgba(0,229,255,.16)} .pnum b{background:linear-gradient(135deg,var(--cyan),var(--turq));color:#0a1628; border-color:transparent;box-shadow:0 0 16px rgba(0,229,255,.45);font-weight:800} .pstep h3{font-size:1.1rem} /* --- value model: the five moves, lit --- */ .value{background:linear-gradient(160deg,rgba(0,229,255,.05),rgba(13,27,42,.9) 55%); box-shadow:0 0 44px rgba(0,229,255,.08)} .vstep{transition:background .22s,transform .22s} .vstep:hover{background:rgba(0,229,255,.07)} .vstep:hover .vico{background:rgba(0,229,255,.2);border-color:rgba(0,229,255,.55); box-shadow:0 0 22px rgba(0,229,255,.38);transform:translateY(-3px)} .vstep .vico{transition:all .22s;box-shadow:inset 0 0 18px rgba(0,229,255,.12)} .vstep b{font-size:.95rem;letter-spacing:.11em; background:linear-gradient(105deg,var(--cyan),var(--turq)); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* --- platform: gradient top edge on each group --- */ .pgroup{position:relative;overflow:hidden} .pgroup::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--cyan),var(--turq));opacity:.55; transform:scaleX(.35);transform-origin:left;transition:transform .3s,opacity .3s} .pgroup:hover::before{transform:scaleX(1);opacity:1} .pgroup li{transition:color .18s} .pgroup li:hover{color:#fff} /* --- pricing: the recommended plan glows --- */ .plan.hi{background:linear-gradient(165deg,rgba(0,229,255,.09),var(--navy-card) 58%); box-shadow:0 0 0 1px rgba(0,229,255,.3),0 18px 50px rgba(0,0,0,.5),0 0 46px rgba(0,229,255,.16)} .plan:hover{transform:translateY(-4px)} .plan .flag{box-shadow:0 0 20px rgba(0,229,255,.55)} .price b{background:linear-gradient(105deg,#fff 28%,var(--cyan)); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* --- closing CTA: full-bleed energy --- */ .closer{padding:clamp(56px,7vw,92px) 0} .closer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45; background-image:linear-gradient(rgba(0,229,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(0,229,255,.06) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(620px 300px at 78% 50%,#000,transparent 74%); -webkit-mask-image:radial-gradient(620px 300px at 78% 50%,#000,transparent 74%)} .closer h2{font-size:clamp(1.9rem,3.2vw,2.85rem)} /* --- N03 · value panels, click/hover to full screen --- */ .vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)} .val{margin:0;background:var(--navy-card);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(20px,2.2vw,26px);min-width:0;cursor:zoom-in;position:relative;overflow:hidden; display:flex;flex-direction:column; transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,box-shadow .24s} .val::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--cyan),var(--turq)); opacity:.5;transform:scaleX(.3);transform-origin:left;transition:transform .3s,opacity .3s} .val:hover,.val:focus-visible{transform:translateY(-5px);border-color:rgba(0,229,255,.45); box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 40px rgba(0,229,255,.16);outline:none} .val:hover::before,.val:focus-visible::before{transform:scaleX(1);opacity:1} .val-kick{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--cyan);margin-bottom:9px} .val h3{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.22;margin-bottom:16px;letter-spacing:-.022em} .val-shot{display:block;border-radius:10px;overflow:hidden;background:#C9D6E6; border:1px solid var(--line-2);margin-bottom:16px; box-shadow:0 10px 26px rgba(0,0,0,.4);transition:box-shadow .24s} .val-shot img{width:100%;height:auto;display:block} .val:hover .val-shot{box-shadow:0 16px 38px rgba(0,0,0,.52),0 0 26px rgba(0,229,255,.14)} .val figcaption{font-size:.94rem;color:var(--light-grey);line-height:1.55;margin:0} .val figcaption b{color:#fff;font-weight:700} .val-cue{margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-blue);opacity:0;transition:opacity .2s} .val:hover .val-cue,.val:focus-visible .val-cue{opacity:1;color:var(--cyan)} .val-wide{grid-column:span 2} .val-wide .val-shot img{width:100%} /* lightbox */ .lightbox{position:fixed;inset:0;z-index:300;display:none;place-items:center; background:rgba(10,22,40,.93);backdrop-filter:blur(6px);padding:clamp(16px,4vw,56px)} .lightbox[data-open="true"]{display:grid} .lb-inner{margin:0;max-width:1500px;width:100%} .lb-inner img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid rgba(0,229,255,.3); box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 70px rgba(0,229,255,.16);background:#C9D6E6} .lb-inner figcaption{margin-top:16px;color:var(--light-grey);font-size:.98rem;line-height:1.6; max-width:88ch} .lb-inner figcaption b{color:#fff} .lb-x{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px); width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.08); border:1px solid var(--line-2);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer} .lb-x:hover{background:rgba(0,229,255,.16);border-color:var(--cyan)} @media (max-width:860px){ .vals{grid-template-columns:minmax(0,1fr)} .val-wide{grid-column:span 1} } .hero-stack{margin:0;position:relative;min-width:0} .hero-quote{margin:0;position:relative;z-index:2; margin-top:-56px;margin-left:clamp(0px,2vw,26px);max-width:min(560px,86%); background:linear-gradient(150deg,rgba(13,27,42,.97),rgba(10,22,40,.97)); border:1px solid rgba(0,229,255,.3);border-radius:var(--r-lg); padding:clamp(20px,2.2vw,28px); box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 44px rgba(0,229,255,.14); backdrop-filter:blur(8px)} .hero-quote::before{content:"\201C";position:absolute;top:-6px;left:14px; font-size:4.4rem;line-height:1;color:var(--cyan);opacity:.26;font-family:Georgia,serif} .hero-quote p{margin:0 0 12px;font-size:clamp(.98rem,1.12vw,1.1rem);line-height:1.6; color:var(--light-grey);position:relative} .hero-quote p b{color:#fff;font-weight:700} .hero-quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:.72rem; letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)} @media (max-width:960px){.hero-quote{margin-top:-36px;max-width:94%}} .hero-cap{margin:14px 0 0;font-size:.8rem;color:var(--muted-blue);line-height:1.5; display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap} .hero-visual{flex-direction:column;align-items:stretch} /* --- zone 2 · platform: the full PIE home screen --- */ .platshot{margin:0;min-width:0} .platshot img{width:100%;height:auto;display:block;border-radius:var(--r-lg); border:1px solid var(--line-2);background:var(--navy-deep); box-shadow:0 26px 64px rgba(0,0,0,.55),0 0 0 1px rgba(0,229,255,.1),0 0 56px rgba(0,229,255,.12); transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s} .platshot:hover img{transform:translateY(-6px);border-color:rgba(0,229,255,.45); box-shadow:0 36px 84px rgba(0,0,0,.62),0 0 72px rgba(0,229,255,.22)} .platshot figcaption{margin-top:18px;font-size:.93rem;color:var(--muted-blue);line-height:1.6; max-width:104ch} .platshot figcaption b{color:var(--cyan);font-weight:650} /* --- zone 2 · platform with the live product rail (retired) --- */ .platwrap{display:grid;grid-template-columns:minmax(0,248px) minmax(0,1fr); gap:clamp(22px,3vw,44px);align-items:start} .platrail{margin:0;min-width:0} .platrail img{width:100%;height:auto;display:block;border-radius:var(--r-lg); border:1px solid var(--line-2);background:var(--navy-deep); box-shadow:0 20px 48px rgba(0,0,0,.5),0 0 0 1px rgba(0,229,255,.1),0 0 40px rgba(0,229,255,.1); transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s} .platrail:hover img{transform:translateY(-4px);border-color:rgba(0,229,255,.45); box-shadow:0 28px 60px rgba(0,0,0,.58),0 0 52px rgba(0,229,255,.2)} .platrail figcaption{margin-top:14px;font-size:.86rem;color:var(--muted-blue);line-height:1.5} .platrail figcaption b{color:var(--cyan);font-weight:650} .platwrap .plat{grid-template-columns:repeat(2,minmax(0,1fr))} .soon{margin-left:auto;font-family:var(--mono);font-size:.6rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--note); background:rgba(124,156,255,.14);border:1px solid rgba(124,156,255,.34); padding:2px 7px;border-radius:99px;white-space:nowrap} @media (max-width:1100px){.platwrap .plat{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:900px){ .platwrap{grid-template-columns:minmax(0,1fr)} .platrail{max-width:260px} } @media (max-width:760px){.platwrap .plat{grid-template-columns:minmax(0,1fr)}} /* --- N03b · what partners use PIE for --- */ @media (max-width:1100px){.card-wide{grid-column:span 2}} @media (max-width:760px){.card-wide{grid-column:span 1}} /* --- N06b · real report outputs --- */ .reports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,30px)} .rep{margin:0;min-width:0} .rep-shot{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:#C9D6E6;aspect-ratio:16/9;position:relative; box-shadow:0 14px 34px rgba(0,0,0,.44),0 0 0 1px rgba(0,229,255,.07); transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,box-shadow .24s} .rep-shot img{width:100%;height:100%;object-fit:cover;object-position:top center} .rep-shot::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 58%,rgba(10,22,40,.5));pointer-events:none} .rep:hover .rep-shot{transform:translateY(-6px);border-color:rgba(0,229,255,.45); box-shadow:0 24px 54px rgba(0,0,0,.55),0 0 34px rgba(0,229,255,.18)} .rep figcaption{padding-top:16px} .rep figcaption h3{font-size:1.1rem;margin-bottom:6px} .rep figcaption p{font-size:.92rem;color:var(--muted-blue);margin:0} @media (max-width:760px){.reports{grid-template-columns:minmax(0,1fr)}} /* --- section rhythm: a lit rule above each band --- */ .band{position:relative} .band::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:min(var(--maxw),92%);height:1px; background:linear-gradient(90deg,transparent,rgba(0,229,255,.35),transparent)} /* --- hero product shot: full app screen, bleeding toward the right edge --- */ @media (min-width:961px){ .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1.22fr); gap:clamp(26px,3vw,46px);align-items:center} .hero-visual{margin-right:calc(-1 * var(--gut));overflow:visible} .hero-shot{width:calc(100% + clamp(30px,6vw,120px));max-width:none} .hero h1{font-size:clamp(2.4rem,3.1vw,3.4rem);max-width:15ch} .hero p.sub{max-width:46ch} } @media (min-width:1500px){ .hero-visual{margin-right:calc(-1 * (var(--gut) + clamp(20px,3vw,70px)))} } /* --- LARGE DISPLAYS: fill the screen, scale the whole system up --- */ @media (min-width:1600px){ :root{--maxw:1560px;--gut:64px} body{font-size:17px} h1{font-size:clamp(3.2rem,3.6vw,4.1rem)} h2{font-size:clamp(2.2rem,2.5vw,2.9rem)} h3{font-size:1.14rem} .lede{font-size:1.2rem} /* max-width:72ch removed 2026-10-07 — it was the rule actually boxing the ledes at >=1600px */ section{padding:clamp(72px,5.2vw,108px) 0} .hero{padding:clamp(84px,6vw,128px) 0 clamp(88px,6.4vw,132px)} .hero h1{max-width:18ch} .hero p.sub{font-size:1.24rem;max-width:56ch} .btn{font-size:1rem;padding:14px 28px} .btn-sm{font-size:.92rem;padding:10px 19px} .nav>a,.nav .drop>button{font-size:.97rem;padding:10px 15px} .logo img{height:38px} .hdr-in{min-height:78px} .plans{max-width:960px} .vstep b{font-size:1.02rem} .vstep span{font-size:.95rem} .pgroup li{font-size:.95rem} .card p,.rep figcaption p,.pstep p{font-size:.98rem} .rep figcaption h3,.pstep h3{font-size:1.2rem} } @media (min-width:1920px){ :root{--maxw:1680px} body{font-size:18px} h1{font-size:4.4rem} h2{font-size:3.05rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} .hero-visual:hover .hero-shot,.card:hover,.pgroup:hover,.sitem:hover,.plan:hover{transform:none} } /* ========================================================================== REVIEW AID ONLY - zone labels for Founder walkthrough. Remove before build. ========================================================================== */ .promo,.hdr,section,.ftr{position:relative} .hdr{position:sticky} .zone-tag{position:absolute;top:10px;left:10px;z-index:80;pointer-events:none; font-family:var(--mono);font-size:.74rem;font-weight:800;letter-spacing:.08em; color:#0a1628;background:#7C9CFF;border:2px solid #0a1628; padding:5px 11px;border-radius:6px;white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.55)} .promo .zone-tag,.hdr .zone-tag{top:50%;transform:translateY(-50%);left:8px;font-size:.66rem;padding:3px 8px} /* ---- ZONE 1 · video slot (Founder pick, option F) ---- */ .hero-visual .vposter{position:relative;width:100%;max-width:760px;aspect-ratio:16/10;border-radius:18px;overflow:hidden; background:linear-gradient(150deg,#0F2136,#0a1628 70%);border:1px solid rgba(0,229,255,.3); box-shadow:0 26px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center} .vposter .v-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 45%,rgba(0,229,255,.22),transparent 55%);pointer-events:none} .vposter .v-tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:.72rem;font-weight:700;color:#0a1628;background:#9C8CFF;padding:4px 9px;border-radius:5px} .vposter .v-play{position:relative;width:clamp(72px,6vw,96px);height:clamp(72px,6vw,96px);border-radius:50%;border:2px solid #00e5ff; background:rgba(0,229,255,.12);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 44px rgba(0,229,255,.35);transition:transform .2s,box-shadow .2s} .vposter .v-play:hover{transform:scale(1.06);box-shadow:0 0 60px rgba(0,229,255,.5)} .vposter .v-play svg{width:40%;height:40%;fill:#00e5ff;margin-left:5px} .vposter .v-title{position:relative;color:#fff;font-size:clamp(1.25rem,1.8vw,1.6rem);margin-top:10px} .vposter .v-sub{position:relative;color:#8FA3BA} .vposter .v-bar{position:absolute;left:20px;right:20px;bottom:18px;height:4px;border-radius:4px;background:rgba(255,255,255,.12)} .vposter .v-bar span{display:block;width:18%;height:100%;border-radius:4px;background:#00e5ff} .hero-video{width:100%;max-width:760px;border-radius:18px;border:1px solid rgba(0,229,255,.3);box-shadow:0 26px 70px rgba(0,0,0,.6)} /* ---- ZONE 3 · The Challenge (approved 2026-09-16) ---- */ .p-eyebrow{display:flex;align-items:center;gap:9px;color:var(--cyan)} .p-eyebrow .bar{width:22px;height:2px;background:var(--cyan);display:inline-block} /* ---- Zone 3 proposed ---- */ .p3 .sec-head h2{max-width:24ch} .p3-card{position:relative;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d),transform .7s ease var(--d)} .p3-card::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--turq),rgba(64,224,208,0));transform:scaleX(0);transform-origin:0 50%;transition:transform 1s ease calc(var(--d) + .3s)} .is-in .p3-card{opacity:1;transform:none} .is-in .p3-card::after{transform:scaleX(1)} .p3-card h3{color:#fff} .p3-card p{color:var(--light-grey)} .p3-card:last-child{border-color:rgba(64,224,208,.35);background:linear-gradient(145deg,rgba(64,224,208,.08),rgba(30,58,95,.28))} .p3-card:last-child .ico{background:rgba(64,224,208,.1);border-color:rgba(64,224,208,.35)} .p3-card:last-child .ico svg{stroke:var(--turq)} .p3-q{margin-top:clamp(28px,3vw,40px);padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);border:1px solid rgba(0,229,255,.3);background:linear-gradient(160deg,rgba(15,33,54,.7),rgba(13,27,42,.9));text-align:center} .p3-q-h{margin:0 0 14px;font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-blue)} .p3-q-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .p3-q-list li{padding:10px 18px;border-radius:999px;border:1px solid rgba(0,229,255,.35);background:rgba(0,229,255,.08);color:#fff;font-size:clamp(.98rem,1.1vw,1.1rem)} .p3-q-list b{color:var(--cyan)} .p3-q-a{margin:0;color:var(--light-grey);font-size:clamp(1rem,1.15vw,1.12rem)} .p3-q-a b{color:#fff} @media (max-width:760px){.p3-grid{grid-template-columns:minmax(0,1fr)}} @media (min-width:761px) and (max-width:1100px){.p3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (prefers-reduced-motion:reduce){.p3-card,.p3-card::after{transition:none}} /* ---- ZONE 6 + ZONE 7 · moved from the live homepage (O-9 Security, O-11 Footer + O-12 bar), 2026-09-16 ---- Rules copied from origin/main:index.html and scoped under .live. Footer text set to white per Founder. */ .live .g{background:linear-gradient(135deg,#00E5FF,#40E0D0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .live .sl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#00E5FF;margin-bottom:10px} .live .st{font-size:2.1rem;font-weight:800;margin-bottom:12px;line-height:1.15;letter-spacing:-.02em;color:#FFFFFF} .live .ss{font-size:1rem;color:#8FA3BA;max-width:640px;margin-bottom:36px;line-height:1.7} .live .centered{text-align:center} .live .centered .ss{margin-left:auto;margin-right:auto} .live .sec-section{padding:64px 40px;max-width:1200px;margin:0 auto} .live .sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start} .live .sec-left p{color:#8FA3BA;font-size:.92rem;line-height:1.7;margin-bottom:12px} .live .sec-left p strong{color:#FFF} .live .sec-left p .warn{color:#FF7AB6;font-weight:600} .live .sec-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.2);border-radius:8px;margin-top:8px;margin-bottom:4px;margin-right:8px} .live .sec-badge-icon{font-size:1rem;display:inline-flex;align-items:center} .live .sec-badge-icon svg{width:15px;height:15px;fill:none;stroke:#00E5FF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .live .sec-badge-text{font-size:.78rem;font-weight:700;color:#00E5FF} .live .sec-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .live .sec-card{background:#0D1B2A;border:1px solid #1E3A5F;border-radius:10px;padding:16px 14px;transition:all .2s} .live .sec-card:hover{border-color:rgba(0,229,255,.25);transform:translateY(-2px)} .live .sec-card-icon{font-size:1.3rem;margin-bottom:6px} .live .sec-card-title{font-size:.85rem;font-weight:700;color:#FFF;margin-bottom:3px} .live .sec-card-desc{font-size:.72rem;color:#8FA3BA;line-height:1.5} .live .logo-text{display:flex;flex-direction:column;line-height:1.15} .live .lt-top{font-weight:800;font-size:.85rem;color:#FFF;letter-spacing:1px} .live .lt-bot{font-weight:700;font-size:.7rem;color:#00E5FF;letter-spacing:2px} .live .footer{padding:36px 40px;border-top:1px solid #1E3A5F;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;max-width:1200px;margin:0 auto} .live .footer-brand p{color:#FFFFFF;font-size:.78rem;margin-top:6px;line-height:1.6} .live .footer-col h4{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#FFFFFF;margin:0 0 10px} .live .footer-col a{display:block;color:#FFFFFF;font-size:.78rem;margin-bottom:5px;text-decoration:none} .live .footer-col a:hover{color:#00E5FF} .live .footer-bottom{text-align:center;padding:16px 40px;border-top:1px solid #1E3A5F;color:#FFFFFF;font-size:.68rem} .live-ftr{background:#0A1628} @media(max-width:768px){.live .sec-grid{grid-template-columns:1fr}.live .sec-cards{grid-template-columns:1fr}.live .footer{grid-template-columns:1fr 1fr}.live .sec-section,.live .footer{padding-left:20px;padding-right:20px}} /* ---- ZONE 4 · One SOW, five moves + report showcase (concept locked 2026-09-16) ---- */ /* ---- Zone 4 proposed ---- */ .p4-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);position:relative} .p4-track::before{content:"";position:absolute;left:10%;right:10%;top:34px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--turq),var(--cyan));transform:scaleX(0);transform-origin:0 50%;transition:transform 2.6s cubic-bezier(.5,0,.2,1) .2s;box-shadow:0 0 12px rgba(0,229,255,.5)} .is-in .p4-track::before{transform:scaleX(1)} .p4-move{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 4px 20px} .p4-node{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#0a1628;border:2px solid var(--cyan);box-shadow:0 0 0 6px rgba(0,229,255,.08),0 0 26px rgba(0,229,255,.3);opacity:0;transform:scale(.6);transition:opacity .5s ease calc(var(--i) * .55s + .3s),transform .5s ease calc(var(--i) * .55s + .3s)} .p4-node svg{width:28px;height:28px;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .p4-node em{position:absolute;top:-8px;right:-8px;font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:800;color:#0a1628;background:var(--cyan);border-radius:999px;padding:2px 6px} .is-in .p4-node{opacity:1;transform:none} .p4-name{display:block;margin-top:6px;font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff} .p4-what{display:block;color:var(--light-grey);font-size:.93rem;line-height:1.5} .p4-pay{display:block;margin-top:auto;padding:9px 12px;border-radius:10px;border:1px solid rgba(64,224,208,.4);background:rgba(64,224,208,.08);color:var(--turq);font-weight:700;font-size:.9rem;line-height:1.35} @media (max-width:1000px){ .p4-track{grid-template-columns:minmax(0,1fr);gap:0} .p4-track::before{left:33px;right:auto;top:20px;bottom:20px;width:2px;height:auto;transform:scaleY(0);transform-origin:50% 0;background:linear-gradient(180deg,var(--cyan),var(--turq),var(--cyan))} .is-in .p4-track::before{transform:scaleY(1)} .p4-move{display:grid;grid-template-columns:68px 1fr;column-gap:18px;text-align:left;align-items:start;padding-bottom:24px} .p4-node{grid-row:1 / span 3} .p4-name{margin-top:4px}.p4-pay{margin-top:4px;justify-self:start} } /* ---- Zone 4: report showcase ---- */ .p4-move{cursor:pointer;border-radius:14px;transition:background .5s} .p4-move.is-active{background:rgba(0,229,255,.06)} .p4-move.is-active .p4-node{box-shadow:0 0 0 8px rgba(0,229,255,.16),0 0 40px rgba(0,229,255,.6)} .p4-move.is-active .p4-name{color:var(--cyan)} .rs-wide{width:min(1880px,calc(100vw - 2 * var(--gut)));margin:clamp(30px,3.4vw,52px) auto 0} .rs{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(18px,2vw,32px);align-items:start} .rs-h{margin:0 0 12px;font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--turq)} .rs-list ol{list-style:none;margin:0;padding:0;display:grid;gap:8px} .rs-item{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(13,27,42,.8);border:1px solid var(--line);transition:background .4s,border-color .4s,box-shadow .4s} .rs-item.has-shot{cursor:pointer} .rs-dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--muted-blue)} .rs-item.has-shot .rs-dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan)} .rs-item b{display:block;color:#fff;font-size:.95rem;line-height:1.3} .rs-item em{display:block;font-style:normal;color:var(--muted-blue);font-size:.84rem;line-height:1.4} .rs-item.is-active{background:rgba(0,229,255,.12);border-color:rgba(0,229,255,.55);box-shadow:0 0 24px rgba(0,229,255,.18)} .rs-item.is-active b{color:var(--cyan)} .rs-viewer{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(0,229,255,.35);background:#0a1628;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(0,229,255,.12)} .rs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 16px;background:linear-gradient(90deg,#0F2136,#0d1b2a);border-bottom:1px solid rgba(0,229,255,.25)} .rs-dots{display:flex;gap:6px}.rs-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)} .rs-title{color:#fff;font-size:1.02rem} .rs-view{color:var(--muted-blue);font-size:.86rem} .rs-tag{margin:0;padding:8px 16px;font-size:.78rem;color:var(--muted-blue);background:#0a1628} .rs-head{text-align:center;margin:0 auto clamp(18px,2vw,28px);max-width:70ch} .rs-head h3{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.1;margin:0 0 8px;color:#fff;text-shadow:0 0 30px rgba(0,229,255,.25)} .rs-head p{margin:0;color:var(--light-grey);font-size:clamp(1rem,1.15vw,1.12rem)} .rs-money{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:6px 14px;border-radius:10px; background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(64,224,208,.12));border:1px solid rgba(0,229,255,.6);box-shadow:0 0 24px rgba(0,229,255,.3)} .rs-money-k{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--turq)} .rs-money-v{color:#fff;font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:800;line-height:1.15;white-space:nowrap} .rs-money.is-pop{animation:moneyPop .7s ease-out} @keyframes moneyPop{0%{transform:scale(.92);opacity:.3}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}} .rs-screen{position:relative;height:clamp(420px,68vh,860px);overflow:hidden;background:#0a1628} .rs-doc{padding:52px 18px 58px} .rs-shot{position:relative;margin:0 auto 14px} .rs-clip{overflow:hidden;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.45)} .rs-clip img{display:block;max-width:none;height:auto;filter:saturate(1.2) contrast(1.04)} .mm{position:absolute;z-index:2;border-radius:10px;border:3px solid rgba(0,229,255,0);transition:border-color .5s,box-shadow .5s,background .5s;pointer-events:none} .mm.is-lit{border-color:#00e5ff;background:rgba(0,229,255,.08);box-shadow:0 0 0 5px rgba(0,229,255,.22),0 0 34px rgba(0,229,255,.75)} .mm em{position:absolute;left:0;bottom:calc(100% + 10px);display:flex;align-items:center;gap:8px;white-space:nowrap;font-style:normal; font-weight:800;font-size:clamp(.82rem,1vw,1rem);color:#fff;background:#0a1628;border:1px solid #00e5ff;border-radius:999px;padding:6px 14px 6px 6px; box-shadow:0 0 22px rgba(0,229,255,.55);opacity:0;transform:translateY(8px);transition:opacity .5s .15s,transform .5s .15s} .mm.mm-right em{left:auto;right:0} .mm.mm-below em{bottom:auto;top:calc(100% + 10px);transform:translateY(-8px)} .mm em i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#00e5ff;color:#0a1628;font-style:normal;font-weight:900} .mm.is-lit em{opacity:1;transform:none} .rs-doc{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .7s ease;will-change:transform} .rs-doc.is-on{opacity:1} .rs-doc img{display:block;width:100%;height:auto} .rs-prog{height:4px;background:rgba(255,255,255,.08)}.rs-prog span{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan)} @media (max-width:1000px){.rs{grid-template-columns:minmax(0,1fr)}.rs-list ol{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.rs-screen{height:clamp(360px,60vh,640px)}.rs-tag{margin-left:0}} @media (prefers-reduced-motion:reduce){.p4-track::before,.p4-node{transition:none}} /* ---- ZONE 2 · home-screen tour v3 ---- */ /* 🔴 THE CONTROL CENTRE IS PINNED TO ITS NATIVE WIDTH, AND CENTRED. PIE_Home_Dashboard.png is 1501x651. It was rendering at 1878px — a 1.25x UPSCALE, which made Zone 2 run 2214px tall and left the screenshot soft. Founder, 2026-10-07: "too large showing the control center can you downsize this", then "not centered and now its too small. increase the size and center it". 1500px is the answer to both: as large as the file can go without inventing pixels, and no larger. 🔴 CAP THE STAGE, NEVER .ht-frame ALONE. The tour script positions .ht-card by writing inline left/top/width against the .ht-stage box. Capping the frame on its own centres the picture inside a still-full-width stage, the card goes on aiming at the old geometry, and it lands half off the screenshot with its text clipped — measured, frame at x=601 while the card still began at x=277. Whatever is capped, the stage must be inside it so the script's coordinate space and the image are the same box. 🔴 Do not raise this above 1501px: that is where the upscale returns. */ .hometour{position:relative;margin-top:64px;transition:padding-bottom .6s ease; max-width:1500px} .ht-stage{position:relative;min-width:0} .ht-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:0 26px 70px rgba(0,0,0,.55)} .ht-frame img{width:100%;height:auto;display:block} .ht-hot{all:unset;box-sizing:border-box;position:absolute;border-radius:7px;cursor:pointer;--tc:var(--cyan); transition:box-shadow 1s ease,outline-color 1s ease;outline:2px solid transparent;outline-offset:1px} .ht-hot[data-tone="org"]{--tc:var(--turq)}.ht-hot[data-tone="soon"]{--tc:var(--soon)} .ht-hot:focus-visible{outline-color:var(--tc)} .hometour.is-touring .ht-hot.is-target{outline-color:var(--tc);box-shadow:0 0 0 200vmax rgba(10,22,40,.5),0 0 30px var(--tc)} .ht-hot.is-ping::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--tc);animation:htping 1s ease-out} @keyframes htping{from{transform:scale(1);opacity:1}to{transform:scale(1.18);opacity:0}} .ht-arrow{position:absolute;left:0;top:0;width:42px;height:50px;z-index:7;pointer-events:none;opacity:0; transition:transform 1.4s cubic-bezier(.5,0,.2,1),opacity .4s;filter:drop-shadow(0 0 12px rgba(0,229,255,.75))} .ht-arrow svg{width:100%;height:100%;fill:none;stroke:var(--cyan);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;animation:htbob 1.4s ease-in-out infinite} @keyframes htbob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} .hometour.is-touring .ht-arrow{opacity:1} .ht-hint{margin:14px 0 0;text-align:center;font-size:.8rem;color:var(--muted-blue)} .ht-ghost{position:absolute;left:0;top:0;width:0;height:0;z-index:8;pointer-events:none;border-radius:10px;opacity:0; border:2px solid var(--cyan);background:rgba(0,229,255,.14);box-shadow:0 0 40px rgba(0,229,255,.55)} .ht-ghost.is-fly{transition:left 1.1s cubic-bezier(.5,0,.2,1),top 1.1s cubic-bezier(.5,0,.2,1),width 1.1s cubic-bezier(.5,0,.2,1),height 1.1s cubic-bezier(.5,0,.2,1),opacity .5s ease 1s} .ht-card{--tc:var(--cyan);position:relative;min-width:0;border-radius:18px;overflow:hidden; background:linear-gradient(160deg,#0F2136,#0d1b2a 70%);border:1px solid rgba(0,229,255,.45); box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(0,229,255,.14);transition:border-color .8s,box-shadow .8s} .ht-card[data-tone="org"]{--tc:var(--turq);border-color:rgba(64,224,208,.5)} .ht-card[data-tone="soon"]{--tc:var(--soon);border-color:rgba(156,140,255,.5)} .hc-inner{padding:clamp(22px,2vw,34px);transition:opacity .5s ease} .ht-card.is-swap .hc-inner{opacity:0} .hs-top{display:flex;gap:14px;align-items:center;margin-bottom:8px} .hs-num{display:grid;place-items:center;flex:0 0 auto;width:54px;height:54px;border-radius:12px;font-family:var(--mono);font-weight:800;font-size:1.15rem;color:#0a1628;background:var(--tc);box-shadow:0 0 24px var(--tc)} .hs-titles{flex:1 1 auto;min-width:0} .hs-kick{display:block;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tc)} .hs-name{display:block;color:#fff;font-size:clamp(1.4rem,2vw,2.1rem);line-height:1.15} .hs-count{align-self:flex-start;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--muted-blue)} .hs-line{color:var(--light-grey);font-size:clamp(.98rem,1.05vw,1.12rem);line-height:1.5;margin:0 0 14px} .hs-job{margin:0 0 18px;padding:10px 14px;border-radius:10px;background:rgba(10,22,40,.55);border:1px dashed rgba(255,255,255,.16)} .hs-job span{display:block;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-blue)} .hs-job b{display:block;color:#fff;font-weight:600;font-size:clamp(.95rem,1vw,1.05rem);line-height:1.4} .hs-h{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tc);margin:0 0 9px} .hs-h-alt{color:var(--without)} .hs-steps{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:st} .hs-steps li{counter-increment:st;position:relative;flex:1 1 150px;padding:10px 12px 10px 36px;border-radius:10px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.22);color:#fff;font-size:.92rem;line-height:1.35} .hs-steps li::before{content:counter(st);position:absolute;left:10px;top:10px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;font-weight:800;color:#0a1628;background:var(--tc)} .hs-without{margin:0 0 18px;padding:12px 14px 12px 16px;border-left:3px solid var(--without);border-radius:0 10px 10px 0;background:rgba(255,122,182,.07);color:var(--light-grey);font-size:clamp(.95rem,1vw,1.05rem);line-height:1.5;font-style:italic} .hs-who{margin:0;padding:0;list-style:none;display:grid;gap:9px} .hs-who li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:9px 14px 9px 12px;border-radius:10px;background:rgba(10,22,40,.6)} .hs-who li.is-primary{background:rgba(0,229,255,.12)} .hs-ri{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3)} .hs-ri svg{width:21px;height:21px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .hs-who b{display:block;color:#fff;font-size:1rem;line-height:1.3} .hs-who span.t{display:block;color:var(--muted-blue);font-size:.9rem;line-height:1.4} .hs-who li.is-primary b::after{content:"Primary role";font-family:var(--mono);font-size:.6rem;font-weight:700;color:#0a1628;background:var(--cyan);padding:2px 6px;border-radius:4px;margin-left:8px;vertical-align:2px} /* laser reveal */ .rv{position:relative;clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.6,0,.3,1)} .rv::after{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:#fff;opacity:0;pointer-events:none;box-shadow:0 0 10px 2px #fff,0 0 24px 7px var(--cyan)} .rv.is-on{clip-path:inset(0 0 0 0)} .rv.is-on::after{animation:htbeam 1s cubic-bezier(.6,0,.3,1) forwards} @keyframes htbeam{0%{left:0;opacity:1}92%{left:calc(100% - 4px);opacity:1}100%{left:calc(100% - 4px);opacity:0}} .hs-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)} .hs-prog span{display:block;height:100%;width:0;background:var(--tc);box-shadow:0 0 12px var(--tc)} @media (min-width:1500px){.hs-steps li{font-size:1rem}.hs-who b{font-size:1.1rem}.hs-who span.t{font-size:.98rem}.hs-line{font-size:1.15rem}} /* 🔴 THIS RULE IS THE ONE THAT SIZES THE CONTROL CENTRE — not .hometour above. It deliberately bleeds the tour outside the 1680px wrap and centres it on the VIEWPORT, using a half-width in the margin-left calc. The two numbers must stay in step: the second is always half the first, or the panel sits off centre (at 1500/940 it measured 100px left of the wrap and 280px right). 1880 -> 1500 because the source image is 1501x651 and 1880 was upscaling it 1.25x. Founder, 2026-10-07: "increase the size and center it". */ @media (min-width:1100px){.hometour{width:min(1500px,calc(100vw - 2 * var(--gut)));margin-left:calc(50% - min(750px,calc(50vw - var(--gut))))}} @media (min-width:900px){ .ht-card{position:absolute;left:0;top:0;z-index:6;width:clamp(460px,44%,820px); box-shadow:0 34px 90px rgba(0,0,0,.72),0 0 70px rgba(0,229,255,.2);transition:opacity .5s ease,border-color .8s,box-shadow .8s} .ht-card.is-swap{opacity:0} } @media (max-width:899px){.ht-card{margin-top:22px}} @media (max-width:560px){.hs-steps li{flex-basis:100%}.hs-num{width:44px;height:44px;font-size:1rem}.hs-who li{grid-template-columns:32px 1fr;gap:10px}.hs-ri{width:32px;height:32px}} @media (prefers-reduced-motion:reduce){.ht-hot,.ht-arrow,.ht-ghost.is-fly,.rv,.hc-inner{transition:none}.ht-arrow svg,.rv.is-on::after,.ht-hot.is-ping::after{animation:none}} /* ---- ZONE 2 · feature verbiage + pricing glow (2026-09-16) ---- */ /* Pricing — moderate glow, all text white (Founder: glow was too much; "pricing in white letters ... remove" the arctic colours) */ .plan{border-color:rgba(0,229,255,.22);box-shadow:0 0 0 1px rgba(0,229,255,.08),0 0 22px rgba(0,229,255,.07),var(--sh)} .plan.hi{border-color:rgba(0,229,255,.55);box-shadow:0 0 0 1px rgba(0,229,255,.25),0 0 30px rgba(0,229,255,.2),var(--sh)} .plan:hover{box-shadow:0 0 0 1px rgba(0,229,255,.35),0 0 36px rgba(0,229,255,.24),var(--sh)} .plan .flag{box-shadow:0 0 14px rgba(0,229,255,.4)} #pricing .plan h3,#pricing .plan .for,#pricing .price .cur,#pricing .price span,#pricing .plan .onb,#pricing .plan .onb em,#pricing .plan .small,#pricing .pricing-note{color:#ffffff} #pricing .price b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ffffff;-webkit-text-fill-color:#ffffff;filter:none} #pricing .plan .btn{color:#ffffff} #pricing .sec-head .lede{color:#ffffff} /* Zone 1 video caption. Founder, 2026-10-07: the name has to stay on the video. Sits UNDER the picture, matched to the 760px player width, so it never covers the frame he approved. */ /* Founder, 2026-10-07: "Place it on the bottom footer of the video not below it." So it is a strip ON the picture, over a scrim so it stays legible against whatever frame is under it. pointer-events:none — it must never swallow a click meant for the play button. It fades out once the video is playing, so it does not sit on top of the native controls. */ .hero-video-wrap{position:relative;display:inline-block;max-width:760px;width:100%;line-height:0} /* 🔴 bottom:46px, not 0. The browser draws its own control bar along the very bottom of a