@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
src:url('/fonts/Inter-var.woff2') format('woff2'), url('/fonts/Inter-var.ttf') format('truetype'); }
/* Ported from the Claude Design prototype (PWN first-block handoff). */
/* Minimal reset the prototype assumed from the design-system base.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--pwn-bg); }
/* UA widgets (scrollbars, form controls) follow the active theme */
:root { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
:root{
--pwn-bg:#f6f8fc; --pwn-surface:#ffffff; --pwn-text:#0b1220; --pwn-body:#3a4a63; --pwn-muted:#566480; --pwn-faint:#5a6678;
--pwn-line:#e2e8f1; --pwn-line-strong:#d4dce8; --pwn-btn-hover:rgba(50,50,50,.08);
--pwn-accent:#323232; --pwn-accent-hover:#1f1f1f; --pwn-accent-on:#ffffff; --pwn-accent-soft-border:rgba(50,50,50,.18);
--pwn-aura-r:rgba(224,138,120,.09); --pwn-aura-b:rgba(120,135,180,.12);
--pwn-logo-glow:drop-shadow(0 16px 40px rgba(11,18,32,.12));
}
@media (prefers-color-scheme: dark){
:root{
--pwn-bg:#16171a; --pwn-surface:#1d1f23; --pwn-text:#e7e8ec; --pwn-body:#b2b7bf; --pwn-muted:#9aa0aa; --pwn-faint:#9197a0;
--pwn-line:#232529; --pwn-line-strong:#2c2f36; --pwn-btn-hover:rgba(255,255,255,.08);
--pwn-accent:#c2c7d0; --pwn-accent-hover:#d6dae0; --pwn-accent-on:#16171a; --pwn-accent-soft-border:rgba(255,255,255,.18);
--pwn-aura-r:rgba(224,138,120,.08); --pwn-aura-b:rgba(154,169,210,.12);
--pwn-logo-glow:drop-shadow(0 16px 44px rgba(150,165,200,.16));
}
}
.pwn-b2{ --b2-link:#2f6fd6; --b2-bg:#f6f8fc; --b2-text:#0b1220; --b2-sub:#566480; --b2-line:rgba(11,18,32,.16); --b2-line-strong:rgba(11,18,32,.36); --b2-hover:rgba(11,18,32,.05); --b2-glow:rgba(120,110,210,.07); --b2-quotemark:rgba(40,55,95,.13); }
.pwn-b3{ --b3-bg:#f6f8fc; --b3-text:#0b1220; --b3-sub:#566480; --b3-line:#e2e8f1; --b3-line-strong:#d4dce8; --b3-win:#ffffff; --b3-bar:#eef2f8; --b3-hover:rgba(11,18,32,.05); --b3-glow:rgba(120,110,210,.06); }
.pwn-b4{ --b4-bg:#f6f8fc; --b4-text:#0b1220; --b4-sub:#566480; --b4-line:#e2e8f1; --b4-line-strong:#d4dce8; --b4-hover:rgba(11,18,32,.05); }
@media (prefers-color-scheme: dark){ .pwn-b4{ --b4-bg:#0a0d12; --b4-text:#f4f6fa; --b4-sub:#9aa3b2; --b4-line:rgba(255,255,255,.12); --b4-line-strong:rgba(255,255,255,.32); --b4-hover:rgba(255,255,255,.06); } }
@media (prefers-color-scheme: dark){ .pwn-b2{ --b2-link:#7cb8ff; --b2-bg:#0a0d12; --b2-text:#ffffff; --b2-sub:#9aa3b2; --b2-line:rgba(255,255,255,.15); --b2-line-strong:rgba(255,255,255,.45); --b2-hover:rgba(255,255,255,.05); --b2-glow:rgba(120,110,210,.12); --b2-quotemark:rgba(160,175,215,.16); } }
@media (prefers-color-scheme: dark){ .pwn-b3{ --b3-bg:#0a0d12; --b3-text:#ffffff; --b3-sub:#9aa3b2; --b3-line:rgba(255,255,255,.13); --b3-line-strong:rgba(255,255,255,.4); --b3-win:#12161f; --b3-bar:#171c26; --b3-hover:rgba(255,255,255,.06); --b3-glow:rgba(120,110,210,.08); } }
/* manual theme override (data-theme on ) — beats prefers-color-scheme by specificity */
html[data-theme="dark"]{ --pwn-bg:#16171a; --pwn-surface:#1d1f23; --pwn-text:#e7e8ec; --pwn-body:#b2b7bf; --pwn-muted:#9aa0aa; --pwn-faint:#9197a0; --pwn-line:#232529; --pwn-line-strong:#2c2f36; --pwn-btn-hover:rgba(255,255,255,.08); --pwn-accent:#c2c7d0; --pwn-accent-hover:#d6dae0; --pwn-accent-on:#16171a; --pwn-accent-soft-border:rgba(255,255,255,.18); --pwn-aura-r:rgba(224,138,120,.08); --pwn-aura-b:rgba(154,169,210,.12); --pwn-logo-glow:drop-shadow(0 16px 44px rgba(150,165,200,.16)); }
html[data-theme="dark"] .pwn-b2{ --b2-link:#7cb8ff; --b2-bg:#0a0d12; --b2-text:#ffffff; --b2-sub:#9aa3b2; --b2-line:rgba(255,255,255,.15); --b2-line-strong:rgba(255,255,255,.45); --b2-hover:rgba(255,255,255,.05); --b2-glow:rgba(120,110,210,.12); --b2-quotemark:rgba(160,175,215,.16); }
html[data-theme="dark"] .pwn-b3{ --b3-bg:#0a0d12; --b3-text:#ffffff; --b3-sub:#9aa3b2; --b3-line:rgba(255,255,255,.13); --b3-line-strong:rgba(255,255,255,.4); --b3-win:#12161f; --b3-bar:#171c26; --b3-hover:rgba(255,255,255,.06); --b3-glow:rgba(120,110,210,.08); }
html[data-theme="dark"] .pwn-b4{ --b4-bg:#0a0d12; --b4-text:#f4f6fa; --b4-sub:#9aa3b2; --b4-line:rgba(255,255,255,.12); --b4-line-strong:rgba(255,255,255,.32); --b4-hover:rgba(255,255,255,.06); }
html[data-theme="light"]{ --pwn-bg:#f6f8fc; --pwn-surface:#ffffff; --pwn-text:#0b1220; --pwn-body:#3a4a63; --pwn-muted:#566480; --pwn-faint:#5a6678; --pwn-line:#e2e8f1; --pwn-line-strong:#d4dce8; --pwn-btn-hover:rgba(50,50,50,.08); --pwn-accent:#323232; --pwn-accent-hover:#1f1f1f; --pwn-accent-on:#ffffff; --pwn-accent-soft-border:rgba(50,50,50,.18); --pwn-aura-r:rgba(224,138,120,.09); --pwn-aura-b:rgba(120,135,180,.12); --pwn-logo-glow:drop-shadow(0 16px 40px rgba(11,18,32,.12)); }
html[data-theme="light"] .pwn-b2{ --b2-link:#2f6fd6; --b2-bg:#f6f8fc; --b2-text:#0b1220; --b2-sub:#566480; --b2-line:rgba(11,18,32,.16); --b2-line-strong:rgba(11,18,32,.36); --b2-hover:rgba(11,18,32,.05); --b2-glow:rgba(120,110,210,.07); --b2-quotemark:rgba(40,55,95,.13); }
html[data-theme="light"] .pwn-b3{ --b3-bg:#f6f8fc; --b3-text:#0b1220; --b3-sub:#566480; --b3-line:#e2e8f1; --b3-line-strong:#d4dce8; --b3-win:#ffffff; --b3-bar:#eef2f8; --b3-hover:rgba(11,18,32,.05); --b3-glow:rgba(120,110,210,.06); }
html[data-theme="light"] .pwn-b4{ --b4-bg:#f6f8fc; --b4-text:#0b1220; --b4-sub:#566480; --b4-line:#e2e8f1; --b4-line-strong:#d4dce8; --b4-hover:rgba(11,18,32,.05); }
body{ background:var(--pwn-bg); }
.pwn-grain{ mix-blend-mode:multiply; opacity:.05; }
@media (prefers-color-scheme: dark){ .pwn-grain{ mix-blend-mode:screen; opacity:.05; } }
@keyframes pwnUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes flyCaret { 0%,100%{ opacity:1; } 50%{ opacity:0; } }
.fly-caret{ animation:flyCaret 1s step-end infinite; }
@keyframes pwnGrain { 0%{transform:translate(0,0)} 50%{transform:translate(3%,-4%)} 100%{transform:translate(-3%,2%)} }
@keyframes cardFlash { 0%{ opacity:0; transform:rotate(var(--rot)) scale(calc(var(--sz) * .82)); } 30%{ opacity:1; transform:rotate(var(--rot)) scale(var(--sz)); } 72%{ opacity:1; } 100%{ opacity:0; transform:rotate(var(--rot)) scale(calc(var(--sz) * 1.06)); } }
@keyframes cardHold { from{ opacity:0; transform:rotate(var(--rot)) scale(calc(var(--sz) * .82)); } to{ opacity:1; transform:rotate(var(--rot)) scale(var(--sz)); } }
@keyframes logoMorph { from{ opacity:0; transform:translate(-50%,-50%) scale(.15); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes logoMorph2 { from{ opacity:0; transform:scale(.15); } to{ opacity:1; transform:scale(1); } }
/* [37] CTA morph, pure CSS (was a JS scroll-scrub): slot opens, avatars pop in
one by one, then the icons crossfade into "hundreds of". The stack is a grid
overlay so the slot's natural width tracks whichever layer is widest - no JS
word measuring, works for every locale's word length. */
@keyframes ctaSlot { 0%{ max-width:0; } 20%{ max-width:110px; } 60%{ max-width:110px; } 85%{ max-width:44ch; } 100%{ max-width:44ch; } }
@keyframes ctaAva { to{ opacity:1; transform:scale(1); } }
@keyframes ctaFadeOut { to{ opacity:0; } }
@keyframes ctaFadeIn { to{ opacity:1; } }
/* no-JS hero logo: buildDotLogo halftone as a CSS mask (13px grid / r=8.06 in the
1668x940 space). */
.pwn-nojs-logo{ -webkit-mask-image:radial-gradient(circle closest-side,#000 123%,transparent 125%); mask-image:radial-gradient(circle closest-side,#000 123%,transparent 125%); -webkit-mask-size:.77938% 1.38298%; mask-size:.77938% 1.38298%; -webkit-mask-position:center; mask-position:center; }
@keyframes pwnNojsFade { to{ opacity:0; } } /* no-JS collage: last card fades as the logo blooms (JS does this imperatively) */
/* phone review card: avatar floats into the top-left corner and the quote text
wraps around it (instead of the avatar owning its own column); the letter button
clears the float and spans full width below. */
@media (max-width:640px){ .pwn-review-card{ display:block !important; } .pwn-review-card > span{ float:left !important; margin:1px 13px 5px 0 !important; } .pwn-review-letter{ clear:both !important; width:100% !important; box-sizing:border-box !important; flex-direction:row !important; justify-content:center !important; gap:10px !important; margin-top:13px !important; padding:11px 14px !important; } }
@media (prefers-reduced-motion: reduce){ .pwn-r *{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;} .fly-caret{animation:none;} }
.pwn-foot-col a{ font:500 13.5px/1.3 'Inter',system-ui,sans-serif; color:var(--b4-sub); text-decoration:none; display:inline-flex; align-items:center; gap:5px; width:max-content; transition:color .16s ease; }
.pwn-foot-col a:hover{ color:var(--b4-text); }
@media (max-width:720px){ .pwn-foot-grid{ grid-template-columns:1fr !important; } }
@media (max-width:600px){ .pwn-review-card{ flex-wrap:wrap; } .pwn-review-card .pwn-review-letter{ width:100% !important; flex-direction:row !important; gap:8px !important; } }
/* --- moved out of JS ------------------------------------------------ */
/* hovers formerly bound via data-style-hover; !important beats the inline base styles */
.pwn-cta:hover{ transform:translateY(-1px) !important; background:var(--pwn-accent-hover) !important; box-shadow:0 16px 36px -6px rgba(11,18,32,.26) !important; }
.pwn-soc:hover{ color:var(--b4-text) !important; border-color:var(--b4-line-strong) !important; background:var(--b4-hover) !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* #3 smooth the review reveal via opacity only — max-height/margin are scrubbed per
frame and transitioning layout properties fights the scrub (audit [48]). */
.pwn-review{ transition:opacity .12s ease-out; }
.pwn-review-card{ box-shadow:none !important; }
/* contact tiles are painted as dot-matrix pills on the canvas; the anchors stay as
invisible hit targets (clicks, focus, screen readers). Expanded layout everywhere
so the dot pill matches the hit area. Keyboard focus reveals the real card (the
only focus indicator possible over an opacity:0 anchor); click/tap does not — the
pill looks identical before and after, and the native href still opens the link. */
/* [42] CEO quote read-along words */
/* contact pills need a surface so they don't blend into the section background (only
the hover/pressed state was giving them one). */
/* --- extracted from inline style attributes (deduped, document order); */
/* --- placed last so they win ties like inline styles did ------------- */
.i2-1{position:relative; min-height:300vh; width:100%; box-sizing:border-box; background:var(--pwn-bg); color:var(--pwn-text); font-family:'Inter',system-ui,sans-serif;}
.i2-2{position:sticky; top:0; height:100vh; overflow:hidden;}
.i2-3{position:absolute;}
.i2-4{position:absolute; inset:-20%; pointer-events:none; background-image:url('data:image/svg+xml;utf8,'); animation:pwnGrain 1.6s steps(3) infinite;}
.i2-5{position:absolute; top:-15%; left:-10%; width:48vw; height:48vw; pointer-events:none; background:radial-gradient(circle,var(--pwn-aura-r),transparent 64%); filter:blur(30px);}
.i2-6{position:absolute; bottom:-18%; right:-10%; width:52vw; height:52vw; pointer-events:none; background:radial-gradient(circle,var(--pwn-aura-b),transparent 64%); filter:blur(30px);}
.i2-7{position:relative; z-index:2; max-width:1180px; margin:0 auto; min-height:100vh; padding:96px 40px 56px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; will-change:transform;}
.i2-8{perspective:1100px; width:min(560px,90vw); height:320px; position:relative;}
.i2-9{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;}
.i2-10{position:absolute; left:50%; top:50%; width:0; height:0; transform:translate(-50%,-50%); z-index:2; pointer-events:none;}
.i2-11{position:absolute; left:50%; top:50%; width:min(632px,84vw); transform:translate(-50%,-50%); filter:var(--pwn-logo-glow); opacity:0; z-index:4;}
.i2-12{display:block; width:100%; height:auto;}
.i2-13{margin:0 auto; max-width:560px; font-size:15.5px; line-height:1.62; color:var(--pwn-body); animation:pwnUp .7s ease 4.3s both;}
.i2-14{margin-top:32px; animation:pwnUp .7s ease 4.5s both;}
.i2-15{display:inline-flex; align-items:center; white-space:nowrap; padding:15px 30px; border-radius:999px; font:600 clamp(15px,2.1vw,20px)/1 'Inter',system-ui,sans-serif; letter-spacing:-.012em; color:var(--pwn-accent-on); background:var(--pwn-accent); text-decoration:none; box-shadow:0 12px 30px -6px rgba(11,18,32,.22); transition:transform .16s ease, box-shadow .16s ease, background .16s ease;}
.i2-16{display:inline-flex; align-items:center; flex:none; overflow:hidden; vertical-align:middle; max-width:0; animation:ctaSlot 4s cubic-bezier(.25,.8,.3,1) 5.3s both;}
.i2-17{display:inline-grid; align-items:center;}
.i2-18{display:inline-flex; align-items:center; grid-area:1/1; justify-self:start; animation:ctaFadeOut .7s ease 8.2s both;}
.i2-19{animation:ctaAva .42s cubic-bezier(.34,1.5,.5,1) 5.45s both; display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; width:22px; height:22px; border-radius:50%; color:#fff; font:700 9.5px/1 'Inter',sans-serif; margin-right:5px; opacity:0; transform:scale(.2); border:1.5px solid var(--pwn-surface); box-shadow:0 2px 7px -1px rgba(11,18,32,.35); transition:transform .42s cubic-bezier(.34,1.5,.5,1), opacity .3s ease; background:#e5484d;}
.i2-20{animation:ctaAva .42s cubic-bezier(.34,1.5,.5,1) 5.7s both; display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; width:22px; height:22px; border-radius:50%; color:#fff; font:700 9.5px/1 'Inter',sans-serif; margin-right:5px; opacity:0; transform:scale(.2); border:1.5px solid var(--pwn-surface); box-shadow:0 2px 7px -1px rgba(11,18,32,.35); transition:transform .42s cubic-bezier(.34,1.5,.5,1), opacity .3s ease; background:#8e6bff;}
.i2-21{animation:ctaAva .42s cubic-bezier(.34,1.5,.5,1) 5.95s both; display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box; width:22px; height:22px; border-radius:50%; color:#fff; font:700 9.5px/1 'Inter',sans-serif; margin-right:5px; opacity:0; transform:scale(.2); border:1.5px solid var(--pwn-surface); box-shadow:0 2px 7px -1px rgba(11,18,32,.35); transition:transform .42s cubic-bezier(.34,1.5,.5,1), opacity .3s ease; background:#4d7cfe;}
.i2-22{grid-area:1/1; justify-self:start; white-space:nowrap; opacity:0; animation:ctaFadeIn .7s ease 8.9s both;}
.cta-comma{opacity:0; margin:0 5px 0 -2px; transition:opacity .3s ease;}
.cta-comma-1{animation:ctaAva .3s ease 5.7s both;}
.cta-comma-2{animation:ctaAva .3s ease 5.95s both;}
/* client testimonials, pure CSS: cards overlay in one grid cell; wrapper
collapses via max-height (shadow clipping matches the old JS behaviour) */
.cta-reviews{display:grid; width:min(640px,92vw); max-height:0; opacity:0; margin-top:0; overflow:hidden; transition:max-height .45s ease .45s, opacity .4s ease .45s, margin-top .45s ease .45s; animation:ctaRevWrap 10s linear both;}
.cta-rev{grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; transition:opacity .3s ease .12s, transform .3s ease .12s, visibility 0s .42s;}
.cta-rev-1{animation:ctaRev1 10s linear both;}
.cta-rev-2{animation:ctaRev2 10s linear both;}
.cta-rev-3{animation:ctaRev3 10s linear both;}
@keyframes ctaRevWrap { 0%,56%{ max-height:0; opacity:0; margin-top:0; } 58%,80%{ max-height:420px; opacity:1; margin-top:8px; } 84%,100%{ max-height:0; opacity:0; margin-top:0; } }
@keyframes ctaRev1 { 0%,56.5%{ opacity:0; visibility:hidden; transform:translateY(10px); } 58.5%{ opacity:1; visibility:visible; transform:none; } 59.5%,100%{ opacity:0; visibility:hidden; transform:translateY(10px); } }
@keyframes ctaRev2 { 0%,58.7%{ opacity:0; visibility:hidden; transform:translateY(10px); } 59.7%,61.4%{ opacity:1; visibility:visible; transform:none; } 62.4%,100%{ opacity:0; visibility:hidden; transform:translateY(10px); } }
@keyframes ctaRev3 { 0%,61.6%{ opacity:0; visibility:hidden; transform:translateY(10px); } 62.6%,80%{ opacity:1; visibility:visible; transform:none; } 84%,100%{ opacity:0; visibility:hidden; transform:translateY(10px); } }
/* review-platform badges under the CTA: appear as "hundreds of" lands */
.cta-below{display:grid; justify-items:center; align-items:start; margin-top:14px;}
.cta-below > *{grid-area:1/1;}
.cta-proof{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 22px; opacity:0; animation:ctaFadeIn .6s ease 9.6s both;}
.cta-proof :is(a,span){display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 'Inter',system-ui,sans-serif; color:var(--pwn-muted); white-space:nowrap; text-decoration:none;}
.cta-proof a:hover{color:var(--pwn-text);}
.cta-proof svg{flex:none;}
/* Scroll-driven CTA (pure CSS): the hero section is the view-timeline subject;
animation-range:contain maps its pinned track to 0..1 exactly like the old JS
p = -rect.top/(height-viewport); keyframe % = p*100. Sequence: avatars pop at
22.7/36/49.3% (scroll-TRIGGERED, time-completed), quote closes 60-68% (JS),
icons fade 70-78%, "hundreds of" 78-86%, badges 82-92%, flood 90%+ (JS).
Browsers without scroll timelines keep the time-based fallback above. */
@supports (animation-timeline: scroll()){
.i2-1{ view-timeline:--pwnHero block; }
.i2-16{ animation:ctaSlotS linear both; animation-timeline:--pwnHero; animation-range:contain; }
/* scroll-TRIGGERED (not scrubbed) avatar pops: the scroll animation only flips
--s1..--s3 on the CTA at the thresholds; style() queries then let each
avatar's own TIME-based bouncy transition draw it fully — no half-drawn
letters when the user stops scrolling mid-window, reverses cleanly. */
.i2-7{ animation:ctaState linear both; animation-timeline:--pwnHero; animation-range:contain; }
.i2-19, .i2-20, .i2-21, .cta-comma-1, .cta-comma-2, .cta-reviews, .cta-rev, .cta-rev-1, .cta-rev-2, .cta-rev-3{ animation:none; }
@container style(--s1: 1){ .i2-19{ opacity:1; transform:scale(1); } }
@container style(--s2: 1){ .i2-20{ opacity:1; transform:scale(1); } .cta-comma-1{ opacity:1; } }
@container style(--s3: 1){ .i2-21{ opacity:1; transform:scale(1); } .cta-comma-2{ opacity:1; } }
@keyframes ctaState { 0%,22.6%{ --s1:0; --s2:0; --s3:0; --rvc:0; } 22.7%,35.9%{ --s1:1; --s2:0; --s3:0; --rvc:0; } 36%,49.2%{ --s1:1; --s2:1; --s3:0; --rvc:0; } 49.3%,59.9%{ --s1:1; --s2:1; --s3:1; --rvc:0; } 60%,100%{ --s1:1; --s2:1; --s3:1; --rvc:1; } }
/* testimonials follow the same flags; open instantly, close after the letter
finishes (.45s base delay > .42s avatar draw) */
@container style(--s1: 1) and style(--rvc: 0){ .cta-reviews{ max-height:420px; opacity:1; margin-top:8px; transition-delay:0s; } }
@container style(--s1: 1) and style(--s2: 0){ .cta-rev-1{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; } }
@container style(--s2: 1) and style(--s3: 0){ .cta-rev-2{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; } }
@container style(--s3: 1){ .cta-rev-3{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; } }
.i2-18{ animation:ctaIconsS linear both; animation-timeline:--pwnHero; animation-range:contain; }
.i2-22{ animation:ctaWordS linear both; animation-timeline:--pwnHero; animation-range:contain; }
.cta-proof{ animation:ctaProofS linear both; animation-timeline:--pwnHero; animation-range:contain; }
@keyframes ctaProofS { 0%,82%{ opacity:0; transform:translateY(8px); } 92%,100%{ opacity:1; transform:none; } }
@keyframes ctaSlotS { 0%,16%{ max-width:0; } 56%,70%{ max-width:110px; } 86%,100%{ max-width:44ch; } }
@keyframes ctaIconsS { 0%,70%{ opacity:1; } 78%,100%{ opacity:0; } }
@keyframes ctaWordS { 0%,78%{ opacity:0; } 86%,100%{ opacity:1; } }
}
.i2-23{width:min(640px,92vw); max-height:0; opacity:0; overflow:hidden; margin-top:0; will-change:max-height,opacity;}
.i2-24{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:48; opacity:0;}
.i2-25{position:fixed; left:0; top:0; z-index:45; pointer-events:none; opacity:0; transform:translate(-50%,-120%) scale(.5); transform-origin:50% 100%; transition:opacity .2s ease, transform .3s cubic-bezier(.2,.85,.3,1); will-change:transform,opacity;}
.i2-26{position:relative; min-height:520vh; width:100%; box-sizing:border-box; background:var(--b2-bg); color:var(--b2-text); font-family:'Inter',system-ui,sans-serif;}
.i2-27{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.i2-28{position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 36%, var(--b2-glow), transparent 60%);}
.i2-29{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; will-change:opacity;}
.i2-30{margin:0; font:700 clamp(44px,8vw,98px)/1 'Inter',system-ui,sans-serif; letter-spacing:-.035em; color:var(--b2-text);}
.i2-31{overflow:hidden; margin-top:26px;}
.i2-32{display:flex; align-items:center; gap:16px; opacity:0; transform:translateY(110%); will-change:transform,opacity;}
.i2-33{width:42px; height:2px; background:var(--b2-line-strong);}
.i2-34{font:500 clamp(15px,2.1vw,22px)/1.3 'Inter',system-ui,sans-serif; color:var(--b2-sub); white-space:nowrap;}
.i2-35{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity;}
.i2-36{width:min(1120px,92vw); padding:0 clamp(20px,5vw,64px); box-sizing:border-box; position:relative;}
.i2-37{display:inline-flex; gap:5px; padding:4px; border-radius:999px; border:1px solid var(--b2-line); margin-bottom:30px;}
.i2-38{appearance:none; cursor:pointer; border:none; background:var(--b2-text); color:var(--b2-bg); font:600 13px/1 'Inter',system-ui,sans-serif; padding:9px 19px; border-radius:999px; transition:background .18s ease, color .18s ease;}
.i2-39{appearance:none; cursor:pointer; border:none; background:transparent; color:var(--b2-sub); font:600 13px/1 'Inter',system-ui,sans-serif; padding:9px 19px; border-radius:999px; transition:background .18s ease, color .18s ease;}
.i2-40{font:800 clamp(96px,15vw,210px)/0.78 Georgia,'Times New Roman',serif; color:var(--b2-quotemark); height:.46em; overflow:hidden; user-select:none;}
.i2-41{margin-top:10px; min-height:clamp(230px,40vh,380px); font:700 clamp(23px,3.3vw,46px)/1.34 'Inter',system-ui,sans-serif; letter-spacing:-.02em; color:var(--b2-text); will-change:transform,opacity;}
.i2-42{display:flex; align-items:center; gap:15px; margin-top:30px;}
.i2-43{width:62px; height:62px; border-radius:50%; overflow:hidden; flex:none; box-shadow:0 6px 18px -6px rgba(0,0,0,.4);}
.i2-44{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.i2-45{display:flex; flex-direction:column; line-height:1.25;}
.i2-46{font:700 clamp(16px,1.9vw,20px)/1.2 'Inter',system-ui,sans-serif; color:var(--b2-text);}
.i2-47{font:500 clamp(13px,1.6vw,16px)/1.2 'Inter',system-ui,sans-serif; color:var(--b2-sub);}
/* [b2] "Who we are" is pure CSS: Brief/Full = radios+:has, the CEO quote is two
pre-rendered tracks of paragraphs (sentence spans light up read-along) driven
by the section's view-timeline. Ranges are inline per element (shared keyframes). */
a.i2-39{text-decoration:none; display:inline-block;}
.b2p{margin:0 0 .9em;}
.b2q a{ color:var(--b2-link); text-decoration:none; white-space:nowrap; font-weight:inherit; }
.b2q a::after{ content:"\2197"; font-size:.62em; margin-left:.12em; vertical-align:super; opacity:.85; }
/* Both branches are scoped via :has(.b2q) so the shared stylesheet cannot touch
locale homepages, whose block 2 still has the old JS-driven markup. */
/* no scroll-timeline support (or JS off in old browsers): a plain readable section */
@supports not (animation-timeline: scroll()){
.i2-26:has(.b2q){min-height:0;}
.i2-26:has(.b2q) .i2-27{position:static; height:auto; overflow:visible; display:block; padding:10vh 0;}
.i2-26:has(.b2q) .i2-29{position:static; inset:auto;}
.i2-26:has(.b2q) .i2-32{opacity:1; transform:none;}
.i2-26:has(.b2q) .i2-35{position:static; inset:auto; opacity:1; margin-top:7vh;}
}
@supports (animation-timeline: scroll()){
.i2-26:has(.b2q){view-timeline:--pwnB2 block;}
.i2-26:has(.b2q) .i2-29{animation:b2Intro linear both; animation-timeline:--pwnB2; animation-range:contain;}
.i2-26:has(.b2q) .i2-32{animation:b2Sub linear both; animation-timeline:--pwnB2; animation-range:contain;}
.i2-26:has(.b2q) .i2-35{animation:b2Card linear both; animation-timeline:--pwnB2; animation-range:contain;}
.b2q{display:grid;}
.b2p{grid-area:1/1; margin:0; animation:b2Para linear both; animation-timeline:--pwnB2;}
.b2p-last{animation-name:b2ParaLast;}
.b2l{animation:b2Lit linear both; animation-timeline:--pwnB2;}
@keyframes b2Intro{ 0%,26%{opacity:1; visibility:visible;} 34%,100%{opacity:0; visibility:hidden;} }
@keyframes b2Sub{ 0%,12%{opacity:0; transform:translateY(110%);} 24%,100%{opacity:1; transform:none;} }
@keyframes b2Card{ 0%,30%{opacity:0; visibility:hidden;} 34%,96%{opacity:1; visibility:visible;} 97.6%,100%{opacity:0; visibility:hidden;} }
@keyframes b2CardM{ 0%,30%{opacity:0; visibility:hidden;} 34%,92%{opacity:1; visibility:visible;} 93.6%,100%{opacity:0; visibility:hidden;} }
@media (max-width:760px){ .i2-26:has(.b2q) .i2-35{animation-name:b2CardM;} }
@keyframes b2Para{ 0%{opacity:0; visibility:hidden; transform:translateX(36px);} 12%{opacity:1; visibility:visible; transform:none;} 86%{opacity:1; transform:none;} 100%{opacity:0; visibility:hidden; transform:translateX(-36px);} }
@keyframes b2ParaLast{ 0%{opacity:0; visibility:hidden; transform:translateX(36px);} 12%,97.6%{opacity:1; visibility:visible; transform:none;} 98%,100%{opacity:1; visibility:hidden; transform:none;} }
@keyframes b2Lit{ from{opacity:.2;} to{opacity:1;} }
}
.i2-48{position:relative; min-height:760vh; width:100%; box-sizing:border-box; background:var(--b3-bg); color:var(--b3-text); font-family:'Inter',system-ui,sans-serif;}
.i2-49{position:fixed; left:50%; top:44%; z-index:60; display:none; align-items:center; gap:11px; background:var(--b3-bar); border:1px solid var(--b3-line-strong); border-radius:12px; padding:12px 18px; box-shadow:0 34px 80px -30px rgba(0,0,0,.62); pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.6); will-change:transform,opacity;}
.i2-50{display:flex; gap:6px; flex:none;}
.i2-51{width:10px;height:10px;border-radius:50%;background:#e5484d;}
.i2-52{width:10px;height:10px;border-radius:50%;background:#e0a83a;}
.i2-53{width:10px;height:10px;border-radius:50%;background:#3aa06a;}
.i2-54{display:flex; align-items:center; white-space:nowrap; font:600 clamp(15px,2.3vw,26px)/1 ui-monospace, SFMono-Regular, Menlo, Consolas,monospace; letter-spacing:-.01em;}
.i2-55{color:var(--b3-text);}
.i2-56{color:#8e6bff;}
.i2-57{width:2px; height:1.05em; margin-left:2px; background:#8e6bff; display:inline-block;}
.i2-58{position:absolute; inset:0; pointer-events:none; background:radial-gradient(110% 80% at 50% 50%, var(--b3-glow), transparent 60%);}
.i2-59{position:absolute; top:clamp(22px,5vh,52px); left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 clamp(22px,5vw,72px);}
.i2-60{font:600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas,monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--b3-sub); margin:0;}
.i2-61{display:inline-flex; gap:4px; padding:4px; border-radius:999px; border:1px solid var(--b3-line); background:var(--b3-bar);}
.i2-62{appearance:none; cursor:pointer; border:none; border-radius:999px; font:600 12.5px/1 'Inter',sans-serif; padding:9px 18px; background:var(--b3-text); color:var(--b3-bg); transition:background .18s ease, color .18s ease;}
.i2-63{appearance:none; cursor:pointer; border:none; border-radius:999px; font:600 12.5px/1 'Inter',sans-serif; padding:9px 18px; background:transparent; color:var(--b3-sub); transition:background .18s ease, color .18s ease;}
.i2-64{position:absolute; inset:0; z-index:2; will-change:opacity,transform;}
.i2-65{position:absolute; left:clamp(22px,6vw,92px); bottom:clamp(38px,7vh,62px); z-index:6; display:flex; flex-direction:column; gap:13px;}
.i2-66{display:flex; gap:9px; align-items:center;}
.i2-67{font:700 clamp(19px,2.3vw,30px)/1 ui-monospace, SFMono-Regular, Menlo, Consolas,monospace; letter-spacing:.06em; color:var(--b3-sub);}
/* [b3] Services carousel, pure CSS: browser-window cards with LAZY same-origin
iframes ride the section view-timeline (--pwnB3). Every rule is scoped via
:has(.b3c) so locale pages (old JS markup, shared stylesheet) are untouched.
Card geometry mirrors layoutB3: neighbour offset 56% of card width (82% on
mobile), scale falloff, veil toward the section bg, z-lift for the centre. */
.b3c{position:absolute; left:50%; top:50%; width:min(72vw,1040px); height:min(72vh,600px); border-radius:16px; overflow:hidden; background:var(--b3-win); border:1px solid var(--b3-line); box-shadow:0 50px 110px -50px rgba(0,0,0,.6); visibility:hidden; transform:translate(-50%,-50%);}
.b3bar{display:flex; align-items:center; gap:9px; padding:10px 12px; border-bottom:1px solid var(--b3-line); background:var(--b3-bar); position:relative; z-index:2;}
.b3dots{display:flex; gap:6px; flex:none;}
.b3url{flex:1; min-width:0; font:500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas,monospace; color:var(--b3-sub); text-decoration:none; background:var(--b3-bg); border:1px solid var(--b3-line); border-radius:7px; padding:6px 11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.b3v{position:absolute; left:0; right:0; top:40px; bottom:0; overflow:hidden; background:var(--b3-win);}
.b3frame{position:absolute; inset:0 0 150px 0; overflow:hidden;}
.b3frame iframe{width:200%; height:200%; border:0; transform:scale(.5); transform-origin:top left; pointer-events:none; background:var(--b3-win);}
@media (scripting: none){ .b3frame iframe[data-src]{ display:none; } }
.b3cap{position:absolute; left:0; right:0; bottom:0; height:150px;}
.b3hit{position:absolute; inset:40px 0 0 0; z-index:8;}
.b3veil{position:absolute; inset:0; z-index:9; pointer-events:none; background:var(--b3-bg); opacity:0;}
.b3v-info{display:none;}
.pwn-b3:has(#b3info:checked) .b3v-live{display:none;}
.pwn-b3:has(#b3info:checked) .b3v-info{display:block;}
input[name="b3mode"]{position:absolute; opacity:0; pointer-events:none;}
.i2-61 label{cursor:pointer;}
.pwn-b3:has(#b3info:checked) .i2-62{background:transparent; color:var(--b3-sub);}
.pwn-b3:has(#b3info:checked) .i2-63{background:var(--b3-text); color:var(--b3-bg);}
.i2-61:has(#b3live:focus-visible) .i2-62, .i2-61:has(#b3info:focus-visible) .i2-63{outline:2px solid currentColor; outline-offset:2px;}
.b3fly{display:none;} /* shown only by the timeline-scope fly animations below */
.b3ct{display:grid;}
.b3ct span{grid-area:1/1;}
.b3dash{height:14px; display:flex; align-items:center;}
.b3dash i{display:block; height:2px; width:34px; border-radius:2px; background:var(--b3-line-strong);}
/* no scroll-timeline support: cards stack as a readable static list */
@supports not (animation-timeline: scroll()){
.i2-48:has(.b3c){min-height:0;}
.i2-48:has(.b3c) .i2-2{position:static; height:auto; overflow:visible;}
.i2-48:has(.b3c) .i2-59{position:static; padding:9vh clamp(22px,5vw,72px) 0;}
.i2-48:has(.b3c) .i2-64{position:static; display:grid; gap:30px; justify-items:center; padding:34px 0 70px;}
.b3c{position:static; transform:none; visibility:visible; width:min(900px,94vw); margin:0 auto 30px;}
.b3veil{display:none;}
.i2-48:has(.b3c) .i2-65{display:none;}
}
@supports (animation-timeline: scroll()){
.i2-48:has(.b3c){view-timeline:--pwnB3 block;}
/* JS-free assist through the quote->services handoff: stopping mid-zone lets the
browser itself glide to the card-0 rest point (same target as the JS glide, so
they never fight). proximity = free scrolling everywhere else. */
html:has(.b3snap){ scroll-snap-type:y proximity; }
.b3snap{ position:absolute; left:0; top:calc(14% - 14vh); width:1px; height:1px; scroll-snap-align:start; }
.i2-48:has(.b3c) .i2-64{animation:b3Stage linear both; animation-timeline:--pwnB3; animation-range:contain;}
.i2-48:has(.b3c) .i2-59, .i2-48:has(.b3c) .i2-65, .i2-48:has(.b3c) .i2-58{animation:b3Chrome linear both; animation-timeline:--pwnB3; animation-range:contain;}
.b3c-mid{animation:b3Mid linear both; animation-timeline:--pwnB3;}
.b3c-first{animation:b3First linear both; animation-timeline:--pwnB3;}
.b3c-last{animation:b3Last linear both; animation-timeline:--pwnB3;}
.b3veil-mid{animation:b3VeilMid linear both; animation-timeline:--pwnB3;}
.b3veil-first{animation:b3VeilFirst linear both; animation-timeline:--pwnB3;}
.b3veil-last{animation:b3VeilLast linear both; animation-timeline:--pwnB3;}
.b3ct span, .b3dash i{animation-timeline:--pwnB3;}
.b3ct .b3tag-mid{animation:b3TagMid linear both; animation-timeline:--pwnB3;}
.b3ct .b3tag-first{animation:b3TagFirst linear both; animation-timeline:--pwnB3;}
.b3ct .b3tag-last{animation:b3TagLast linear both; animation-timeline:--pwnB3;}
.b3dash .b3tag-mid{animation:b3DashMid linear both; animation-timeline:--pwnB3;}
.b3dash .b3tag-first{animation:b3DashFirst linear both; animation-timeline:--pwnB3;}
.b3dash .b3tag-last{animation:b3DashLast linear both; animation-timeline:--pwnB3;}
@media (max-width:760px){
.b3c{width:92vw;}
.b3frame iframe{width:135%; height:135%; transform:scale(.7407);}
.b3c-mid{animation-name:b3MidM;} .b3c-first{animation-name:b3FirstM;} .b3c-last{animation-name:b3LastM;}
}
@keyframes b3Stage{ 0%,9.5%{opacity:0; transform:scale(.93);} 15%,100%{opacity:1; transform:none;} }
@keyframes b3Chrome{ 0%,9.5%{opacity:0;} 15%,80%{opacity:1;} 88%,100%{opacity:0;} }
/* phases: 0/25/50/75/100 == d = +2/+1/0/-1/-2 card offsets (window = ±2 steps) */
@keyframes b3Mid{ 0%{visibility:hidden; display:none; pointer-events:none; z-index:2; transform:translate(-50%,-50%) translateX(112%) scale(.68);} 16.2%{display:none;} 16.3%,83.7%{display:block;} 83.8%{display:none;} 30.7%{pointer-events:none;} 31%,69%{pointer-events:auto;} 69.3%{pointer-events:none;} 25%{visibility:visible; z-index:6; transform:translate(-50%,-50%) translateX(56%) scale(.84);} 50%{z-index:20; transform:translate(-50%,-50%) scale(1);} 75%{z-index:6; transform:translate(-50%,-50%) translateX(-56%) scale(.84);} 100%{visibility:hidden; display:none; pointer-events:none; z-index:2; transform:translate(-50%,-50%) translateX(-112%) scale(.68);} }
@keyframes b3First{ 0%,40%{visibility:visible; display:block; z-index:20; transform:translate(-50%,-50%) scale(1);} 0%,55.9%{pointer-events:auto;} 56.2%{pointer-events:none;} 76.6%{display:block;} 76.7%{display:none;} 64.15%{visibility:visible; z-index:6; transform:translate(-50%,-50%) translateX(-56%) scale(.84);} 100%{visibility:hidden; display:none; pointer-events:none; z-index:2; transform:translate(-50%,-50%) translateX(-112%) scale(.68);} }
@keyframes b3Last{ 0%{visibility:hidden; display:none; pointer-events:none; z-index:2; opacity:1; transform:translate(-50%,-50%) translateX(112%) scale(.68);} 23.2%{display:none;} 23.3%,100%{display:block;} 43.8%{pointer-events:none;} 44.1%,95%{pointer-events:auto;} 95.1%,100%{pointer-events:none;} 35.85%{visibility:visible; z-index:6; opacity:1; transform:translate(-50%,-50%) translateX(56%) scale(.84);} 71.7%,95%{visibility:visible; z-index:20; opacity:1; transform:translate(-50%,-50%) scale(1);} 100%{visibility:visible; z-index:20; opacity:0; transform:translate(-50%,-50%) translate(-16%,-22%) scale(.32);} }
@keyframes b3MidM{ 0%{visibility:hidden; display:none; pointer-events:none; z-index:2; transform:translate(-50%,-50%) translateX(164%) scale(.68);} 16.2%{display:none;} 16.3%,83.7%{display:block;} 83.8%{display:none;} 30.7%{pointer-events:none;} 31%,69%{pointer-events:auto;} 69.3%{pointer-events:none;} 25%{visibility:visible; z-index:6; transform:translate(-50%,-50%) translateX(82%) scale(.84);} 50%{z-index:20; transform:translate(-50%,-50%) scale(1);} 75%{z-index:6; transform:translate(-50%,-50%) translateX(-82%) scale(.84);} 100%{visibility:hidden; display:none; pointer-events:none; z-index:2; transform:translate(-50%,-50%) translateX(-164%) scale(.68);} }
@keyframes b3FirstM{ 0%,40%{visibility:visible; display:block; z-index:20; transform:translate(-50%,-50%) scale(1);} 0%,55.9%{pointer-events:auto;} 56.2%{pointer-events:none;} 76.6%{display:block;} 76.7%{display:none;} 64.15%{visibility:visible; z-index:6; transform:translate(-50%,-50%) translateX(-82%) scale(.84);} 100%{visibility:hidden; display:none; pointer-events:none; z-index:2; transform:translate(-50%,-50%) translateX(-164%) scale(.68);} }
@keyframes b3LastM{ 0%{visibility:hidden; display:none; pointer-events:none; z-index:2; opacity:1; transform:translate(-50%,-50%) translateX(164%) scale(.68);} 23.2%{display:none;} 23.3%,100%{display:block;} 43.8%{pointer-events:none;} 44.1%,95%{pointer-events:auto;} 95.1%,100%{pointer-events:none;} 35.85%{visibility:visible; z-index:6; opacity:1; transform:translate(-50%,-50%) translateX(82%) scale(.84);} 71.7%,95%{visibility:visible; z-index:20; opacity:1; transform:translate(-50%,-50%) scale(1);} 100%{visibility:visible; z-index:20; opacity:0; transform:translate(-50%,-50%) translate(-16%,-22%) scale(.32);} }
@keyframes b3VeilMid{ 0%{opacity:.95;} 25%{opacity:.87;} 50%{opacity:0;} 75%{opacity:.87;} 100%{opacity:.95;} }
@keyframes b3VeilFirst{ 0%,40%{opacity:0;} 64.15%{opacity:.87;} 100%{opacity:.95;} }
@keyframes b3VeilLast{ 0%{opacity:.95;} 35.85%{opacity:.87;} 71.7%,100%{opacity:0;} }
@keyframes b3TagMid{ 0%{opacity:0;} 1.5%,98.5%{opacity:1;} 100%{opacity:0;} }
@keyframes b3TagFirst{ 0%,98.5%{opacity:1;} 100%{opacity:0;} }
@keyframes b3TagLast{ 0%{opacity:0;} 1.5%,100%{opacity:1;} }
@keyframes b3DashMid{ 0%{width:34px; background:var(--b3-line-strong);} 2%,98%{width:54px; background:var(--b3-text);} 100%{width:34px; background:var(--b3-line-strong);} }
@keyframes b3DashFirst{ 0%,98%{width:54px; background:var(--b3-text);} 100%{width:34px; background:var(--b3-line-strong);} }
@keyframes b3DashLast{ 0%{width:34px; background:var(--b3-line-strong);} 2%,100%{width:54px; background:var(--b3-text);} }
/* URL-fly, pure CSS: timeline-scope lifts both section timelines to , so
one fixed pill rides --pwnB2 (form at the quote's end, fly to centre) and then
--pwnB3 (type the path, shrink+dock onto card 0's address bar). No JS position
measuring: both endpoints are calc()-derivable because the card is centred
(left = 50vw - min(31vw,450px)); pill text lands on the bar's url text
(dots+paddings: bar text at +74px, pill text at 71px*scale). Fully reversible. */
@supports (timeline-scope: --t){
body{ timeline-scope:--pwnB2, --pwnB3; }
.b3fly{ position:fixed; left:0; top:0; z-index:60; display:flex; visibility:hidden; opacity:0; align-items:center; gap:11px; background:var(--b3-bar); border:1px solid var(--b3-line-strong); border-radius:12px; padding:12px 18px; box-shadow:0 34px 80px -30px rgba(0,0,0,.62); pointer-events:none; transform-origin:0 0; will-change:transform,opacity;
animation:flyB2 linear both, flyB3 linear forwards; animation-timeline:--pwnB2, --pwnB3; animation-range:contain 96% contain 100%, contain 0% contain 11%; }
.b3fly-path{ display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:0; animation:flyType steps(17,end) forwards; animation-timeline:--pwnB3; animation-range:contain 0.5% contain 5%; }
@keyframes flyB2{ 0%{ visibility:hidden; opacity:0; transform:translate(calc(50vw - min(560px,46vw) + clamp(20px,5vw,64px)), 62vh) scale(.55); } 1%{ visibility:visible; } 40%{ opacity:1; } 100%{ visibility:visible; opacity:1; transform:translate(calc(50vw - 50%), calc(40vh - 50%)) scale(1); } }
@keyframes flyB3{ 0%{ visibility:visible; opacity:1; transform:translate(calc(50vw - 50%), calc(40vh - 50%)) scale(1); } 55%{ opacity:1; } 99%{ visibility:visible; } 100%{ visibility:hidden; opacity:0; transform:translate(calc(50vw - min(36vw,520px) + 43px), calc(50vh - min(36vh,300px) + 9px)) scale(.44); } }
@keyframes flyType{ from{ max-width:0; } to{ max-width:17ch; } }
@media (min-width:761px) and (max-width:1130px){
.b3fly{ animation-name:flyB2, flyB3W; }
@keyframes flyB3W{ 0%{ visibility:visible; opacity:1; transform:translate(calc(50vw - 50%), calc(40vh - 50%)) scale(1); } 55%{ opacity:1; } 99%{ visibility:visible; } 100%{ visibility:hidden; opacity:0; transform:translate(calc(50vw - min(36vw,520px) + 35px), calc(50vh - min(36vh,300px) + 6px)) scale(.55); } }
}
@media (max-width:760px){
.b3fly{ animation-name:flyB2, flyB3M; }
@keyframes flyB3M{ 0%{ visibility:visible; opacity:1; transform:translate(calc(50vw - 50%), calc(40vh - 50%)) scale(1); } 55%{ opacity:1; } 99%{ visibility:visible; } 100%{ visibility:hidden; opacity:0; transform:translate(calc(4vw + 19px), calc(50vh - min(36vh,300px) + 5px)) scale(.77); } }
}
}
}
/* Phone: the browser-window card caption is a title|blurb two-column row (inline
styled). On a ~360px card both columns get crushed and long titles (card 2)
overflow the fixed 150px caption. On the small card just show the label + service
name, centred — the blurb is already one tap away via the "Description" toggle and
redundant with the live preview. !important beats the inline styles; scoped to
.b3cap so only the services cards are touched. */
@media (max-width:760px){
.b3cap > div > div{ align-items:center !important; }
.b3cap > div > div > div{ max-width:100% !important; }
.b3cap p{ display:none !important; }
}
/* [b5] FAQ before contacts — all native HTML: exclusive accordion,