/* ==========================================================================
   Peak Desk 2026 design system: dark premium + teal/cyan light.
   Loaded after styles.css (the original stylesheet, now re-tinted to teal) on every page.
   x-* classes belong to the redesigned pages; the overrides at the top restyle the legacy pages.
   ========================================================================== */
:root{
  --x-bg:#0F0E0D; --x-bg2:#161412; --x-bg3:#1D1B19;
  --x-line:rgba(244,225,200,.12); --x-line2:rgba(244,225,200,.22);
  --x-ink-d:#F4F1EC; --x-text-d:#D9D2C8; --x-mute-d:#A8A097;
  --x-light:#F7F5F2; --x-white:#FFFFFF; --x-ink:#1A1A1A; --x-text:#2B2B2B; --x-mute:#6B6B6B; --x-line-l:#E7E2DB;
  --x-teal:#F7931E; --x-teal2:#F26522; --x-cyan:#FFC27A; --x-teal-ink:#B5530F;
  --x-grad:linear-gradient(135deg,#FFB347 0%,#F7931E 55%,#F26522 100%);
  --x-glow:0 0 0 1px rgba(247,147,30,.35),0 10px 40px -10px rgba(247,147,30,.55);
  --x-r:18px; --x-r-sm:12px;
  --x-ease:cubic-bezier(.2,.75,.2,1);
  --x-display:"Cormorant Garamond",Garamond,"Times New Roman",serif;
}
/* ---------- legacy page polish (pages still rendered by app.js) ---------- */
.x-legacy .page-head,.x-legacy .hero{background:radial-gradient(80% 120% at 85% 0%,rgba(247,147,30,.18),transparent 60%),linear-gradient(180deg,#151311,#0F0E0D);color:var(--x-text-d)}
.x-legacy .page-head h1,.x-legacy .hero h1{color:var(--x-ink-d)}
.x-legacy .page-head .lede,.x-legacy .hero .lede{color:var(--x-text-d)}
.x-legacy .page-head .crumbs,.x-legacy .page-head .crumbs a{color:var(--x-mute-d)}
.x-legacy .page-head .crumbs a:hover{color:var(--x-teal)}
.x-legacy .hero .btn-outline{border-color:var(--x-ink-d);color:var(--x-ink-d)}
.btn-primary{background:var(--x-grad);color:#1A1A1A;box-shadow:0 10px 26px -12px rgba(247,147,30,.7)!important}
.btn-primary:hover{background:var(--x-grad);color:#1A1A1A;filter:brightness(1.08);box-shadow:0 14px 30px -12px rgba(247,147,30,.85)!important}
:focus-visible{outline:2px solid var(--x-teal);outline-offset:3px}

/* ---------- base ---------- */
.x-own{background:var(--x-bg);color:var(--x-text-d)}
.x-own main{display:block}
.x-wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.x-narrow{width:min(820px,100% - 32px);margin-inline:auto}
.x-sec{position:relative;padding:clamp(4.5rem,10vw,8.5rem) 0;overflow:hidden}
.x-sec.x-tight{padding:clamp(3rem,7vw,5rem) 0}
.x-dark{background:var(--x-bg);color:var(--x-text-d)}
.x-dark2{background:linear-gradient(180deg,#0F0E0D,#14120F 50%,#0F0E0D);color:var(--x-text-d)}
.x-light{background:var(--x-light);color:var(--x-text)}
.x-white{background:var(--x-white);color:var(--x-text)}
.x-light h1,.x-light h2,.x-light h3,.x-light h4,.x-white h1,.x-white h2,.x-white h3,.x-white h4{color:var(--x-ink)}
.x-hero h1,.x-phero h1,.x-phero h2,.x-cta h2,.x-dark h1,.x-dark h2,.x-dark h3,.x-dark h4,.x-dark2 h1,.x-dark2 h2,.x-dark2 h3,.x-dark2 h4{color:var(--x-ink-d)}
.x-own p{max-width:62ch}
.x-own a{text-decoration:none}
.x-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font:600 .74rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--x-teal);margin:0 0 1.2rem}
.x-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.x-light .x-eyebrow,.x-white .x-eyebrow{color:var(--x-teal-ink)}
.x-h1{font:700 clamp(3rem,8.4vw,6.8rem)/.98 var(--x-display);letter-spacing:-.01em;margin:0 0 1.4rem}
.x-h2{font:600 clamp(2.2rem,4.8vw,3.8rem)/1.05 var(--x-display);letter-spacing:-.005em;margin:0 0 1.1rem}
.x-h3{font:700 1.45rem/1.2 var(--x-display);letter-spacing:0;margin:0 0 .5rem}
.x-lede{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.65;margin:0 0 1.6rem}
.x-dark .x-lede,.x-dark2 .x-lede{color:var(--x-text-d)}
.x-light .x-lede,.x-white .x-lede{color:var(--x-mute)}
.x-grad-text{background:linear-gradient(100deg,#FFF4E6 10%,#FFB45C 45%,#F7931E 70%,#FFD9A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.x-head.x-center{margin-inline:auto;text-align:center}
.x-head.x-center p{margin-inline:auto}
.x-head.x-center .x-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.x-muted{color:var(--x-mute-d)}
.x-light .x-muted,.x-white .x-muted{color:var(--x-mute)}
.x-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.x-btn{--h:54px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--h);padding:0 1.7rem;border-radius:999px;font:600 .9rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease),background-color .25s,color .25s,border-color .25s}
.x-btn svg{transition:transform .35s var(--x-ease)}
.x-btn:hover svg{transform:translateX(4px)}
.x-btn:active{transform:scale(.97)}
.x-btn-primary{background:var(--x-grad);color:#1A1A1A;box-shadow:0 12px 30px -12px rgba(247,147,30,.75),inset 0 1px 0 rgba(255,255,255,.45)}
.x-btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--x-ease)}
.x-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(247,147,30,.95),inset 0 1px 0 rgba(255,255,255,.5);color:#1A1A1A}
.x-btn-primary:hover::after{transform:translateX(120%)}
.x-btn-ghost{background:rgba(255,255,255,.03);color:var(--x-ink-d);border-color:rgba(244,236,226,.28);backdrop-filter:blur(6px)}
.x-btn-ghost:hover{border-color:var(--x-teal);color:#fff;background:rgba(247,147,30,.08);transform:translateY(-2px)}
.x-light .x-btn-ghost,.x-white .x-btn-ghost{color:var(--x-ink);border-color:rgba(26,24,22,.25);background:transparent}
.x-light .x-btn-ghost:hover,.x-white .x-btn-ghost:hover{border-color:var(--x-teal-ink);color:var(--x-teal-ink);background:rgba(242,101,34,.06)}
.x-btn-dark{background:var(--x-ink);color:#fff}
.x-btn-dark:hover{background:#2B2B2B;color:#fff;transform:translateY(-2px)}
.x-btn-sm{--h:44px;padding:0 1.25rem;font-size:.78rem}
.x-btns{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.x-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--x-teal);border-bottom:1px solid transparent;transition:border-color .2s,gap .3s var(--x-ease)}
.x-link:hover{border-color:currentColor;gap:.7rem}
.x-light .x-link,.x-white .x-link{color:var(--x-teal-ink)}

/* ---------- header ---------- */
.x-header{position:sticky;top:0;z-index:60;background:rgba(15,14,13,.94);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(244,225,200,.08);transition:background .3s,border-color .3s}
.x-header.shrunk{background:rgba(15,14,13,.9);border-color:rgba(244,225,200,.14)}
.x-header-in{display:flex;align-items:center;gap:1rem;height:74px;transition:height .3s var(--x-ease)}
.x-header.shrunk .x-header-in{height:64px}
.x-brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--x-ink-d);text-decoration:none;flex:none}
.x-word{font:700 1.2rem/1 var(--x-display);letter-spacing:.3em;color:var(--x-ink-d)}
.x-word em{font-style:normal;color:var(--x-teal)}
.x-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.x-nav>a,.x-nav .x-sub-trigger,.x-login a{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .62rem;font:500 .76rem/1 var(--sans);letter-spacing:.08em;white-space:nowrap;text-transform:uppercase;color:#D9D2C8;text-decoration:none;border-radius:8px;transition:color .2s}
.x-nav>a:hover,.x-nav .x-sub-trigger:hover,.x-login a:hover{color:#fff}
.x-nav a[aria-current="page"]{color:#fff}
.x-nav>a[aria-current="page"]::after,.x-sub-trigger[aria-current="page"]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--x-teal);box-shadow:0 0 12px var(--x-teal)}
.x-nav .x-nav-cta{margin-left:.6rem;color:#1A1A1A}
.x-has-sub{position:relative}
.x-sub{position:absolute;top:calc(100% + 10px);left:50%;width:min(620px,90vw);padding:1rem;border-radius:16px;background:rgba(22,20,18,.97);border:1px solid var(--x-line2);box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .3s var(--x-ease),visibility 0s .3s}
.x-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.x-has-sub:hover .x-sub,.x-has-sub:focus-within .x-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .3s var(--x-ease)}
.x-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.x-sub a{display:flex;gap:.7rem;align-items:baseline;padding:.6rem .7rem;border-radius:10px;color:#E6DFD5;font-size:.92rem;text-decoration:none;transition:background .2s,color .2s}
.x-sub a:hover{background:rgba(247,147,30,.09);color:#fff}
.x-sub-num{font:600 .7rem/1 var(--x-display);color:var(--x-teal);letter-spacing:.05em}
.x-sub-foot{display:flex;flex-wrap:wrap;gap:.1rem .2rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--x-line)}
.x-sub-foot a{font-size:.82rem;color:var(--x-mute-d)}
.x-sub-foot a:first-child{color:var(--x-teal);font-weight:600}
.x-menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--x-line2);background:rgba(255,255,255,.03);cursor:pointer;position:relative}
.x-menu-btn span{position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;background:#F4F1EC;transition:transform .35s var(--x-ease),opacity .2s}
.x-menu-btn span:nth-child(1){top:16px}.x-menu-btn span:nth-child(2){top:22px}.x-menu-btn span:nth-child(3){top:28px}
.x-header.menu-open .x-menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.x-header.menu-open .x-menu-btn span:nth-child(2){opacity:0}
.x-header.menu-open .x-menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1240px){
  .x-menu-btn{display:block}
  .x-nav{position:fixed;left:0;right:0;top:var(--nav-top,74px);bottom:0;z-index:59;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:1rem 16px 2.5rem;background:#0F0E0D;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .35s var(--x-ease),visibility 0s .35s}
  .x-nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--x-ease)}
  .x-nav>a,.x-nav .x-sub-trigger,.x-login a{padding:1rem .25rem;font-size:.95rem;border-bottom:1px solid var(--x-line);border-radius:0;width:100%}
  .x-nav>a[aria-current="page"]::after,.x-sub-trigger[aria-current="page"]::after{left:0;right:auto;width:3px;top:1rem;bottom:1rem;height:auto}
  .x-sub-trigger svg{display:none}
  .x-sub{position:static;width:auto;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:.3rem 0 .6rem .4rem}
  .x-has-sub:hover .x-sub,.x-has-sub:focus-within .x-sub{transform:none}
  .x-sub-grid{grid-template-columns:1fr}
  .x-sub a{padding:.55rem .5rem;font-size:.9rem}
  .x-nav .x-nav-cta{margin:1.4rem 0 0;width:100%}
  .x-login{display:block}
}

/* ---------- footer ---------- */
.x-footer{background:#0B0A09;color:var(--x-mute-d);padding:clamp(3.5rem,8vw,5.5rem) 0 2rem;border-top:1px solid var(--x-line);position:relative;overflow:hidden}
.x-footer::before{content:"";position:absolute;left:50%;top:-1px;width:min(900px,90vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--x-teal),transparent);opacity:.6}
.x-foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2rem}
.x-foot-brand p{margin:1rem 0 1.2rem;max-width:34ch;font-size:.95rem;color:var(--x-mute-d)}
.x-footer h2{font:600 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#F4F1EC;margin:0 0 1.1rem}
.x-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.x-footer a{color:var(--x-mute-d);text-decoration:none;font-size:.93rem;transition:color .2s}
.x-footer a:hover{color:var(--x-teal)}
.x-social{display:flex;gap:.5rem}
.x-social a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--x-line2);color:#E6DFD5}
.x-social a:hover{border-color:var(--x-teal);color:var(--x-teal);box-shadow:var(--x-glow)}
.x-social svg{width:18px;height:18px;fill:currentColor}
.x-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--x-line);font-size:.82rem}
@media (max-width:960px){.x-foot-grid{grid-template-columns:1fr 1fr}.x-foot-brand{grid-column:1/-1}}
@media (max-width:420px){.x-foot-grid{gap:1.6rem 1rem}}

