/* ══════════════════════════════════════════════════════════ FINNOTO PRODUCT PAGE SYSTEM Shared by revenue-execution / revenue-intelligence / revenue-recovery Mirrors the landing page: Geist headings, left-aligned 2-col section heads, spaced glass bento cards with hover depth. Per-page accent is set via --acc-rgb on . ══════════════════════════════════════════════════════════ */ /* ── TYPE ── */ h1,h2,h3,h4,h5,.sec-head h2{font-family:'Geist',system-ui,sans-serif!important} h1{font-weight:700!important;letter-spacing:-.035em!important} h2,.sec-head h2{font-weight:600!important;letter-spacing:-.025em!important} body,p,.sub,.muted,.nav-links a,input,textarea,.btn{font-family:'Inter',system-ui,sans-serif!important} /* ── CANVAS ── */ body{background-image:radial-gradient(rgba(255,255,255,.042) 1px,transparent 1px);background-size:30px 30px} html[data-theme="light"] body{background-image:radial-gradient(rgba(10,35,28,.06) 1px,transparent 1px)} .sec{border-top:none} .sec>.wrap{border-left:none;border-right:none;padding-left:40px!important;padding-right:40px!important} @media(max-width:620px){.sec>.wrap{padding-left:22px!important;padding-right:22px!important}} /* ── CARD TOKENS ── */ :root{ --card-bg:rgba(255,255,255,.035); --card-bg-h:rgba(255,255,255,.06); --card-bd:rgba(255,255,255,.09); --card-r:16px; --card-shadow:0 22px 44px -14px rgba(0,0,0,.6),0 0 24px rgba(var(--acc-rgb),.07); } html[data-theme="light"]{ --card-bg:rgba(10,35,28,.035); --card-bg-h:rgba(10,35,28,.06); --card-bd:rgba(10,35,28,.13); --card-shadow:0 22px 44px -18px rgba(15,45,38,.28),0 0 24px rgba(var(--acc-rgb),.06); } .bento{ border:1px solid var(--card-bd);border-radius:var(--card-r); background:var(--card-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:transform .3s ease,box-shadow .3s ease,background .3s,border-color .3s } .bento:hover{ transform:translateY(-4px);background:var(--card-bg-h); border-color:rgba(var(--acc-rgb),.35);box-shadow:var(--card-shadow) } /* ── SECTION HEAD: full-width, left-aligned, 2 columns ── */ .sec-head{ max-width:none!important;width:100%!important; margin-left:0!important;margin-right:0!important;margin-bottom:44px!important; display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:64px; align-items:end;text-align:left!important;padding-bottom:0!important } .sec-head .tag{ grid-column:1;grid-row:1;align-self:start;margin-bottom:16px!important; border-left:3px solid rgb(var(--acc-rgb));border-radius:0!important; padding-left:12px!important;background:transparent!important; color:rgb(var(--acc-rgb))!important;letter-spacing:.1em } .sec-head h2{grid-column:1;grid-row:2;margin-bottom:0!important;text-align:left!important;font-size:clamp(25px,3vw,40px);line-height:1.15} .sec-head p{ grid-column:2;grid-row:1/3;align-self:end;max-width:none!important; font-size:15px!important;line-height:1.7!important;text-align:left!important; padding-bottom:4px;color:var(--muted) } @media(max-width:760px){ .sec-head{grid-template-columns:1fr!important;row-gap:14px} .sec-head .tag{grid-row:1!important} .sec-head h2{grid-row:2!important} .sec-head p{grid-column:1!important;grid-row:3!important;align-self:start} } /* ══ 1 · HERO ══ */ .hero{flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important} .hero-grid{ grid-template-columns:.98fr 1.02fr!important;gap:60px!important; align-items:center;margin-top:auto!important;margin-bottom:auto!important } .hero-grid h1{font-size:clamp(31px,3.6vw,50px)!important;line-height:1.08!important} .hero-grid h1 .g{ background:linear-gradient(96deg,rgb(var(--acc-rgb)),#8be9d0); -webkit-background-clip:text;background-clip:text;color:transparent } .hero-grid .sub{max-width:540px!important;font-size:clamp(13.5px,1.1vw,15.5px)!important} .hero-grid .eyebrow{display:inline-flex} .hero-support{ font-size:13.5px;font-weight:600;color:var(--muted-2); border-left:2px solid rgb(var(--acc-rgb));padding-left:12px; margin:4px 0 30px;font-style:italic;letter-spacing:.01em } .hero-visual{position:relative;align-self:center} .hv-head{ display:flex;align-items:center;gap:10px;padding:0 4px 12px; font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2) } .hv-live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:10px;color:rgb(var(--acc-rgb));letter-spacing:.06em} .hv-live-dot{width:6px;height:6px;border-radius:50%;background:rgb(var(--acc-rgb));box-shadow:0 0 8px rgb(var(--acc-rgb));animation:pulse 2s infinite} .hero-visual svg{display:block;width:100%;height:auto} @media(max-width:980px){.hero-grid{grid-template-columns:1fr!important}.hero-visual{max-width:560px}} /* hero diagram primitives */ .dg-line{stroke-width:1.1;fill:none;stroke-dasharray:4 5;animation:dgDash 1.5s linear infinite} @keyframes dgDash{to{stroke-dashoffset:-9}} .dg-l-acc{stroke:rgba(var(--acc-rgb),.5)} .dg-l-mut{stroke:rgba(255,255,255,.16)} html[data-theme="light"] .dg-l-mut{stroke:rgba(10,35,28,.18)} .dg-chip{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.11)} html[data-theme="light"] .dg-chip{fill:rgba(10,35,28,.04);stroke:rgba(10,35,28,.16)} .dg-t{font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:600;fill:#aebcb7} html[data-theme="light"] .dg-t{fill:#33463f} .dg-s{font-family:'Inter',system-ui,sans-serif;font-size:8px;font-weight:600;fill:#8fa39c} html[data-theme="light"] .dg-s{fill:#5c6f68} .dg-lab{font-family:'Geist',system-ui,sans-serif;font-size:8.5px;font-weight:700;letter-spacing:1.6px;fill:#5b6f68} html[data-theme="light"] .dg-lab{fill:#5c6f68} .dg-node{animation:dgGlow 3s ease-in-out infinite} @keyframes dgGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.3))}50%{filter:drop-shadow(0 0 16px rgba(var(--acc-rgb),.65))}} /* ══ 2 · METRICS ══ */ .metrics-sec{background:transparent;position:relative;border-top:none!important;padding:0} .metrics-sec>.wrap{ position:relative;z-index:1;overflow:hidden;border-radius:18px; background:linear-gradient(145deg,#052828 0%,#0a3f3f 40%,#083535 75%,#062e2e 100%); border:1px solid rgba(255,255,255,.09); padding-top:0!important;padding-bottom:0!important } .metrics-sec>.wrap::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px } .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .mitem{padding:44px 36px;position:relative} .mitem:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.1)} .mnum{ font-family:'Geist',system-ui,sans-serif;font-size:clamp(34px,3.6vw,54px);font-weight:700; letter-spacing:-.04em;line-height:1; background:linear-gradient(135deg,#fff 20%,rgba(var(--acc-rgb),.85) 100%); -webkit-background-clip:text;background-clip:text;color:transparent } .mlab{font-size:13px;color:rgba(255,255,255,.5);margin-top:10px;line-height:1.4} @media(max-width:760px){.mgrid{grid-template-columns:1fr 1fr}.mitem:nth-child(2)::after{display:none}.mitem{padding:34px 26px}} @media(max-width:480px){.mgrid{grid-template-columns:1fr}.mitem::after{display:none!important}} /* ══ 3 · PROBLEM ══ */ .prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .prob-item{padding:30px 26px;position:relative;border:1px solid var(--card-bd);border-radius:var(--card-r);background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .3s ease,box-shadow .3s ease,background .3s,border-color .3s} .prob-item:hover{background:rgba(236,140,104,.05);transform:translateY(-4px);border-color:rgba(236,140,104,.35);box-shadow:0 22px 44px -14px rgba(0,0,0,.6),0 0 24px rgba(236,140,104,.07)} .prob-num{font-family:'Geist',system-ui,sans-serif;font-size:13px;font-weight:600;color:#ec8c68;letter-spacing:.06em;margin-bottom:16px;display:flex;align-items:center;gap:8px} .prob-num::after{content:'';flex:1;height:1px;background:rgba(236,140,104,.25)} .prob-item h3{font-family:'Geist',system-ui,sans-serif!important;font-size:16.5px;font-weight:600;color:var(--text);margin:0 0 9px;letter-spacing:-.02em;line-height:1.35} .prob-item p{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0} .prob-stat{margin-top:16px;font-size:11.5px;font-weight:600;color:#ec8c68;border-left:2px solid rgba(236,140,104,.5);padding-left:10px} .prob-bridge{ display:flex;align-items:center;gap:22px;margin-top:16px; border:1px solid rgba(var(--acc-rgb),.3);border-radius:var(--card-r); background:linear-gradient(120deg,rgba(var(--acc-rgb),.07),transparent 60%); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:26px 30px } .pb-icon{width:42px;height:42px;flex-shrink:0;border:1px solid rgba(var(--acc-rgb),.4);display:grid;place-items:center;color:rgb(var(--acc-rgb));background:rgba(var(--acc-rgb),.08);border-radius:10px} .pb-icon svg{width:19px;height:19px} .pb-text{flex:1} .pb-text b{display:block;font-family:'Geist',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-.01em} .pb-text span{font-size:13.5px;color:var(--muted);line-height:1.6} @media(max-width:900px){.prob-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.prob-grid{grid-template-columns:1fr}.prob-bridge{flex-direction:column;align-items:flex-start}} /* ══ 4 · SOLUTION (alternating rows) ══ */ .sol-list{display:flex;flex-direction:column;gap:22px} .sol-row{ display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden; border:1px solid var(--card-bd);border-radius:18px;background:var(--card-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:transform .3s ease,box-shadow .3s ease,background .3s,border-color .3s } .sol-row:hover{transform:translateY(-4px);background:var(--card-bg-h);border-color:rgba(var(--acc-rgb),.35);box-shadow:var(--card-shadow)} .sol-copy{padding:44px 46px;display:flex;flex-direction:column;justify-content:center} .sol-step{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--acc-rgb));margin-bottom:16px} .sol-step svg{width:14px;height:14px} .sol-copy h3{font-family:'Geist',system-ui,sans-serif!important;font-size:clamp(20px,2.1vw,27px);font-weight:600;color:var(--text);margin:0 0 13px;letter-spacing:-.025em;line-height:1.25} .sol-copy>p{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 22px;max-width:460px} .sol-points{display:flex;flex-direction:column;gap:10px;margin:0 0 4px;padding:0;list-style:none} .sol-points li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text);line-height:1.55} .sol-points svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:rgb(var(--acc-rgb))} .sol-out{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:rgb(var(--acc-rgb))} .sol-out svg{width:15px;height:15px;flex-shrink:0} .sol-visual{ border-left:1px solid var(--card-bd);padding:36px 34px; background:rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:center;gap:10px;position:relative;overflow:hidden } html[data-theme="light"] .sol-visual{background:rgba(10,35,28,.045)} .sol-visual::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:20px 20px} .sol-row.flip .sol-copy{order:2;} .sol-row.flip .sol-visual{order:1;border-left:none;border-right:1px solid var(--card-bd)} @media(max-width:900px){ .sol-row,.sol-row.flip{grid-template-columns:1fr} .sol-row.flip .sol-copy{order:1} .sol-row.flip .sol-visual{order:2;border-right:none} .sol-visual{border-left:none;border-top:1px solid var(--card-bd);min-height:250px} .sol-copy{padding:34px 28px} } /* visual primitives inside solution rows */ .vz-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid var(--card-bd);border-radius:9px;background:var(--card-bg);position:relative;z-index:1;opacity:0;animation:vzIn .5s ease forwards} @keyframes vzIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} .vz-row:nth-child(1){animation-delay:.15s}.vz-row:nth-child(2){animation-delay:.35s} .vz-row:nth-child(3){animation-delay:.55s}.vz-row:nth-child(4){animation-delay:.75s} .vz-row:nth-child(5){animation-delay:.95s} .vz-n{font-size:12px;color:var(--muted);font-weight:500;line-height:1.35} .vz-b{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:6px;border:1px solid} .vz-b.ok{color:#3df0b3;border-color:rgba(61,240,179,.35);background:rgba(61,240,179,.08)} .vz-b.warn{color:#fbbf24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)} .vz-b.bad{color:#ec8c68;border-color:rgba(236,140,104,.35);background:rgba(236,140,104,.08)} .vz-b.info{color:#a78bfa;border-color:rgba(167,139,250,.35);background:rgba(167,139,250,.08)} .vz-b.mute{color:var(--muted-2);border-color:var(--card-bd);background:transparent} html[data-theme="light"] .vz-b.ok{color:#0a8f66} html[data-theme="light"] .vz-b.warn{color:#a16207} html[data-theme="light"] .vz-b.info{color:#6d4fc4} /* stat tiles */ .vz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1} .vz-stat{border:1px solid var(--card-bd);border-radius:10px;background:var(--card-bg);padding:14px 12px;text-align:center} .vz-stat .k{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .vz-stat .v{font-family:'Geist',system-ui,sans-serif;font-size:20px;font-weight:700;color:rgb(var(--acc-rgb));margin-top:6px;letter-spacing:-.02em} /* progress bars */ .vz-bars{display:flex;flex-direction:column;gap:13px;position:relative;z-index:1} .vz-bar-h{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;margin-bottom:6px} .vz-bar-h .l{color:var(--muted)} .vz-bar-h .r{font-weight:700;color:var(--text);font-family:'Geist',system-ui,sans-serif} .vz-track{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden} html[data-theme="light"] .vz-track{background:rgba(10,35,28,.09)} .vz-fill{height:100%;border-radius:3px;width:0;animation:vzFill 1s cubic-bezier(.34,1.2,.64,1) forwards} @keyframes vzFill{to{width:var(--w)}} /* pipeline */ .vz-pipe{display:flex;flex-direction:column;gap:11px;position:relative;z-index:1} .vz-step{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:11px;font-size:12px;opacity:0;animation:vzIn .45s ease forwards} .vz-step:nth-child(1){animation-delay:.15s}.vz-step:nth-child(2){animation-delay:.35s} .vz-step:nth-child(3){animation-delay:.55s}.vz-step:nth-child(4){animation-delay:.75s} .vz-step:nth-child(5){animation-delay:.95s} .vz-dot{width:9px;height:9px;border-radius:50%} .vz-dot.done{background:#3df0b3;box-shadow:0 0 8px rgba(61,240,179,.6)} .vz-dot.prog{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.55)} .vz-dot.idle{background:var(--muted-2);opacity:.45} .vz-sn{color:var(--muted);font-weight:500} .vz-sv{font-size:10.5px;font-weight:700} /* ══ 4b · ANOMALY CATALOGUE ══ */ .anom-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap} .anom-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:999px;border:1px solid} .anom-tag.op{color:#8b8bff;border-color:rgba(139,139,255,.4);background:rgba(139,139,255,.08)} .anom-tag.fin{color:#ec8c68;border-color:rgba(236,140,104,.4);background:rgba(236,140,104,.08)} .anom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .anom-card{ padding:22px 22px 20px;border:1px solid var(--card-bd);border-radius:14px;background:var(--card-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative; transition:transform .28s ease,box-shadow .28s ease,background .28s,border-color .28s } .anom-card:hover{transform:translateY(-4px);background:var(--card-bg-h);box-shadow:var(--card-shadow)} .anom-card.op:hover{border-color:rgba(139,139,255,.4)} .anom-card.fin:hover{border-color:rgba(236,140,104,.4)} .anom-kind{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;margin-bottom:13px} .anom-card.op .anom-kind{color:#8b8bff;background:rgba(139,139,255,.12)} .anom-card.fin .anom-kind{color:#ec8c68;background:rgba(236,140,104,.12)} .anom-card h4{font-family:'Geist',system-ui,sans-serif!important;font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 7px;letter-spacing:-.015em;line-height:1.35} .anom-card p{font-size:12px;color:var(--muted);line-height:1.6;margin:0} .anom-sla{margin-top:13px;display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;color:var(--muted-2)} .anom-sla svg{width:12px;height:12px;flex-shrink:0;opacity:.8} .anom-more{margin-top:18px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:9px} .anom-more b{color:rgb(var(--acc-rgb));font-weight:600} @media(max-width:860px){.anom-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.anom-grid{grid-template-columns:1fr}} /* ══ 4c · OUTCOMES ══ */ .out-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .out-card{ position:relative;padding:30px 26px 28px;border:1px solid var(--card-bd);border-radius:var(--card-r); background:linear-gradient(165deg,rgba(var(--acc-rgb),.07),var(--card-bg) 55%); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden; transition:transform .3s ease,box-shadow .3s ease,border-color .3s } .out-card::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(var(--acc-rgb),.06) 1px,transparent 1px);background-size:18px 18px} .out-card:hover{transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.4);box-shadow:var(--card-shadow)} .out-card>*{position:relative;z-index:1} .out-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:rgb(var(--acc-rgb));background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.3);margin-bottom:20px} .out-icon svg{width:18px;height:18px} .out-big{font-family:'Geist',system-ui,sans-serif;font-size:clamp(22px,2.3vw,30px);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:rgb(var(--acc-rgb));margin-bottom:9px} .out-card h3{font-family:'Geist',system-ui,sans-serif!important;font-size:15.5px;font-weight:600;color:var(--text);margin:0 0 8px;letter-spacing:-.02em;line-height:1.3} .out-card p{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0} .out-foot{ display:flex;align-items:center;gap:18px;margin-top:16px;padding:24px 30px; border:1px solid rgba(var(--acc-rgb),.3);border-radius:var(--card-r); background:linear-gradient(120deg,rgba(var(--acc-rgb),.08),transparent 65%); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px) } .out-foot svg{width:19px;height:19px;color:rgb(var(--acc-rgb));flex-shrink:0} .out-foot span{font-size:14px;color:var(--muted);line-height:1.6} .out-foot b{color:var(--text);font-weight:600} @media(max-width:900px){.out-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.out-grid{grid-template-columns:1fr}.out-foot{flex-direction:column;align-items:flex-start;gap:12px}} /* ══ 5 · INTEGRATIONS ══ */ .intg-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px} .intg-cell{ height:58px;display:flex;align-items:center;justify-content:center; border:1px solid var(--card-bd);border-radius:12px;background:var(--card-bg); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:transform .25s ease,box-shadow .25s ease,background .25s,border-color .25s } .intg-cell:hover{transform:translateY(-3px);background:var(--card-bg-h);border-color:rgba(var(--acc-rgb),.35);box-shadow:0 14px 28px -10px rgba(0,0,0,.55)} .intg-cell img{width:28px;height:28px;object-fit:contain;border-radius:5px;filter:grayscale(.35);opacity:.85;transition:filter .2s,opacity .2s} .intg-cell:hover img{filter:grayscale(0);opacity:1} .intg-cat-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:12px 0 8px;padding-left:2px} .intg-all{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgb(var(--acc-rgb));margin-top:20px} .intg-all svg{width:14px;height:14px;transition:transform .2s} .intg-all:hover svg{transform:translateX(4px)} @media(max-width:860px){.intg-grid{grid-template-columns:repeat(6,1fr)}} @media(max-width:560px){.intg-grid{grid-template-columns:repeat(4,1fr)}} /* ══ 6 · IMPLEMENTATION ══ */ .impl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .impl-step{ padding:34px 28px;position:relative;border:1px solid var(--card-bd);border-radius:var(--card-r); background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:transform .3s ease,box-shadow .3s ease,background .3s,border-color .3s } .impl-step:hover{background:var(--card-bg-h);transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.35);box-shadow:var(--card-shadow)} .impl-week{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--acc-rgb));background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.25);padding:5px 10px;border-radius:6px;margin-bottom:18px} .impl-num{font-family:'Geist',system-ui,sans-serif;font-size:clamp(26px,2.4vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text);opacity:.16;position:absolute;top:28px;right:24px} .impl-step h3{font-family:'Geist',system-ui,sans-serif!important;font-size:16.5px;font-weight:600;color:var(--text);margin:0 0 9px;letter-spacing:-.02em} .impl-step p{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0} .impl-note{margin-top:16px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted-2)} .impl-note svg{width:13px;height:13px;color:rgb(var(--acc-rgb));flex-shrink:0} @media(max-width:900px){.impl-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.impl-grid{grid-template-columns:1fr}} /* ══ 7 · OTHER PRODUCTS ══ */ .op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .op-card{ display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:32px 28px; border:1px solid var(--card-bd);border-radius:var(--card-r);background:var(--card-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:transform .3s ease,box-shadow .3s ease,background .3s,border-color .3s } .op-card:hover{transform:translateY(-4px);background:var(--card-bg-h);border-color:rgba(var(--acc-rgb),.35);box-shadow:var(--card-shadow)} .op-icon{width:40px;height:40px;border:1px solid var(--card-bd);border-radius:10px;display:grid;place-items:center;color:rgb(var(--acc-rgb));margin-bottom:20px} .op-icon svg{width:19px;height:19px} .op-card h3{font-family:'Geist',system-ui,sans-serif!important;font-size:17.5px;font-weight:600;color:var(--text);margin:0 0 5px;letter-spacing:-.02em;transition:color .25s} .op-sub{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--acc-rgb));margin-bottom:14px} .op-card p{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 20px;flex:1} .op-link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text);transition:color .2s} .op-link svg{width:13px;height:13px;transition:transform .2s} .op-card:hover .op-link{color:rgb(var(--acc-rgb))} .op-card:hover .op-link svg{transform:translateX(4px)} @media(max-width:860px){.op-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.op-grid{grid-template-columns:1fr}} /* ══ 8 · FINAL CTA ══ */ .cta-card{ position:relative;overflow:hidden;text-align:center; border:1px solid rgba(var(--acc-rgb),.3);border-radius:22px; background:linear-gradient(135deg,rgba(var(--acc-rgb),.1),transparent 55%,rgba(var(--acc-rgb),.06)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:68px 40px } .cta-card::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(var(--acc-rgb),.07) 1px,transparent 1px);background-size:20px 20px} .cta-card>*{position:relative;z-index:1} .cta-card h2{font-size:clamp(26px,3.2vw,42px);line-height:1.15;margin:0 0 16px} .cta-card p{font-size:15px;color:var(--muted);line-height:1.7;max-width:600px;margin:0 auto 30px} .cta-note{margin-top:20px!important;font-size:12.5px!important;color:var(--muted-2)!important} @media(max-width:560px){.cta-card{padding:48px 24px}} /* ── NAV dropdown extras (match landing) ── */ .dropdown .dd-ai{grid-column:1/-1;margin-top:4px;background:linear-gradient(92deg,rgba(61,240,179,.09),rgba(236,140,104,.09));border:1px solid rgba(61,240,179,.22)} .dropdown .dd-ai .di{background:linear-gradient(135deg,rgba(61,240,179,.18),rgba(236,140,104,.18));color:var(--mint)} .dropdown .dd-foot{grid-column:1/-1;display:flex;justify-content:center;align-items:center;font-size:12.5px;font-weight:600;color:var(--mint);padding:10px 12px;margin-top:4px;border-top:1px solid var(--line);border-radius:0} .dropdown .dd-foot:hover{background:rgba(var(--accent-rgb),.07)} .dropdown a.dd-foot::after{display:none}