/* ---------- reveal ---------- */
.js [data-rv]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--x-ease),transform 1s var(--x-ease);transition-delay:var(--d,0s)}
.js [data-rv="left"]{transform:translate3d(-36px,0,0)}
.js [data-rv="right"]{transform:translate3d(36px,0,0)}
.js [data-rv="scale"]{transform:scale(.94)}
.js [data-rv].in{opacity:1;transform:none}
.x-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.x-words .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--x-ease);transition-delay:calc(var(--i)*.09s + .15s)}
.x-words.in .w>span,.no-js .x-words .w>span{transform:none}

/* ---------- hero ---------- */
.x-hero{position:relative;min-height:calc(100svh - 74px);display:flex;align-items:center;padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,7vw,5rem);overflow:hidden;background:var(--x-bg);isolation:isolate}
.x-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.x-hero-bg .g1{position:absolute;right:-10%;top:-25%;width:75vw;height:75vw;max-width:1100px;max-height:1100px;border-radius:50%;background:radial-gradient(closest-side,rgba(247,147,30,.32),rgba(242,101,34,.12) 45%,transparent 72%);filter:blur(10px)}
.x-hero-bg .g2{position:absolute;left:-15%;bottom:-35%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,194,122,.12),transparent 70%)}
.x-hero-bg .grid{position:absolute;left:-20%;right:-20%;bottom:-6%;height:58%;background-image:linear-gradient(rgba(255,180,92,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,180,92,.16) 1px,transparent 1px);background-size:64px 64px;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 85%);mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 85%);animation:xGrid 14s linear infinite}
@keyframes xGrid{to{background-position:0 64px,0 0}}
.x-hero-bg .beam{position:absolute;top:-30%;width:2px;height:120%;background:linear-gradient(180deg,transparent,rgba(255,180,92,.5),transparent);filter:blur(1px);opacity:.0;animation:xBeam 7s ease-in-out infinite}
.x-hero-bg .beam.b1{left:62%;transform:rotate(18deg)}
.x-hero-bg .beam.b2{left:78%;transform:rotate(18deg);animation-delay:2.4s}
.x-hero-bg .beam.b3{left:46%;transform:rotate(18deg);animation-delay:4.6s}
@keyframes xBeam{0%,100%{opacity:0}40%{opacity:.7}60%{opacity:.25}}
.x-hero-bg .light{position:absolute;right:8%;top:0;width:40%;height:100%;background:conic-gradient(from 200deg at 60% 0%,transparent 0deg,rgba(255,194,122,.10) 18deg,transparent 40deg);filter:blur(18px)}
.x-particles{position:absolute;inset:0}
.x-particles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFB45C;box-shadow:0 0 8px #F7931E;opacity:0;animation:xDust var(--t,12s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes xDust{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:var(--o,.6)}85%{opacity:var(--o,.6)}100%{opacity:0;transform:translate3d(var(--dx,20px),-160px,0)}}
.x-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.x-hero-copy{position:relative;z-index:2}
.x-hero .x-h1{margin-bottom:1.6rem}
.x-hero .x-h1 .dot{color:var(--x-teal);text-shadow:0 0 24px rgba(247,147,30,.7)}
.x-hero .x-lede{max-width:34rem;color:#D9D2C8}
.x-hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2.2rem;padding:0;list-style:none;color:var(--x-mute-d);font-size:.86rem}
.x-hero-meta li{display:flex;align-items:center;gap:.45rem}
.x-hero-meta li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--x-teal);box-shadow:0 0 10px var(--x-teal)}
.x-scroll-cue{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);width:24px;height:38px;border:1px solid rgba(244,236,226,.3);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.x-scroll-cue::after{content:"";width:3px;height:8px;border-radius:3px;background:var(--x-teal);animation:xCue 1.8s var(--x-ease) infinite}
@keyframes xCue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------- 3D laptop ---------- */
.x-lap-scene{--lw:min(620px,43vw);position:relative;width:var(--lw);height:calc(var(--lw) * 1.1);margin-left:auto;margin-right:0;perspective:2400px;perspective-origin:50% 20%}
.x-lap{--rx:-24deg;--ry:-22deg;--rz:2deg;--ty:0px;--sc:.94;--px:0deg;--py:0deg;position:absolute;left:0;top:2%;width:100%;height:63em;font-size:calc(var(--lw) / 100);transform-style:preserve-3d;transform:translate3d(0,var(--ty),0) rotateX(calc(var(--rx) + var(--py))) rotateY(calc(var(--ry) + var(--px))) rotateZ(var(--rz)) scale(var(--sc));will-change:transform}
.x-lap-float{position:absolute;inset:0;transform-style:preserve-3d;animation:xFloat 7s ease-in-out infinite}
@keyframes xFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1.4%,0)}}
.js .x-lap-intro{opacity:0;transform:translate3d(6%,8%,-200px) rotateY(-14deg) scale(.9);transition:opacity 1.4s var(--x-ease) .2s,transform 2s var(--x-ease) .2s;transform-style:preserve-3d;position:absolute;inset:0}
.js .x-ready .x-lap-intro{opacity:1;transform:none}
.x-lap-lid{position:relative;width:100em;height:63em;margin:0 auto;transform-origin:50% 100%;transform:rotateX(24deg);border-radius:2.6em 2.6em 1em 1em;background:linear-gradient(160deg,#38332E 0%,#151311 40%,#100F0E 100%);padding:2.1em 2.1em 3em;box-shadow:inset 0 0 0 .18em #4A443E,inset 0 .35em .6em rgba(255,255,255,.08),0 0 0 .1em #0A0908;transform-style:preserve-3d}
.x-lap-lid::after{content:"";position:absolute;left:50%;top:.85em;width:.7em;height:.7em;border-radius:50%;background:#1A1714;box-shadow:inset 0 0 .2em #5A3A1A;transform:translateX(-50%)}
.x-lap-lid .brandmark{position:absolute;left:50%;bottom:.95em;transform:translateX(-50%);font:600 1.05em/1 var(--x-display);letter-spacing:.4em;color:#7A7068}
.x-lap-screen{position:relative;width:100%;height:100%;border-radius:.6em;overflow:hidden;background:#FAF8F5;box-shadow:0 0 0 .12em #000,0 0 6em rgba(247,147,30,.35),0 0 14em rgba(247,147,30,.18)}
.x-glare{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 28%,transparent 42%,transparent 70%,rgba(255,255,255,.06) 100%);mix-blend-mode:screen;transform:translateX(var(--gx,0%));transition:transform .4s}
.x-lap-base{position:absolute;left:-7.5em;width:115em;top:calc(100% - .4em);height:60em;transform-origin:50% 0;transform:rotateX(90deg);border-radius:.8em .8em 4em 4em;background:linear-gradient(180deg,#3A3530 0%,#25211D 30%,#1A1715 100%);box-shadow:inset 0 0 0 .2em #57504A,inset 0 -1.2em 2em rgba(0,0,0,.5)}
.x-lap-base::before{content:"";position:absolute;left:9em;right:9em;top:6em;height:30em;border-radius:1em;background:repeating-linear-gradient(90deg,#121110 0 .35em,transparent .35em 6.5em),repeating-linear-gradient(0deg,#121110 0 .35em,transparent .35em 6em),#211E1B;box-shadow:inset 0 0 0 .3em #121110,0 0 3em rgba(247,147,30,.12)}
.x-lap-base::after{content:"";position:absolute;left:50%;top:39em;width:32em;height:17em;transform:translateX(-50%);border-radius:1.4em;background:linear-gradient(180deg,#2C2723,#221F1B);box-shadow:inset 0 0 0 .15em #4A433C}
.x-lap-lip{position:absolute;left:-7.5em;width:115em;top:calc(100% - .4em);height:2.4em;transform-origin:50% 0;transform:rotateX(2deg) translateZ(70em) rotateX(0);display:none}
.x-lap-shadow{position:absolute;left:-6%;right:-6%;top:100%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);filter:blur(2em);transform:translateZ(-1px)}
.x-lap-glow{position:absolute;left:-10%;right:-10%;top:95%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(247,147,30,.35),transparent);filter:blur(3em);animation:xPulse 5s ease-in-out infinite}
@keyframes xPulse{50%{opacity:.6}}
.x-lap-badge{position:absolute;z-index:6;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:14px;background:rgba(22,20,18,.78);border:1px solid var(--x-line2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F4F1EC;font-size:.8rem;box-shadow:0 20px 40px -18px rgba(0,0,0,.8);white-space:nowrap;animation:xFloat 6s ease-in-out infinite}
.x-lap-badge b{display:block;font:600 .84rem/1.2 var(--sans);color:#fff}
.x-lap-badge small{color:var(--x-mute-d);font-size:.72rem}
.x-lap-badge .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(247,147,30,.14);color:var(--x-teal)}
.x-lap-badge.b1{left:-12%;top:30%}
.x-lap-badge.b2{right:-4%;bottom:14%;animation-delay:-3s}
.x-lap-badge.b3{right:-6%;top:-3%;animation-delay:-1.5s}
.js .x-lap-badge{opacity:0;transition:opacity .8s ease}
.js .x-ready .x-lap-badge{opacity:1}
.js .x-ready .x-lap-badge.b1{transition-delay:1.6s}.js .x-ready .x-lap-badge.b2{transition-delay:1.9s}.js .x-ready .x-lap-badge.b3{transition-delay:2.2s}

/* ---------- mock website inside the laptop (all sizes in em = 1% of laptop width) ---------- */
.ms{position:absolute;inset:0;font-family:Inter,system-ui,sans-serif;color:#1A1A1A;background:#FAF8F5;overflow:hidden}
.ms-track{position:absolute;left:0;right:0;top:0;animation:msScroll 16s var(--x-ease) infinite}
@keyframes msScroll{0%,22%{transform:translateY(0)}32%,55%{transform:translateY(-58em)}65%,88%{transform:translateY(-113.5em)}100%{transform:translateY(0)}}
.ms-nav{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:3em;height:6em;padding:0 4em;color:#fff;font-size:1.25em}
.ms-nav b{font:700 1.15em/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;margin-right:auto}
.ms-nav span{opacity:.85;font-size:.85em}
.ms-nav i{font-style:normal;padding:.7em 1.3em;border-radius:3em;background:#F7931E;color:#1A1A1A;font-weight:600;font-size:.85em}
.ms-hero{position:relative;height:58em;padding:13em 4em 0;color:#fff;background:radial-gradient(70% 90% at 75% 40%,rgba(247,147,30,.35),transparent 60%),linear-gradient(120deg,#1A1612 0%,#3A2410 55%,#2A1D12 100%);overflow:hidden}
.ms-hero::after{content:"";position:absolute;right:4em;bottom:0;width:38em;height:40em;border-radius:20em 20em 0 0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02));box-shadow:inset 0 0 0 .3em rgba(255,255,255,.12)}
.ms-hero .ms-house{position:absolute;right:11em;bottom:0;width:24em;height:22em;background:linear-gradient(180deg,#FBF2E6,#F2D9B8);clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%);z-index:1}
.ms-hero .ms-house::after{content:"";position:absolute;left:9em;bottom:0;width:6em;height:9em;background:#3A2410;border-radius:.6em .6em 0 0}
.ms-hero .ms-unit{position:absolute;right:7em;top:12em;width:22em;height:6em;border-radius:1.2em;background:linear-gradient(180deg,#fff,#EFE6DA);box-shadow:0 1em 3em rgba(0,0,0,.25);z-index:2}
.ms-hero .ms-unit::after{content:"";position:absolute;left:2em;right:2em;bottom:1em;height:.5em;border-radius:1em;background:repeating-linear-gradient(90deg,#B8AA98 0 .5em,transparent .5em 1em)}
.ms-hero .ms-air{position:absolute;right:7em;top:19em;width:22em;height:10em;background:linear-gradient(180deg,rgba(255,194,122,.45),transparent);filter:blur(1em);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);z-index:2;animation:msAir 3s ease-in-out infinite}
@keyframes msAir{50%{opacity:.4}}
.ms-kicker{display:inline-block;font-size:1.25em;letter-spacing:.2em;text-transform:uppercase;color:#FFB45C;margin-bottom:1.6em}
.ms-h{font:700 6em/1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em;margin:0 0 .35em;max-width:9.5em;color:#fff}
.ms-p{font-size:1.6em;line-height:1.5;max-width:26em;opacity:.8;margin:0 0 2em}
.ms-btns{display:flex;gap:1.2em}
.ms-btns i{font-style:normal;font-size:1.35em;font-weight:600;padding:1.1em 2em;border-radius:3em;background:#F7931E;color:#1A1A1A}
.ms-btns i+i{background:transparent;color:#fff;box-shadow:inset 0 0 0 .1em rgba(255,255,255,.5)}
.ms-rating{position:absolute;left:4em;bottom:4em;display:flex;align-items:center;gap:1em;font-size:1.25em;color:#F1E4D3}
.ms-rating b{color:#FFD166;letter-spacing:.1em}
.ms-sec{padding:5em 4em}
.ms-label{font-size:1.2em;letter-spacing:.2em;text-transform:uppercase;color:#B5530F;margin:0 0 .8em}
.ms-h2{font:600 3.6em/1.1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.03em;margin:0 0 1em;color:#1A1A1A}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2em}
.ms-card{border-radius:1.6em;background:#fff;box-shadow:0 1em 3em -1em rgba(40,28,15,.18);overflow:hidden}
.ms-img{height:15em;background:linear-gradient(135deg,#7A3E12,#F7931E)}
.ms-card:nth-child(2) .ms-img{background:linear-gradient(135deg,#3A2A20,#C9772C)}
.ms-card:nth-child(3) .ms-img{background:linear-gradient(135deg,#3D3833,#E8C9A0)}
.ms-img{position:relative}
.ms-img::after{content:"";position:absolute;left:30%;top:28%;width:40%;height:44%;border-radius:1em;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 .25em rgba(255,255,255,.3)}
.ms-card b{display:block;font:600 1.7em/1.2 'Cormorant Garamond',Georgia,serif;padding:1.2em 1.2em .3em}
.ms-card span{display:block;font-size:1.25em;color:#6B6B6B;padding:0 1.5em 1.8em}
.ms-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;padding:4em;background:#1A1A1A;color:#fff}
.ms-stats div{border-left:.2em solid #F7931E;padding-left:1.6em}
.ms-stats b{display:block;font:700 4.4em/1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.03em}
.ms-stats span{font-size:1.3em;color:#C9B8A4}
.ms-split{display:grid;grid-template-columns:1.1fr 1fr;gap:3em;align-items:start}
.ms-quote{padding:3em;border-radius:1.8em;background:#fff;box-shadow:0 1em 3em -1em rgba(40,28,15,.15)}
.ms-quote p{font:500 2.1em/1.35 'Cormorant Garamond',Georgia,serif;margin:0 0 1em;color:#1A1A1A}
.ms-quote small{font-size:1.3em;color:#6B6B6B}
.ms-stars{color:#F5B300;font-size:1.6em;letter-spacing:.15em;margin-bottom:.8em}
.ms-form{padding:3em;border-radius:1.8em;background:#1A1A1A;color:#fff}
.ms-form b{display:block;font:600 2.2em/1.2 'Cormorant Garamond',Georgia,serif;margin-bottom:1em}
.ms-form span{display:block;height:4.4em;border-radius:1em;background:rgba(255,255,255,.08);margin-bottom:1.2em;box-shadow:inset 0 0 0 .1em rgba(255,255,255,.12)}
.ms-form i{display:block;text-align:center;font-style:normal;font-weight:600;font-size:1.4em;padding:1.1em;border-radius:3em;background:#F7931E;color:#1A1A1A}
.ms-foot{padding:4em;display:flex;justify-content:space-between;font-size:1.2em;color:#6B6B6B;border-top:.1em solid #E7E2DB}
.ms-tag{position:absolute;right:1.6em;top:7.2em;z-index:4;font:600 1.05em/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:.6em .9em;border-radius:2em;background:rgba(15,14,13,.55);color:#FFE2BF;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- marquee ---------- */
.x-marquee{position:relative;background:var(--x-bg);border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);overflow:hidden;padding:1.25rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.x-marquee ul{display:flex;gap:3rem;width:max-content;margin:0;padding:0;list-style:none;animation:xMarq 38s linear infinite}
.x-marquee li{display:flex;align-items:center;gap:3rem;font:500 1rem/1 var(--x-display);letter-spacing:.04em;color:#B6B0A8;white-space:nowrap}
.x-marquee li::after{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--x-teal);box-shadow:0 0 10px var(--x-teal)}
@keyframes xMarq{to{transform:translateX(-50%)}}
.x-marquee:hover ul{animation-play-state:paused}

/* ---------- service cards ---------- */
.x-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.x-svc{--mx:50%;--my:50%;position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:0 1.3rem;align-items:start;padding:1.6rem 1.6rem 1.5rem;border-radius:var(--x-r);background:#fff;border:1px solid var(--x-line-l);color:var(--x-text);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .5s var(--x-ease),box-shadow .5s var(--x-ease),border-color .3s,background .4s}
.x-svc::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(247,147,30,.16),transparent 45%);opacity:0;transition:opacity .4s}
.x-svc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(247,147,30,.9),rgba(255,194,122,.1) 40%,rgba(247,147,30,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.x-svc:hover,.x-svc:focus-visible{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(60,35,10,.45);border-color:transparent}
.x-svc:hover::before,.x-svc:hover::after,.x-svc:focus-visible::before,.x-svc:focus-visible::after{opacity:1}
.x-svc-num{font:600 .82rem/1 var(--x-display);color:var(--x-teal-ink);letter-spacing:.06em;padding-top:.35rem;min-width:1.8rem}
.x-svc-ic{grid-column:3;grid-row:1/span 2;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#FFF1E0,#FDE2C2);color:var(--x-teal-ink);transition:transform .6s var(--x-ease),background .4s,color .4s,box-shadow .4s}
.x-svc:hover .x-svc-ic{transform:rotate(-8deg) scale(1.08);background:var(--x-grad);color:#1A1A1A;box-shadow:0 10px 24px -10px rgba(247,147,30,.9)}
.x-svc h3{grid-column:2;font:600 1.3rem/1.2 var(--x-display);letter-spacing:-.02em;margin:0;color:var(--x-ink)}
.x-svc-more{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--x-ease)}
.x-svc-more>div{overflow:hidden}
.x-svc-more p{margin:.6rem 0 0;font-size:.95rem;color:var(--x-mute)}
.x-svc-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--x-teal-ink);opacity:0;transform:translateX(-8px);transition:opacity .4s .1s,transform .5s var(--x-ease) .1s}
.x-svc:hover .x-svc-more,.x-svc:focus-visible .x-svc-more{grid-template-rows:1fr}
.x-svc:hover .x-svc-cta,.x-svc:focus-visible .x-svc-cta{opacity:1;transform:none}
.x-svc.x-feature{grid-column:span 2;background:linear-gradient(135deg,#1C1814,#2A1E12);border-color:#3A2A1A;color:var(--x-text-d);padding:2rem}
.x-svc.x-feature h3{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.x-svc.x-feature .x-svc-more{grid-template-rows:1fr}
.x-svc.x-feature .x-svc-more p{color:var(--x-text-d);font-size:1.02rem}
.x-svc.x-feature .x-svc-cta{opacity:1;transform:none;color:var(--x-teal)}
.x-svc.x-feature .x-svc-num{color:var(--x-teal)}
.x-svc.x-feature .x-svc-ic{background:rgba(247,147,30,.12);color:var(--x-teal)}
.x-svc-tag{display:inline-block;margin-left:.6rem;vertical-align:middle;font:600 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:.4rem .55rem;border-radius:20px;background:rgba(247,147,30,.14);color:var(--x-teal)}
@media (hover:none){.x-svc .x-svc-more{grid-template-rows:1fr}.x-svc .x-svc-cta{opacity:1;transform:none}}
@media (max-width:760px){.x-svc-grid{grid-template-columns:1fr}.x-svc.x-feature{grid-column:auto}.x-svc{grid-template-columns:auto 1fr;padding:1.3rem}.x-svc-ic{grid-column:1;grid-row:auto;width:42px;height:42px;margin-bottom:.8rem}.x-svc-num{grid-column:1;grid-row:1;position:absolute;right:1.3rem;top:1.4rem}.x-svc h3,.x-svc-more{grid-column:1/-1}}

/* ---------- split layouts ---------- */
.x-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.x-split.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.x-split.rev>:first-child{order:2}
@media (max-width:980px){.x-split,.x-split.rev{grid-template-columns:1fr}.x-split.rev>:first-child{order:0}}
.x-checks{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem}
.x-checks li{position:relative;padding-left:1.8rem;font-size:.97rem;line-height:1.45}
.x-checks li::before{content:"";position:absolute;left:0;top:.18rem;width:18px;height:18px;border-radius:6px;background:rgba(247,147,30,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%2322D3C5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.x-light .x-checks li::before,.x-white .x-checks li::before{background-color:rgba(242,101,34,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230B766F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.x-checks.one{grid-template-columns:1fr}
@media (max-width:520px){.x-checks{grid-template-columns:1fr}}
.x-outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(3rem,6vw,4.5rem);border-radius:var(--x-r);overflow:hidden;background:var(--x-line);border:1px solid var(--x-line)}
.x-outcomes>div{padding:1.5rem;background:var(--x-bg2)}
.x-outcomes h3{font:600 1.02rem/1.3 var(--x-display);margin:0 0 .4rem;color:#fff}
.x-outcomes p{margin:0;font-size:.9rem;color:var(--x-mute-d)}
.x-outcomes .n{display:block;font:600 .74rem/1 var(--x-display);color:var(--x-teal);margin-bottom:.9rem;letter-spacing:.08em}
@media (max-width:900px){.x-outcomes{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.x-outcomes{grid-template-columns:1fr}}

/* ---------- browser "build" mockup ---------- */
.x-build{position:relative;perspective:1600px}
.x-bw{position:relative;border-radius:16px;background:#171513;border:1px solid var(--x-line2);box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(247,147,30,.45);overflow:hidden;transform:rotateY(-10deg) rotateX(6deg);transform-style:preserve-3d;transition:transform 1.2s var(--x-ease)}
.x-build.in .x-bw{transform:rotateY(-4deg) rotateX(2deg)}
.x-build:hover .x-bw{transform:none}
.x-bw-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;background:#1D1A17;border-bottom:1px solid var(--x-line)}
.x-bw-bar i{width:10px;height:10px;border-radius:50%;background:#3A3530}
.x-bw-bar i:nth-child(1){background:#ff6159}.x-bw-bar i:nth-child(2){background:#ffbd2e}.x-bw-bar i:nth-child(3){background:#28c941}
.x-bw-bar span{flex:1;margin:0 1rem;padding:.35rem .8rem;border-radius:8px;background:#151311;color:#A8A097;font-size:.74rem;text-align:center}
.x-bw-body{position:relative;padding:1rem;background:#FAF8F5;display:grid;gap:.7rem}
.bk{position:relative;border-radius:10px;overflow:hidden;min-height:20px}
.bk .sk,.bk .rl{transition:opacity .7s ease,transform .8s var(--x-ease),filter .8s;transition-delay:var(--d,0s)}
.bk .sk{position:absolute;inset:0;background:linear-gradient(90deg,#ECE6DE 0%,#F5F1EB 40%,#ECE6DE 80%);background-size:200% 100%;animation:xShimmer 1.6s linear infinite}
.bk .rl{opacity:0;transform:translateY(10px);filter:blur(6px)}
.x-build.built .bk .sk{opacity:0}
.x-build.built .bk .rl{opacity:1;transform:none;filter:none}
@keyframes xShimmer{to{background-position:-200% 0}}
.bk-nav .rl{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem;background:#fff;font:600 .72rem/1 'Cormorant Garamond',Georgia,serif;color:#1A1A1A}
.bk-nav .rl em{font-style:normal;margin-left:auto;font:500 .62rem/1 Inter,sans-serif;color:#6B6B6B;display:flex;gap:.8rem}
.bk-nav .rl i{font-style:normal;padding:.35rem .6rem;border-radius:20px;background:#F7931E;color:#1A1A1A;font-size:.6rem}
.bk-hero{min-height:150px}
.bk-hero .rl{height:100%;min-height:150px;padding:1.2rem;color:#fff;background:radial-gradient(60% 90% at 80% 30%,rgba(247,147,30,.45),transparent 60%),linear-gradient(120deg,#1A1612,#4A2E14)}
.bk-hero .rl b{display:block;font:700 1.35rem/1.05 'Cormorant Garamond',Georgia,serif;max-width:13ch;margin-bottom:.5rem;letter-spacing:-.03em}
.bk-hero .rl span{display:block;font-size:.68rem;opacity:.8;max-width:30ch;margin-bottom:.8rem}
.bk-hero .rl i{font-style:normal;display:inline-block;font-size:.62rem;font-weight:600;padding:.45rem .8rem;border-radius:20px;background:#F7931E;color:#1A1A1A}
.bk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.bk-row .bk{min-height:78px}
.bk-row .rl{height:100%;min-height:78px;padding:.6rem;background:#fff;box-shadow:0 6px 18px -10px rgba(40,28,15,.3)}
.bk-row .rl::before{content:"";display:block;height:32px;border-radius:6px;margin-bottom:.45rem;background:linear-gradient(135deg,#7A3E12,#F7931E)}
.bk-row .bk:nth-child(2) .rl::before{background:linear-gradient(135deg,#3A2A20,#C9772C)}
.bk-row .bk:nth-child(3) .rl::before{background:linear-gradient(135deg,#3D3833,#E8C9A0)}
.bk-row .rl b{font:600 .62rem/1.2 'Cormorant Garamond',Georgia,serif;color:#1A1A1A}
.bk-cta{min-height:44px}
.bk-cta .rl{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;background:#1A1A1A;color:#fff;font:600 .7rem/1 'Cormorant Garamond',Georgia,serif}
.bk-cta .rl i{font-style:normal;padding:.4rem .7rem;border-radius:20px;background:#F7931E;color:#1A1A1A;font-size:.6rem}
.x-cursor{position:absolute;z-index:4;left:20%;top:30%;width:18px;height:18px;opacity:0;transition:opacity .4s}
.x-build.built .x-cursor{opacity:1;animation:xCursor 6s var(--x-ease) 1.2s infinite}
@keyframes xCursor{0%{transform:translate(0,0)}25%{transform:translate(160px,60px)}45%{transform:translate(160px,60px) scale(.85)}50%{transform:translate(160px,60px)}75%{transform:translate(40px,190px)}100%{transform:translate(0,0)}}
.x-float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;border-radius:14px;background:rgba(26,24,22,.86);border:1px solid var(--x-line2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F4F1EC;font-size:.82rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.85);white-space:nowrap}
.x-float-card svg{color:var(--x-teal)}
.x-float-card.f1{left:-5%;top:22%;animation:xFloat 6s ease-in-out infinite}
.x-float-card.f2{right:-4%;top:46%;animation:xFloat 7s ease-in-out -2s infinite}
.x-float-card.f3{left:8%;bottom:-5%;animation:xFloat 6.5s ease-in-out -4s infinite}
.x-phone{position:absolute;right:-3%;bottom:-8%;z-index:3;width:28%;max-width:150px;aspect-ratio:9/18.5;border-radius:22px;background:#171513;border:5px solid #2A2622;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 40px -10px rgba(247,147,30,.4);overflow:hidden;animation:xFloat 7s ease-in-out -1s infinite}
.x-phone .rl{position:absolute;inset:0;background:radial-gradient(80% 50% at 70% 25%,rgba(247,147,30,.45),transparent 60%),linear-gradient(180deg,#1A1612,#4A2E14 55%,#FAF8F5 55%);padding:22% 10% 0;color:#fff}
.x-phone b{display:block;font:700 .78rem/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em;margin-bottom:.4rem}
.x-phone i{display:inline-block;font-style:normal;font-size:.5rem;font-weight:600;padding:.3rem .5rem;border-radius:20px;background:#F7931E;color:#1A1A1A}
.x-phone span{position:absolute;left:10%;right:10%;height:14%;border-radius:8px;background:#fff;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.x-phone span.s1{top:60%}.x-phone span.s2{top:77%}
@media (max-width:620px){.x-float-card.f1{left:0;top:-6%}.x-float-card.f2{right:0;top:auto;bottom:22%}.x-float-card.f3{display:none}.x-phone{right:-1%;width:30%}}

/* ---------- VA task board ---------- */
.x-va-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:0 0 2.2rem;padding:0;list-style:none}
.x-va-grid li{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border-radius:14px;background:#fff;border:1px solid var(--x-line-l);font-size:.93rem;font-weight:500;color:var(--x-ink);transition:transform .4s var(--x-ease),border-color .3s,box-shadow .4s}
.x-va-grid li:hover{transform:translateY(-3px);border-color:rgba(242,101,34,.45);box-shadow:0 14px 30px -18px rgba(60,35,10,.5)}
.x-va-grid svg{flex:none;color:var(--x-teal-ink)}
@media (max-width:1100px){.x-va-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.x-va-grid{grid-template-columns:1fr}}
.x-board{position:relative;border-radius:22px;background:#fff;border:1px solid var(--x-line-l);box-shadow:0 50px 90px -50px rgba(60,35,10,.55);padding:1.4rem;overflow:hidden}
.x-board-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.x-board-head b{font:600 1.05rem/1.2 var(--x-display);color:var(--x-ink)}
.x-board-head small{display:block;color:var(--x-mute);font-size:.8rem}
.x-avatar{width:42px;height:42px;border-radius:50%;background:var(--x-grad);display:grid;place-items:center;color:#1A1A1A;font:700 .9rem/1 var(--x-display);box-shadow:0 0 0 4px #FFF1E0}
.x-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.x-kpis div{padding:.8rem;border-radius:12px;background:var(--x-light)}
.x-kpis b{display:block;font:700 1.4rem/1 var(--x-display);color:var(--x-ink);letter-spacing:-.02em}
.x-kpis span{font-size:.72rem;color:var(--x-mute)}
.x-tasks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.x-tasks li{display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:12px;border:1px solid var(--x-line-l);font-size:.9rem;color:var(--x-text);transition:background .5s,border-color .5s}
.x-tasks li small{margin-left:auto;font-size:.72rem;color:var(--x-mute);white-space:nowrap}
.x-tick{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #CFC6BA;display:grid;place-items:center;transition:background .4s,border-color .4s}
.x-tick svg{opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--x-ease);color:#1A1A1A}
.x-board.in .x-tasks li{animation:xTaskBg .6s ease forwards;animation-delay:calc(var(--i)*.55s + .6s)}
.x-board.in .x-tick{animation:xTick .5s ease forwards;animation-delay:calc(var(--i)*.55s + .6s)}
.x-board.in .x-tick svg{animation:xTickSvg .5s var(--x-ease) forwards;animation-delay:calc(var(--i)*.55s + .7s)}
@keyframes xTaskBg{to{background:#FFF6EC;border-color:#F6D9B6}}
@keyframes xTick{to{background:#F7931E;border-color:#F7931E}}
@keyframes xTickSvg{to{opacity:1;transform:none}}
.x-board .x-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--x-teal-ink);font-weight:600}
.x-board .x-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#F7931E;box-shadow:0 0 0 0 rgba(247,147,30,.6);animation:xPing 1.8s infinite}
@keyframes xPing{70%{box-shadow:0 0 0 8px rgba(247,147,30,0)}100%{box-shadow:0 0 0 0 rgba(247,147,30,0)}}
.x-example{position:absolute;right:1rem;bottom:.8rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#A39D95}
.x-dark .x-example,.x-dark2 .x-example{color:#7A7068}

/* ---------- marketing dashboard ---------- */
.x-dash{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:.9rem;padding:1rem;border-radius:22px;background:linear-gradient(180deg,rgba(30,27,24,.9),rgba(22,20,18,.95));border:1px solid var(--x-line2);box-shadow:0 60px 110px -50px rgba(0,0,0,.95),0 0 90px -40px rgba(247,147,30,.5)}
.x-panel{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--x-line);padding:1rem}
.x-panel h3{font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--x-mute-d);margin:0 0 .9rem;display:flex;justify-content:space-between}
.x-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.x-cal span{aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.04);position:relative}
.x-cal span.p{background:rgba(247,147,30,.18);box-shadow:inset 0 0 0 1px rgba(247,147,30,.35)}
.x-cal span.p2{background:rgba(255,194,122,.14);box-shadow:inset 0 0 0 1px rgba(255,194,122,.3)}
.x-cal span.p3{background:rgba(255,209,102,.14);box-shadow:inset 0 0 0 1px rgba(255,209,102,.3)}
.js .x-dash .x-cal span{opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--x-ease);transition-delay:calc(var(--i)*25ms + .2s)}
.x-dash.in .x-cal span{opacity:1;transform:none}
.x-post{grid-row:span 2;display:flex;flex-direction:column}
.x-post-img{flex:1;min-height:140px;border-radius:10px;background:radial-gradient(60% 60% at 70% 30%,rgba(247,147,30,.55),transparent 60%),linear-gradient(135deg,#2A1D12,#5A3615);position:relative;overflow:hidden}
.x-post-img::after{content:"New website, now live";position:absolute;left:.8rem;bottom:.8rem;font:700 1rem/1.1 var(--x-display);color:#fff;max-width:10ch}
.x-post-meta{display:flex;gap:1rem;margin-top:.7rem;font-size:.78rem;color:var(--x-mute-d)}
.x-post-meta b{color:#fff}
.x-bars{display:flex;align-items:flex-end;gap:.45rem;height:110px}
.x-bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#FFB347,rgba(242,101,34,.25));transform-origin:bottom;transform:scaleY(.05);transition:transform 1.2s var(--x-ease);transition-delay:calc(var(--i)*.08s + .3s)}
.x-dash.in .x-bars i{transform:scaleY(var(--h))}
.x-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.x-chips span{font-size:.72rem;padding:.35rem .6rem;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--x-line);color:#D9D2C8}
@media (max-width:620px){.x-dash{grid-template-columns:1fr}.x-post{grid-row:auto}}

/* ---------- how it works ---------- */
.x-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin:0;padding:0;list-style:none;counter-reset:s}
.x-steps::before{content:"";position:absolute;left:28px;right:12%;top:28px;height:2px;background:var(--x-line-l)}
.x-steps::after{content:"";position:absolute;left:28px;right:12%;top:28px;height:2px;background:linear-gradient(90deg,#F7931E,#FFC27A);box-shadow:0 0 12px rgba(247,147,30,.7);transform-origin:left;transform:scaleX(0);transition:transform 2.2s var(--x-ease) .3s}
.x-steps.in::after{transform:scaleX(1)}
.x-steps li{position:relative;padding-top:5rem}
.x-steps .n{position:absolute;top:0;left:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--x-line-l);font:600 .95rem/1 var(--x-display);color:var(--x-ink);box-shadow:0 10px 30px -14px rgba(60,35,10,.4);transition:background .5s,color .5s,box-shadow .5s;transition-delay:calc(var(--i)*.5s + .3s);z-index:1}
.x-steps.in .n{background:var(--x-grad);color:#1A1A1A;border-color:transparent;box-shadow:0 0 0 6px rgba(247,147,30,.14),0 12px 30px -10px rgba(247,147,30,.7)}
.x-steps h3{font:600 1.2rem/1.25 var(--x-display);margin:0 0 .5rem;color:var(--x-ink)}
.x-steps p{margin:0;color:var(--x-mute);font-size:.95rem}
@media (max-width:900px){.x-steps{grid-template-columns:1fr;gap:2rem}.x-steps::before,.x-steps::after{left:28px;right:auto;top:28px;bottom:28px;width:2px;height:auto}.x-steps::after{transform:scaleY(0);transform-origin:top}.x-steps.in::after{transform:scaleY(1)}.x-steps li{padding:0 0 0 5rem;min-height:58px}}

/* ---------- ecosystem ---------- */
.x-eco{position:relative;width:min(620px,100%);aspect-ratio:1;margin-inline:auto}
.x-eco svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.x-eco .ring{fill:none;stroke:rgba(244,225,200,.12);stroke-dasharray:2 8}
.x-eco .ln{stroke:rgba(247,147,30,.35);stroke-width:1.2;fill:none}
.x-eco .flow{stroke:#FFB45C;stroke-width:2;fill:none;stroke-dasharray:8 120;stroke-linecap:round;animation:xFlow 3.2s linear infinite;filter:drop-shadow(0 0 4px #F7931E)}
@keyframes xFlow{to{stroke-dashoffset:-128}}
.x-eco-core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#3a2410,#141210 70%);border:1px solid rgba(247,147,30,.5);box-shadow:0 0 0 10px rgba(247,147,30,.05),0 0 0 22px rgba(247,147,30,.03),0 0 80px -10px rgba(247,147,30,.7)}
.x-eco-core::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(247,147,30,.25);animation:xRipple 3.5s ease-out infinite}
@keyframes xRipple{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.x-eco-core span{display:block;font:700 clamp(.7rem,1.8vw,.95rem)/1.2 var(--x-display);letter-spacing:.2em;color:#fff;margin-top:.3rem}
.x-eco-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.45rem;width:30%;text-align:center;color:#F4F1EC;text-decoration:none}
.x-eco-node .dot{width:clamp(48px,11vw,68px);aspect-ratio:1;border-radius:20px;display:grid;place-items:center;background:rgba(28,25,22,.92);border:1px solid var(--x-line2);color:var(--x-teal);box-shadow:0 20px 40px -20px rgba(0,0,0,.9);transition:transform .5s var(--x-ease),box-shadow .4s,border-color .4s;animation:xFloat 6s ease-in-out infinite;animation-delay:var(--dl)}
.x-eco-node b{font:600 clamp(.72rem,1.7vw,.92rem)/1.2 var(--x-display)}
.x-eco-node:hover .dot{border-color:var(--x-teal);box-shadow:var(--x-glow);transform:scale(1.08)}
.x-plus{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .7rem;margin:2.5rem auto 0;font:600 clamp(.95rem,2vw,1.15rem)/1.4 var(--x-display);color:#fff}
.x-plus i{font-style:normal;color:var(--x-teal)}

/* ---------- local pros strip ---------- */
.x-local{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem;align-items:center;padding:clamp(1.6rem,4vw,2.8rem);border-radius:26px;background:#fff;border:1px solid var(--x-line-l);box-shadow:0 40px 80px -60px rgba(60,35,10,.6)}
.x-local .quick{margin:0}
@media (max-width:900px){.x-local{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.x-faq{display:grid;gap:.7rem}
.x-faq details{border-radius:16px;background:#fff;border:1px solid var(--x-line-l);transition:border-color .3s,box-shadow .3s}
.x-faq details[open]{border-color:rgba(242,101,34,.45);box-shadow:0 20px 40px -30px rgba(60,35,10,.5)}
.x-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.3rem;font:600 1.04rem/1.35 var(--x-display);color:var(--x-ink)}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:rgba(242,101,34,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%230B766F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .4s var(--x-ease)}
.x-faq details[open] summary::after{transform:rotate(45deg)}
.x-faq .a{padding:0 1.3rem 1.2rem;color:var(--x-text);font-size:.98rem;line-height:1.65}
.x-faq .a p{margin:0}
.x-dark .x-faq details,.x-dark2 .x-faq details{background:rgba(255,255,255,.03);border-color:var(--x-line)}
.x-dark .x-faq summary,.x-dark2 .x-faq summary{color:#fff}
.x-dark .x-faq .a,.x-dark2 .x-faq .a{color:var(--x-text-d)}

/* ---------- cards / posts ---------- */
.x-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:980px){.x-cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.x-cards{grid-template-columns:1fr}}
.x-card{position:relative;display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--x-r);background:#fff;border:1px solid var(--x-line-l);color:var(--x-text);transition:transform .5s var(--x-ease),box-shadow .5s var(--x-ease),border-color .3s}
a.x-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(60,35,10,.5);border-color:rgba(242,101,34,.4)}
.x-card h3{font:600 1.15rem/1.3 var(--x-display);margin:0 0 .5rem;color:var(--x-ink)}
.x-card p{font-size:.95rem;color:var(--x-mute);margin:0 0 1rem}
.x-card .x-link{margin-top:auto}
.x-card .ic{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(242,101,34,.1);color:var(--x-teal-ink);margin-bottom:1rem}
.x-dark .x-card,.x-dark2 .x-card{background:rgba(255,255,255,.03);border-color:var(--x-line);color:var(--x-text-d)}
.x-dark .x-card h3,.x-dark2 .x-card h3{color:#fff}
.x-dark .x-card p,.x-dark2 .x-card p{color:var(--x-mute-d)}
.x-dark .x-card .ic,.x-dark2 .x-card .ic{background:rgba(247,147,30,.1);color:var(--x-teal)}
.x-post-card .cover{height:150px;margin:-1.5rem -1.5rem 1.2rem;border-radius:var(--x-r) var(--x-r) 0 0;background:radial-gradient(70% 90% at 80% 20%,rgba(247,147,30,.45),transparent 60%),linear-gradient(135deg,#1B1612,#3A2410);position:relative;overflow:hidden}
.x-post-card .cover::after{content:attr(data-cat);position:absolute;left:1rem;bottom:1rem;font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#FFE2BF;padding:.4rem .6rem;border-radius:20px;background:rgba(15,14,13,.5)}
.x-post-card .cover svg{position:absolute;right:-10px;top:-10px;width:140px;height:140px;color:rgba(255,180,92,.22)}
.x-meta{font-size:.8rem;color:var(--x-mute);margin-bottom:.6rem}

/* ---------- page hero (inner pages) ---------- */
.x-phero{position:relative;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,7vw,5rem);background:var(--x-bg);overflow:hidden;isolation:isolate}
.x-phero::before{content:"";position:absolute;right:-15%;top:-40%;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(247,147,30,.24),transparent 70%)}
.x-phero::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-10%;height:60%;z-index:-1;background-image:linear-gradient(rgba(255,180,92,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,180,92,.12) 1px,transparent 1px);background-size:56px 56px;transform:perspective(600px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000,transparent 80%);mask-image:linear-gradient(to top,#000,transparent 80%)}
.x-phero .x-h1{font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.02;max-width:18ch}
.x-phero .x-lede{max-width:46rem}
.x-crumbs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem;padding:0;list-style:none;font-size:.82rem;color:var(--x-mute-d)}
.x-crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.x-crumbs a{color:var(--x-mute-d)}
.x-crumbs a:hover{color:var(--x-teal)}
.x-crumbs [aria-current]{color:#E6DFD5}
.x-phero-num{position:absolute;right:max(16px,calc((100vw - 1200px)/2));bottom:-.15em;font:700 clamp(8rem,22vw,18rem)/1 var(--x-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,180,92,.18);z-index:-1;pointer-events:none}

/* ---------- prose (articles, about) ---------- */
.x-prose{font-size:1.06rem;line-height:1.75;color:var(--x-text)}
.x-prose h2{font:600 clamp(1.5rem,3vw,2rem)/1.2 var(--x-display);letter-spacing:-.025em;margin:2.6rem 0 .9rem;color:var(--x-ink)}
.x-prose h3{font:600 1.2rem/1.3 var(--x-display);margin:2rem 0 .6rem;color:var(--x-ink)}
.x-prose p,.x-prose ul,.x-prose ol{margin:0 0 1.2rem;max-width:70ch}
.x-prose li{margin-bottom:.45rem}
.x-prose a{color:var(--x-teal-ink);text-decoration:underline;text-underline-offset:3px}
.x-prose strong{color:var(--x-ink)}
.x-prose blockquote{margin:1.6rem 0;padding:1rem 1.3rem;border-left:3px solid var(--x-teal);background:#fff;border-radius:0 12px 12px 0}
.x-prose table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.95rem}
.x-prose th,.x-prose td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--x-line-l)}
.x-prose th{font-family:var(--x-display);color:var(--x-ink)}
.x-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start}
.x-aside{position:sticky;top:96px;display:grid;gap:1rem}
.x-aside .x-card{padding:1.3rem}
@media (max-width:980px){.x-article-grid{grid-template-columns:1fr}.x-aside{position:static}}
.x-facts{display:grid;grid-template-columns:220px 1fr;gap:0;border-radius:var(--x-r);overflow:hidden;border:1px solid var(--x-line-l);background:#fff;margin:0}
.x-facts dt,.x-facts dd{margin:0;padding:1rem 1.2rem;border-bottom:1px solid var(--x-line-l)}
.x-facts dt{font:600 .9rem/1.4 var(--x-display);color:var(--x-ink);background:#FAF8F5}
.x-facts dd{color:var(--x-text)}
.x-facts dt:last-of-type,.x-facts dd:last-of-type{border-bottom:0}
@media (max-width:620px){.x-facts{grid-template-columns:1fr}.x-facts dt{border-bottom:0;padding-bottom:.2rem;background:#fff}}

/* ---------- final CTA ---------- */
.x-cta{position:relative;text-align:center;padding:clamp(5rem,12vw,9rem) 0;background:var(--x-bg);overflow:hidden;isolation:isolate}
.x-cta::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,140vw);aspect-ratio:2/1;transform:translate(-50%,-30%);border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(247,147,30,.35),rgba(242,101,34,.08) 55%,transparent 75%)}
.x-cta::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-10%;height:55%;z-index:-1;background-image:linear-gradient(rgba(255,180,92,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,180,92,.14) 1px,transparent 1px);background-size:60px 60px;transform:perspective(600px) rotateX(66deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%)}
.x-cta .x-h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:16ch;margin-inline:auto}
.x-cta .x-lede{margin-inline:auto;max-width:44rem}
.x-cta .x-btns{justify-content:center}

/* ---------- forms on redesigned pages (legacy .form-card styles do the fields) ---------- */
.x-form-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:980px){.x-form-wrap{grid-template-columns:1fr}}
.x-own .form-card{background:#fff;border:1px solid var(--x-line-l);border-radius:22px;box-shadow:0 40px 80px -60px rgba(60,35,10,.7);color:var(--x-text)}
.x-own .form-card label{color:var(--x-ink)}
.x-own .form-card input,.x-own .form-card select,.x-own .form-card textarea{background:#fff;color:var(--x-ink);border-color:#DDD5CA}
.x-own .form-card .success h2{color:var(--x-ink)}
.x-own .quick{background:var(--x-light);border-color:var(--x-line-l)}
.x-own .quick select,.x-own .quick input{background:#fff;color:var(--x-ink)}
.x-own .quick small{color:var(--x-mute)}
.x-note{display:flex;gap:.7rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:14px;background:rgba(242,101,34,.08);color:var(--x-text);font-size:.92rem}
.x-note svg{flex:none;color:var(--x-teal-ink);margin-top:.1rem}

/* ---------- utilities ---------- */
.x-center{text-align:center}
.x-mt{margin-top:2rem}
.x-pills{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.x-pills a,.x-pills span{display:inline-flex;padding:.5rem .85rem;border-radius:30px;border:1px solid var(--x-line-l);background:#fff;font-size:.88rem;color:var(--x-ink);transition:border-color .2s,color .2s}
.x-pills a:hover{border-color:var(--x-teal-ink);color:var(--x-teal-ink)}
.x-dark .x-pills a,.x-dark2 .x-pills a{background:rgba(255,255,255,.03);border-color:var(--x-line2);color:#E6DFD5}
.x-dark .x-pills a:hover,.x-dark2 .x-pills a:hover{border-color:var(--x-teal);color:var(--x-teal)}

/* ---------- responsive hero ---------- */
@media (max-width:1100px){
  .x-hero{min-height:auto;padding-top:2.5rem}
  .x-hero-grid{grid-template-columns:1fr;text-align:left}
  .x-lap-scene{--lw:min(600px,74vw);margin:1rem auto 0;height:calc(var(--lw) * 1.02)}
  .x-lap{--ry:-16deg;--rx:-28deg}
  .x-scroll-cue{display:none}
}
@media (max-width:620px){
  .x-hero{padding-top:2rem;padding-bottom:2.5rem}
  .x-hero .x-h1{font-size:clamp(2.7rem,13.5vw,3.6rem)}
  .x-hero .x-btns .x-btn{flex:1 1 100%}
  .x-lap-scene{--lw:86vw;height:calc(var(--lw) * 1.02);margin-top:.5rem}
  .x-lap{--ry:-12deg;--rx:-26deg;--rz:1deg}
  .x-lap-badge{font-size:.7rem;padding:.45rem .6rem;border-radius:11px}
  .x-lap-badge .ic{width:24px;height:24px}
  .x-lap-badge b{font-size:.72rem}
  .x-lap-badge.b1{left:0;top:-4%}
  .x-lap-badge.b3{display:none}
  .x-lap-badge.b2{right:2%;bottom:2%}
  .x-hero-meta{margin-top:1.6rem;font-size:.8rem}
  .x-btns .x-btn{flex:1 1 auto}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .x-own *,.x-own *::before,.x-own *::after{animation:none!important;transition:none!important}
  .js [data-rv]{opacity:1;transform:none}
  .x-words .w>span{transform:none}
  .js .x-lap-intro,.js .x-lap-badge{opacity:1;transform:none}
  .bk .rl{opacity:1;transform:none;filter:none}.bk .sk{opacity:0}
  .x-bars i{transform:scaleY(var(--h))}
  .js .x-dash .x-cal span{opacity:1;transform:none}
  .x-steps::after{transform:none}
  .x-marquee ul{flex-wrap:wrap;width:auto;justify-content:center}
}
.x-hero .x-lede{max-width:31rem}

.x-sub.x-sub-sm{width:290px;display:grid;gap:.1rem;padding:.6rem}
.x-foot-grid{grid-template-columns:1.6fr repeat(3,1fr)}
@media (max-width:960px){.x-foot-grid{grid-template-columns:1fr 1fr}}
.ms-pill{position:absolute;z-index:3;display:grid;grid-template-columns:1fr auto;column-gap:1.4em;padding:1.4em 1.8em;border-radius:1.4em;background:rgba(255,255,255,.96);color:#1A1A1A;box-shadow:0 1.6em 3.4em -1em rgba(0,0,0,.45);animation:xFloat 5s ease-in-out infinite}
.ms-pill b{font:600 1.5em/1.2 'Cormorant Garamond',Georgia,serif}
.ms-pill span{grid-column:1;font-size:1.2em;color:#6B6B6B}
.ms-pill em{grid-row:1/span 2;grid-column:2;align-self:center;font-style:normal;font-weight:600;font-size:1.15em;padding:.5em .9em;border-radius:2em;background:#FDEBD3;color:#B5530F}
.ms-pill.p1{right:30em;top:18em}
.ms-pill.p2{right:4em;top:34em;animation-delay:-2.5s}

/* ---------- homepage (original content, new presentation) ---------- */
.x-hero .x-h1-hero{font-size:clamp(2.8rem,5.8vw,5.2rem);line-height:1.02;letter-spacing:-.005em;max-width:14ch}
.x-quick{margin-top:2rem;max-width:36rem;background:rgba(26,24,22,.7)!important;border:1px solid var(--x-line2)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.x-quick small{color:var(--x-mute-d)!important}
.x-quick select,.x-quick input{background:rgba(255,255,255,.05)!important;color:#F4F1EC!important;border-color:var(--x-line2)!important}
.x-quick select option{color:#1A1A1A}
.x-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;perspective:1200px}
.x-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;padding:1.2rem;min-height:132px;border-radius:18px;background:#fff;border:1px solid var(--x-line-l);color:var(--x-ink);font:600 1rem/1.25 var(--x-display);transform-style:preserve-3d;transition:transform .5s var(--x-ease),box-shadow .5s var(--x-ease),border-color .3s}
.x-tile:hover{border-color:rgba(242,101,34,.5);box-shadow:0 30px 50px -30px rgba(60,35,10,.55)}
.x-tile-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#FFF1E0,#FDE2C2);color:var(--x-teal-ink);transition:transform .5s var(--x-ease),background .4s,color .4s;transform:translateZ(20px)}
.x-tile-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.x-tile:hover .x-tile-ic{background:var(--x-grad);color:#1A1A1A;transform:translateZ(30px) rotate(-8deg)}
@media (max-width:1100px){.x-tiles{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.x-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.x-tiles{grid-template-columns:repeat(2,1fr)}.x-tile{min-height:112px;padding:1rem}}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.x-price-wrap{perspective:1400px}
.x-price{position:relative;padding:clamp(1.6rem,4vw,2.6rem);border-radius:26px;background:linear-gradient(150deg,rgba(247,147,30,.14),rgba(255,255,255,.02) 40%),rgba(26,24,22,.8);border:1px solid var(--x-line2);box-shadow:0 60px 100px -50px rgba(0,0,0,.95),0 0 80px -30px rgba(247,147,30,.55);transform:rotateY(-10deg) rotateX(6deg);transition:transform .6s var(--x-ease)}
.x-price::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 35%);pointer-events:none}
.x-price-big{font:700 clamp(4rem,10vw,6.5rem)/1 var(--x-display);letter-spacing:-.05em;color:#fff;text-shadow:0 0 40px rgba(247,147,30,.55)}
.x-price-big small{display:block;margin-top:.6rem;font:500 1rem/1.3 var(--sans);letter-spacing:0;color:var(--x-text-d);text-shadow:none}
.x-price-cmp{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.6rem}
.x-price-cmp div{padding:1rem;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--x-line)}
.x-price-cmp b{display:block;font:700 1.6rem/1 var(--x-display);color:var(--x-teal)}
.x-price-cmp span{font-size:.85rem;color:var(--x-mute-d)}
.x-cards-4{grid-template-columns:repeat(3,1fr);perspective:1200px}
@media (max-width:980px){.x-cards-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.x-cards-4{grid-template-columns:1fr}}
.x-card-hot{background:linear-gradient(140deg,#1C1814,#2E2115)!important;border-color:#4A3220!important;color:var(--x-text-d)!important}
.x-card-hot h3{color:#fff!important}.x-card-hot p{color:var(--x-text-d)!important}
.x-card-hot .ic{background:rgba(247,147,30,.14)!important;color:var(--x-teal)!important}
.x-banner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:clamp(1.6rem,4vw,2.8rem);border-radius:26px;background:#fff;border:1px solid var(--x-line-l);box-shadow:0 40px 80px -60px rgba(60,35,10,.6);position:relative;overflow:hidden}
.x-banner::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(247,147,30,.22),transparent)}
[data-tilt].in{transition:transform .3s ease-out,opacity .9s var(--x-ease),box-shadow .5s,border-color .3s;transition-delay:0s}

/* serif (brand) headings need a little more size */
.x-card h3{font-size:1.38rem;font-weight:700}
.x-steps h3{font-size:1.5rem;font-weight:700}
.x-faq summary{font-size:1.22rem;font-weight:700}
.x-tile{font-size:1.2rem;font-weight:700}
.x-outcomes h3{font-size:1.25rem;font-weight:700}
.x-board-head b{font-size:1.2rem}
.x-va-grid li{font-size:.95rem}