/* ALI Studio — art direction + motion layer (loaded after styles.css).
   Palette: travertine ivory, Ishtar lapis, brass. Motion is CSS-driven; motion.js only toggles classes. */
:root{--paper:#f3eee4;--paper-deep:#e8e0d1;--ink:#121318;--muted:#575a64;--cobalt:#1e44d6;--cobalt-hi:#2f58f0;--night:#0b1030;--brass:#b8873a;--brass-hi:#e6c27f;--line:#d6cdbd;--radius:14px;--ease:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.22,.8,.24,1)}
body{background:radial-gradient(1100px 700px at 12% -8%,#fffaf0 0%,transparent 62%),radial-gradient(900px 640px at 105% 6%,rgba(30,68,214,.08),transparent 60%),var(--paper)}
body::after{content:'';position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;background-image:url('./assets/grain.svg')}
::selection{background:var(--cobalt);color:#fff}
.progress{display:none}

/* Header: sticky, turns into a floating glass bar after the first scroll. */
.header{position:sticky;top:0;z-index:40;border-bottom-color:transparent}
.header::before{content:'';position:absolute;inset:10px -18px;z-index:-1;border-radius:22px;background:rgba(246,242,234,.74);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(18,19,24,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 44px -24px rgba(18,19,24,.35);opacity:0;transform:translateY(-10px) scale(.985);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.header.is-scrolled::before{opacity:1;transform:none}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;inset-inline:0;bottom:6px;height:2px;border-radius:2px;background:var(--cobalt);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.desktop-nav a:hover::after{transform:scaleX(1)}
.wordmark .brand-square{transition:transform .8s var(--ease),background .4s}
.wordmark:hover .brand-square{transform:rotate(135deg);background:var(--brass)}

/* Buttons: pill, magnetic, light follows the pointer, a glint sweeps across on hover. */
.button{border-radius:999px;position:relative;overflow:hidden;isolation:isolate;transform:translate3d(var(--bx,0px),var(--by,0px),0);transition:transform .7s var(--ease),background-color .35s,border-color .35s,color .35s,box-shadow .5s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 30px -14px rgba(30,68,214,.7)}
.button::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(140px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),transparent 62%);opacity:0;transition:opacity .4s}
.button::after{content:'';position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(115%);transition:transform 1s var(--ease)}
.button:hover{background:var(--cobalt-hi);border-color:var(--cobalt-hi);transform:translate3d(var(--bx,0px),calc(var(--by,0px) - 2px),0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 22px 40px -16px rgba(30,68,214,.75)}
.button:hover::before{opacity:1}.button:hover::after{transform:translateX(-115%)}
.button:active{transform:translate3d(var(--bx,0px),var(--by,0px),0) scale(.965);transition-duration:.15s}
.button>span[aria-hidden]{display:inline-block;transition:transform .7s var(--ease)}
.button:hover>span[aria-hidden]{transform:translateX(-6px)}
.button-outline{box-shadow:none;color:var(--ink);background:rgba(255,255,255,.4)}
.button-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:0 18px 36px -18px rgba(18,19,24,.6)}
.text-button{text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:color .35s,text-underline-offset .5s var(--ease),text-decoration-color .35s}
.text-button:hover:not(:disabled){color:var(--cobalt);text-underline-offset:10px;text-decoration-color:currentColor}

/* Hero */
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;min-height:min(900px,calc(100svh - 98px))}.hero h1{font-size:clamp(60px,6vw,98px);line-height:1.1}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 16px;border:1px solid rgba(18,19,24,.1);border-radius:999px;background:rgba(255,255,255,.5);font-size:15px}
.hero .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 4px rgba(30,68,214,.15)}
.hero .accent .wi,.hero .accent:not(:has(.wi)){background:linear-gradient(100deg,var(--cobalt) 20%,#6c8bff 42%,var(--cobalt) 64%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s ease-in-out infinite}
#hero-scene{height:clamp(440px,66vh,700px)}
#hero-scene canvas{animation:fade .9s var(--ease) both;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 52%,#000 52%,transparent 98%);mask-image:radial-gradient(ellipse 70% 70% at 50% 52%,#000 52%,transparent 98%)}
.scene-ready .scene-poster{display:flex;opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
.scene-poster img{border-radius:28px}
.hero-art:before{border:0;inset:2% -4% 12%;border-radius:50%;transform:none;background:radial-gradient(closest-side,rgba(255,206,140,.5),rgba(255,206,140,0))}
.hero-art:after{display:none}
.art-controls{color:var(--muted)}
.art-controls p{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.art-controls p::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brass);animation:pulse 2.4s ease-in-out infinite}
.intro-line{position:relative}

/* Iraqi-dialect marquee */
.marquee{overflow:clip;padding-block:clamp(14px,2.6vw,30px);border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 42s linear infinite}
.marquee-track>span{font-size:clamp(38px,6vw,96px);font-weight:700;line-height:1.3;padding-inline:.42em;white-space:nowrap}
.marquee-track>span:nth-of-type(3n+2){color:var(--cobalt)}
.marquee-track>span:nth-of-type(3n){color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.marquee-track>i{flex:none;width:.42em;height:.42em;font-size:clamp(38px,6vw,96px);background:var(--brass);transform:rotate(45deg) scale(.4)}
.marquee:hover .marquee-track,.marquee.is-off .marquee-track{animation-play-state:paused}

/* Playground: a floating device that tilts up into place, Apple-style segmented tabs. */
.demo-tabs{display:inline-flex;gap:2px;padding:6px;margin-bottom:22px;border-radius:999px;background:rgba(18,19,24,.055);box-shadow:inset 0 1px 2px rgba(18,19,24,.06)}
.demo-tabs button{border-radius:999px;transition:color .45s var(--ease),background-color .3s}
.demo-tabs.has-ink{position:relative;isolation:isolate}
.tab-ink{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;background:var(--ink);box-shadow:0 10px 24px -10px rgba(18,19,24,.55);transition:transform .65s var(--ease),width .65s var(--ease),height .65s var(--ease)}
.demo-tabs.has-ink button[aria-selected=true]{background:transparent}
.demo-tabs button:hover:not([aria-selected=true]){background:rgba(255,255,255,.6)}
.playground{overflow-x:clip;overflow-clip-margin:12px}
.demo-shell{border-radius:26px;border-color:rgba(18,19,24,.1);background:#fbfaf6;box-shadow:inset 0 1px 0 #fff,0 60px 120px -50px rgba(18,19,24,.42),0 20px 40px -30px rgba(30,68,214,.25)}
.demo-topbar{background:linear-gradient(#f2efe7,#ece8de)}
.window-lines{color:var(--cobalt);letter-spacing:5px}
.demo-panel:not([hidden]){animation:panelIn .75s var(--ease) both}
.product-card{transition:transform .7s var(--ease)}
.product-card.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.product-art{border-radius:18px;transition:box-shadow .6s var(--ease)}
.product-art::after{content:'';position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.6),transparent 60%);opacity:0;transition:opacity .5s}
.product-card.is-tilt .product-art{box-shadow:0 24px 40px -24px rgba(18,19,24,.45)}
.product-card.is-tilt .product-art::after{opacity:1}
.product-add{border-radius:999px;transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease)}
.product-add:hover{transform:rotate(90deg)}
.bump{display:inline-block;animation:bump .55s var(--ease)}
input,select,textarea{border-radius:14px;transition:border-color .3s,box-shadow .5s var(--ease),background .3s}
input:hover,select:hover,textarea:hover{border-color:#8d8f96}
input:focus,select:focus,textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 5px rgba(30,68,214,.13)}
.slot-group span{border-radius:999px;transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease)}
.slot-group label:hover span{transform:translateY(-2px);border-color:var(--cobalt)}
.workflow-steps li{border-radius:14px;transition:background .5s var(--ease)}
.workflow-steps li.active .step-index{animation:pulse 1.2s ease-in-out infinite}
.visual-compare,.booking-summary,.creative-output,.request-result,.empty{border-radius:20px}

/* Services: rows light up under the pointer. */
.service-list article{position:relative;isolation:isolate}
.service-list article::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:20px;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(30,68,214,.13),transparent 70%),rgba(255,255,255,.55);opacity:0;transform:scaleY(.8);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.service-list article:hover::before{opacity:1;transform:none}
.service-list h3{transition:transform .7s var(--ease),color .4s}
.service-list article:hover h3{transform:translateX(-10px);color:var(--cobalt)}
.service-number{transition:color .4s}
.service-list article:hover .service-number{color:var(--cobalt)}
@media(min-width:768px){.service-list article{padding-inline:18px}.service-list article::before{inset:0 -6px}}

/* Gallery: bento of generated studies, caption on glass. */
.media-gallery{grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:clamp(220px,23vw,340px);gap:18px}
.media-gallery figure{position:relative;overflow:hidden;border-radius:26px;background:var(--paper-deep);margin:0!important;box-shadow:0 30px 60px -40px rgba(18,19,24,.5);transition:transform .8s var(--ease)}
.media-gallery figure:first-child{grid-row:span 2}
.media-gallery figure:nth-child(4){grid-column:span 2}
.media-gallery figure{min-height:0;height:100%}
.media-gallery picture,.media-gallery img{display:block;position:absolute;inset:0;width:100%;height:100%}
.media-gallery img,.media-gallery figure:nth-child(2) img{aspect-ratio:auto;height:100%;object-fit:cover;border-radius:0;transition:scale 1.6s var(--ease)}
.media-gallery figure:nth-child(4) img{object-position:62% 55%}
.media-gallery figure:hover img{scale:1.06}
.media-gallery figure.is-tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.media-gallery figcaption{position:absolute;inset:auto 14px 14px;padding:14px 18px;border-radius:18px;background:rgba(14,15,22,.42);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);color:#fff;transition:transform .7s var(--ease)}
.media-gallery strong{font-size:19px}
.media-gallery figcaption span{color:rgba(255,255,255,.8)}
.media-gallery figure:hover figcaption{transform:translateY(-4px)}

/* Offer: the one dark room of the house. */
.offer-section{--ink:#f3eee4;--muted:#a9adbb;--line:rgba(243,238,228,.16);position:relative;overflow:hidden;color:var(--ink);border:0;border-radius:34px;padding:clamp(40px,6vw,96px) clamp(22px,5vw,84px);margin-block:clamp(30px,5vw,70px);background:radial-gradient(720px circle at var(--sx,82%) var(--sy,0%),rgba(58,99,255,.38),transparent 62%),radial-gradient(900px 520px at 0% 100%,rgba(184,135,58,.24),transparent 62%),var(--night);box-shadow:0 70px 130px -60px rgba(11,16,48,.75)}
.offer-section .small-label{color:var(--brass-hi)}
.offer-price{padding:clamp(22px,3vw,40px);border-radius:26px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .8s var(--ease)}
.offer-price.is-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.offer-price bdi{background:linear-gradient(100deg,#e6c27f 10%,#fff4da 38%,#c79545 62%,#e6c27f 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out infinite}
.offer-price p .muted bdi,.offer-price p bdi{animation:none;background:none;color:inherit;font:inherit;letter-spacing:normal}
.offer-section .button{background:var(--paper);border-color:var(--paper);color:var(--night);box-shadow:0 18px 40px -16px rgba(230,194,127,.55)}
.offer-section .button:hover{background:#fff;border-color:#fff}
.offer-details{border-top-color:var(--line)}
.offer-details li::marker{color:var(--brass-hi)}

/* Process: cards on a line that draws itself with the scroll. */
.process-list{position:relative}
.process-list::before{content:'';position:absolute;top:-22px;inset-inline:0;height:2px;border-radius:2px;background:linear-gradient(to left,var(--cobalt),var(--brass-hi));transform-origin:right}
.process-list li{padding:26px;border-radius:22px;background:rgba(255,255,255,.55);border:1px solid rgba(18,19,24,.07);box-shadow:0 24px 50px -36px rgba(18,19,24,.4);transition:transform .8s var(--ease),box-shadow .6s var(--ease)}
.process-list li.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:0 34px 60px -36px rgba(30,68,214,.45)}
.process-list li>span{font:700 46px/1 Arial,sans-serif;color:transparent;-webkit-text-stroke:1.2px var(--cobalt);margin-bottom:20px}

/* FAQ + request */
summary{transition:color .35s}
summary:hover{color:var(--cobalt)}
summary:before{content:'+';display:inline-block;transition:transform .6s var(--ease)}
details[open] summary:before{content:'+';transform:rotate(45deg)}
details[open]>p{animation:faqIn .7s var(--ease) both}
.request-form{padding:clamp(20px,3vw,40px);border-radius:28px;background:rgba(255,255,255,.58);border:1px solid rgba(18,19,24,.08);box-shadow:inset 0 1px 0 #fff,0 50px 100px -60px rgba(18,19,24,.45)}
dialog{border-radius:24px;box-shadow:0 60px 120px -40px rgba(11,16,48,.6)}
dialog[open]{animation:dialogIn .55s var(--ease)}
dialog::backdrop{background:rgba(11,16,48,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.toast{border-radius:999px;transition:transform .6s var(--ease),opacity .4s}
.close-button{border-radius:999px;transition:transform .5s var(--ease),background .3s}
.close-button:hover{transform:rotate(90deg)}

/* Footer signature */
.giant{overflow:clip;white-space:nowrap;text-align:center;font-weight:700;font-size:clamp(56px,17.5vw,290px);line-height:1.15;padding-top:clamp(30px,6vw,90px);background:linear-gradient(180deg,var(--ink) 30%,rgba(18,19,24,.08));-webkit-background-clip:text;background-clip:text;color:transparent}
.giant .wi{background:inherit;-webkit-background-clip:text;background-clip:text}

/* Entrances (only when motion.js is running; JS failure or reduced motion leaves all content static). */
.js-motion .hero h1:not([data-split]){opacity:0}
.w{display:inline-block;overflow:hidden;padding-block:.16em .22em;margin-block:-.16em -.22em;vertical-align:baseline}
.wi{display:inline-block}
.js-motion h1.in .wi{animation:wordUp 1.25s var(--ease) calc(var(--i)*90ms + 120ms) backwards}
.js-motion h2[data-split]:not(.in) .wi,.js-motion .giant[data-split]:not(.in) .wi{transform:translateY(115%)}
.js-motion h2.in .wi,.js-motion .giant.in .wi{animation:wordUp 1.15s var(--ease) calc(var(--i)*70ms) backwards}
.js-motion .hero .eyebrow{animation:rise 1s var(--ease) .05s backwards}
.js-motion .hero-description{animation:rise 1.1s var(--ease) .5s backwards}
.js-motion .hero .button-hero{animation:rise 1.1s var(--ease) .65s backwards}
.js-motion .hero-art{animation:artIn 1.6s var(--ease) .1s backwards}
.js-motion .header{animation:drop .9s var(--ease) backwards}
.js-motion [data-reveal]:not(.in){opacity:0}
.js-motion [data-reveal].in{animation:rise 1.15s var(--ease) var(--d,0ms) backwards}
.js-motion [data-reveal=row].in{animation-name:rowIn}
.js-motion [data-reveal=clip].in{animation:clipIn 1.5s var(--ease) var(--d,0ms) backwards}
.js-motion [data-reveal=clip].in img{animation:settle 2s var(--ease) var(--d,0ms) backwards}

/* Scroll-driven choreography (compositor-run; browsers without support keep the static layout). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .progress{display:block;position:fixed;top:0;inset-inline:0;height:3px;z-index:60;background:linear-gradient(to left,var(--cobalt),var(--brass-hi));transform-origin:right;animation:grow linear both;animation-timeline:scroll(root)}
    .hero-copy{animation:heroOut linear both;animation-timeline:view();animation-range:exit 5% exit 95%}
    .demo-shell{transform-origin:50% 0;animation:shellRise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .process-list::before{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
    .giant{animation:giantUp linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  }
}

@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;translate:0 38px}}
@keyframes rowIn{from{opacity:0;translate:0 26px;clip-path:inset(0 0 100% 0)}}
@keyframes artIn{from{opacity:0;scale:.94}}
@keyframes drop{from{opacity:0;translate:0 -24px}}
@keyframes wordUp{from{transform:translateY(115%)}}
@keyframes clipIn{from{opacity:.2;clip-path:inset(22% 0 0 0 round 26px)}to{clip-path:inset(0 0 0 0 round 26px)}}
@keyframes settle{from{scale:1.28}}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes marquee{to{transform:translateX(50%)}}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
@keyframes bump{40%{transform:scale(1.35)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes dialogIn{from{opacity:0;transform:translateY(24px) scale(.96)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes heroOut{to{opacity:0;translate:0 -90px;scale:.97}}
@keyframes shellRise{from{opacity:.35;transform:perspective(2000px) rotateX(12deg) scale(.92) translateY(70px)}to{opacity:1;transform:none}}
@keyframes giantUp{from{opacity:0;translate:0 30%}}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px) scale(.98)}}

@media(max-width:767px){
  .header::before{inset:8px -10px}
  .mobile-nav{position:fixed;top:80px;inset-inline:12px;width:auto;margin:0;z-index:45;padding:12px 20px;border:1px solid var(--line);border-radius:22px;background:rgba(246,242,234,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 60px -24px rgba(18,19,24,.4);animation:menuIn .5s var(--ease)}
  .hero{min-height:0}
  #hero-scene{height:380px}
  .demo-tabs{display:grid;border-radius:24px;width:100%}
  .media-gallery{grid-template-columns:1fr;grid-auto-rows:auto}
  .media-gallery figure:first-child,.media-gallery figure:nth-child(4){grid-row:auto;grid-column:auto}
  .media-gallery figure{aspect-ratio:4/3}
  .offer-section{border-radius:26px}
  .process-list li{padding:20px}
  .process-list li>span{font-size:38px}
}
@media(prefers-reduced-motion:reduce){.button,.button:hover{transform:none!important}.marquee-track{animation:none!important}}

/* Generated 3D assets (Codex/ChatGPT pack, 2026-10-04) */
.service-icon{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(18,19,24,.18));transition:transform .9s var(--ease),filter .6s}
.service-list article:hover .service-icon{transform:translateY(-6px) rotate(-6deg) scale(1.08);filter:drop-shadow(0 22px 24px rgba(30,68,214,.28))}
@media(min-width:768px){.service-list article{grid-template-columns:84px 36px 1fr 1.1fr minmax(135px,.45fr)}}
@media(max-width:767px){.service-list article{grid-template-columns:64px 1fr}.service-icon{width:60px;height:60px;grid-row:span 3;align-self:start}.service-list .service-number{display:none}}
.product-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.product-card.is-tilt .product-photo{scale:1.06}
.product-art .product-number{display:none}
.product-art:has(.product-photo) .product-category{z-index:1;padding:3px 10px;border-radius:999px;background:rgba(243,238,228,.9);color:var(--ink)}
.product-art:not(:has(.product-photo)) .product-number{display:block}
.glyph{width:30px;height:30px;padding:3px;margin-inline-end:-10px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 10px -4px rgba(18,19,24,.35);transition:transform .7s var(--ease)}
.button:hover .glyph{transform:rotate(-12deg) scale(1.12)}
.button-outline .glyph{background:transparent;box-shadow:none;padding:0}
.hero{isolation:isolate}
.hero::after{content:'';position:absolute;inset:-98px -2% 0 -2%;z-index:-1;pointer-events:none;background:url('./assets/img/textures/shanasheel-shadow.webp') right top/cover no-repeat;mix-blend-mode:multiply;opacity:.28;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.offer-section{isolation:isolate}
.offer-section::before{content:'';position:absolute;inset:0;z-index:-1;background:url('./assets/img/hero/hero-storefront-dusk.webp') center/cover no-repeat;transform:scaleX(-1);opacity:.6;-webkit-mask-image:linear-gradient(to left,#000 20%,transparent 75%);mask-image:linear-gradient(to left,#000 20%,transparent 75%)}
.giant,.giant .wi{background:url('./assets/img/scenes/baghdad-golden-hour.webp') center 40%/cover;-webkit-background-clip:text;background-clip:text;color:transparent}
.offer-showcase{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 0}
.offer-showcase img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transition:transform 1s var(--ease)}
.offer-showcase img:hover{transform:translateY(-6px) scale(1.01)}
.offer-showcase figcaption{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.offer-showcase strong{font-size:19px}.offer-showcase span{font-size:14px;color:var(--muted)}
@media(max-width:767px){.offer-showcase{grid-template-columns:1fr}}
@media(max-width:767px){.hero::after{background-image:url('./assets/img/textures/shanasheel-shadow-900.webp')}}

/* ---------- Growth layer: template studio ---------- */
.studio{overflow-x:clip;overflow-clip-margin:12px}
.studio-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center}
.studio-picker{display:grid;gap:10px}
.studio-picker button{display:flex;align-items:center;gap:14px;min-height:72px;padding:8px 10px;border:1px solid rgba(18,19,24,.09);border-radius:20px;background:rgba(255,255,255,.55);font-weight:700;font-size:19px;color:var(--ink);text-align:start;transition:background .45s var(--ease),color .45s,transform .7s var(--ease),box-shadow .5s var(--ease)}
.studio-picker button img{width:56px;height:56px;border-radius:14px;object-fit:cover;transition:transform .7s var(--ease)}
.studio-picker button::after{content:'←';margin-inline-start:auto;padding-inline-end:10px;font-family:Arial;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .6s var(--ease)}
.studio-picker button:hover{background:#fff;transform:translateX(-4px)}
.studio-picker button:hover img{transform:scale(1.08) rotate(-4deg)}
.studio-picker button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:0 22px 40px -24px rgba(18,19,24,.6);transform:translateX(-8px)}
.studio-picker button[aria-pressed=true]::after{opacity:1;transform:none}
.studio-stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.5vw,48px);align-items:center}
.phone{position:relative;width:min(292px,74vw);aspect-ratio:9/19;padding:10px;border-radius:46px;background:linear-gradient(150deg,#3a3c44,#0d0e12 60%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 60px 90px -40px rgba(18,19,24,.55),0 30px 50px -30px rgba(30,68,214,.35);transform:perspective(1300px) rotateY(-9deg) rotateX(3deg);transition:transform 1s var(--ease)}
.phone.is-tilt{transform:perspective(1300px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.phone::before{content:'';position:absolute;top:20px;left:50%;width:86px;height:24px;margin-left:-43px;border-radius:14px;background:#08090b;z-index:3}
.phone-screen{height:100%;overflow:hidden;border-radius:36px;background:#24160f;view-transition-name:studio-screen}
.ms{height:100%;display:flex;flex-direction:column;background:var(--ms-bg);color:var(--ms-fg);font-size:12px;line-height:1.5}
.ms p{color:inherit}
.ms-bar{display:flex;justify-content:space-between;align-items:center;padding:52px 18px 10px}
.ms-logo{font-weight:700;font-size:16px}
.ms-menu{width:18px;height:11px;border-block:2px solid currentColor}
.ms-hero{position:relative;margin:0 10px;border-radius:22px;overflow:hidden;aspect-ratio:1/.92}
.ms-hero img{width:100%;height:100%;object-fit:cover}
.ms-hero-text{position:absolute;inset:auto 0 0;display:grid;gap:2px;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.ms-hero-text b{font-size:19px}.ms-hero-text span{font-size:11px}
.ms-actions{display:flex;gap:8px;padding:12px 10px 8px}
.ms-btn{flex:1;padding:9px 6px;border-radius:999px;background:var(--ms-ac);color:#fff;font-weight:700;font-size:11px;text-align:center}
.ms-ghost{background:transparent;color:var(--ms-fg);box-shadow:inset 0 0 0 1px currentColor}
.ms-h{padding:4px 16px;font-weight:700;font-size:12px}
.ms-items{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px}
.ms-items span{padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--ms-ac) 22%,transparent);font-size:11px}
.ms-map{display:flex;align-items:center;gap:8px;margin:auto 12px 16px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--ms-fg) 9%,transparent);font-size:11px}
.ms-map::before{content:'';width:10px;height:10px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ms-ac)}
.phone-screen.swap .ms{animation:msIn .7s var(--ease)}
.studio-meta{display:grid;gap:12px;align-content:center}
.studio-meta .demo-label{width:fit-content;padding:4px 12px;border-radius:999px;background:rgba(30,68,214,.1);color:var(--cobalt);font-size:13px}
.studio-name{font-size:17px;color:var(--ink)}
.studio-meta h3{font-size:24px}
.studio-features{list-style:none;padding:0;display:grid;gap:8px}
.studio-features li{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--muted);animation:rise .6s var(--ease) backwards}
.studio-features li:nth-child(2){animation-delay:.06s}.studio-features li:nth-child(3){animation-delay:.12s}.studio-features li:nth-child(4){animation-delay:.18s}
.studio-features li::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.studio-meta .button{justify-self:start;margin-top:6px}
::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(studio-screen){animation:msOut .3s ease-in both}
::view-transition-new(studio-screen){animation:msIn .75s var(--ease) both}
@keyframes msOut{to{opacity:0;transform:translateY(-16px) scale(.97);filter:blur(5px)}}
@keyframes msIn{from{opacity:0;transform:translateY(24px) scale(1.03);filter:blur(6px)}}

/* ---------- Plan builder + dock ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.plan-tile{position:relative;display:grid;align-content:start;justify-items:start;gap:4px;min-height:178px;padding:18px;border:1px solid rgba(18,19,24,.08);border-radius:24px;background:rgba(255,255,255,.58);color:var(--ink);text-align:start;transition:transform .7s var(--ease),border-color .35s,background .35s,box-shadow .5s var(--ease)}
.plan-tile img{width:74px;height:74px;object-fit:contain;margin-bottom:6px;filter:drop-shadow(0 12px 14px rgba(18,19,24,.18));transition:transform .8s var(--ease)}
.plan-tile:hover img{transform:translateY(-5px) rotate(-7deg) scale(1.06)}
.plan-tile.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.plan-tile:active{transform:scale(.965);transition-duration:.15s}
.plan-name{font-weight:700;font-size:18px;line-height:1.4}
.plan-price{font-size:14px;color:var(--muted)}
.plan-tile[data-plan=website] .plan-price{color:var(--cobalt);font-weight:700}
.plan-state{position:absolute;top:14px;inset-inline-end:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(18,19,24,.18);transition:background .35s,border-color .35s,color .35s,transform .6s var(--ease)}
.plan-state::before{content:'+';font:400 22px/1 Arial,sans-serif}
.plan-tile:hover .plan-state{transform:rotate(90deg);border-color:var(--cobalt);color:var(--cobalt)}
.plan-tile[aria-pressed=true]{border-color:var(--cobalt);background:#fff;box-shadow:0 0 0 3px rgba(30,68,214,.14),0 26px 46px -30px rgba(30,68,214,.6)}
.plan-tile[aria-pressed=true] .plan-state{background:var(--cobalt);border-color:var(--cobalt);color:#fff;transform:none;animation:pop .55s var(--ease)}
.plan-tile[aria-pressed=true] .plan-state::before{content:'✓';font-size:17px}
.plan-dock{position:fixed;z-index:46;bottom:18px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);padding:8px 8px 8px 16px;border-radius:999px;background:rgba(14,15,22,.88);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);animation:dockIn .6s var(--ease)}
.plan-dock.got{animation:got .5s var(--ease)}
.dock-icons{display:flex;padding-inline-start:4px}
.dock-icons img{width:34px;height:34px;object-fit:contain;margin-inline-start:-10px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));animation:pop .5s var(--ease)}
.dock-icons img:first-child{margin-inline-start:0}
.dock-text{display:grid;line-height:1.35;white-space:nowrap}
.dock-text strong{font-size:15px}.dock-text span{font-size:12px;color:rgba(255,255,255,.75)}
.plan-dock .button{min-height:44px;box-shadow:none}
.dock-clear{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;transition:background .3s,transform .5s var(--ease)}
.dock-clear:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.fly-ghost{position:fixed;z-index:80;pointer-events:none;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(18,19,24,.35));will-change:transform}

/* ---------- WhatsApp shortcut ---------- */
.wa-fab{position:fixed;z-index:45;bottom:18px;inset-inline-end:18px;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 18px 40px -12px rgba(30,68,214,.55),inset 0 0 0 1px rgba(18,19,24,.06);animation:fabIn .7s var(--ease);transition:transform .5s var(--ease)}
.wa-fab:hover{transform:scale(1.08) rotate(-6deg)}
.wa-fab img{width:42px;height:42px}
.wa-fab::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--cobalt);animation:ring 2.6s ease-out infinite}
.wa-tip{position:absolute;inset-inline-end:72px;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
.wa-fab:hover .wa-tip,.wa-fab.tip .wa-tip{opacity:1;transform:none}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.15)}}
@keyframes dockIn{from{opacity:0;transform:translateY(30px) scale(.94)}}
@keyframes got{40%{transform:scale(1.05)}}
@keyframes fabIn{from{opacity:0;transform:scale(.4) rotate(-30deg)}}
@keyframes ring{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.6)}}

@media(max-width:1100px) and (min-width:768px){.studio-stage{grid-template-columns:1fr;justify-items:center}}
@media(max-width:767px){
  .studio-grid{grid-template-columns:1fr}
  .studio-picker{grid-template-columns:1fr 1fr;gap:8px}
  .studio-picker button{min-height:56px;padding:6px;gap:8px;font-size:15px;border-radius:16px}
  .studio-picker button img{width:40px;height:40px;border-radius:11px}
  .studio-picker button::after{display:none}
  .studio-picker button[aria-pressed=true],.studio-picker button:hover{transform:none}
  .studio-stage{grid-template-columns:1fr;justify-items:center}
  .studio-meta{justify-items:start;width:100%}
  .plan-grid{grid-template-columns:1fr 1fr;gap:10px}
  .plan-tile{min-height:150px;padding:14px}
  .plan-tile img{width:56px;height:56px}
  .plan-name{font-size:16px}
  .plan-dock{left:12px;right:12px;translate:none;max-width:none;gap:10px;padding-inline-start:12px}
  .dock-text{flex:1;min-width:0}.dock-text span{overflow:hidden;text-overflow:ellipsis}
  .dock-icons img:nth-child(n+3){display:none}
  .toast{bottom:92px}
}
@media(max-width:380px){.plan-grid{grid-template-columns:1fr}.plan-dock .dock-icons{display:none}}

/* ---------- Packages ---------- */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.plans{overflow-x:clip;overflow-clip-margin:16px}
.launch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-bottom:28px;padding:16px 22px;border-radius:24px;background:linear-gradient(100deg,rgba(30,68,214,.09),rgba(230,194,127,.18));border:1px solid rgba(30,68,214,.14)}
.launch-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px;color:var(--ink)}
.launch-copy strong{color:var(--cobalt)}
.launch-dot{width:9px;height:9px;border-radius:50%;background:#e2483d;box-shadow:0 0 0 0 rgba(226,72,61,.5);animation:live 1.8s ease-out infinite}
.countdown{display:flex;gap:8px;direction:rtl}
.countdown>div{display:grid;justify-items:center;min-width:62px;padding:8px 6px 6px;border-radius:16px;background:var(--night);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 24px -16px rgba(11,16,48,.8);overflow:hidden}
.countdown b{display:block;font:700 26px/1.1 Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--brass-hi)}
.countdown b.flip{animation:flip .55s var(--ease)}
.countdown span{font-size:11px;color:rgba(255,255,255,.7)}
.packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.packages-more{margin-top:20px}
.packages-more:not([hidden]) .package{animation:rise .9s var(--ease) backwards}
.packages-more .package:nth-child(2){animation-delay:.08s}.packages-more .package:nth-child(3){animation-delay:.16s}
.package{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 24px 22px;border-radius:30px;background:rgba(255,255,255,.62);border:1px solid rgba(18,19,24,.08);box-shadow:inset 0 1px 0 #fff,0 40px 80px -56px rgba(18,19,24,.55);transition:transform .9s var(--ease),box-shadow .6s var(--ease)}
.package.is-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.package-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:76px}
.package-icon{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(18,19,24,.2));transition:transform .9s var(--ease)}
.package:hover .package-icon{transform:translateY(-6px) rotate(-8deg) scale(1.06)}
.package h3{font-size:30px;line-height:1.2;margin-top:6px}
.package-tag{font-size:16px}
.package-price{margin:14px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.package .was{display:flex;gap:8px;align-items:baseline;font-size:14px;color:var(--muted)}
.package .was s{position:relative;text-decoration:none;font:700 17px Arial,sans-serif}
.package .was s::after{content:'';position:absolute;inset-inline:-3px;top:52%;height:2px;border-radius:2px;background:#e2483d;transform-origin:right}
.js-motion .package[data-reveal]:not(.in) .was s::after{transform:scaleX(0)}
.js-motion .package.in .was s::after{animation:strike .9s .55s var(--ease) both}
.js-motion .package.is-recommended[data-reveal].in{animation:rise 1.15s var(--ease) var(--d,0ms) backwards,spin 7s linear infinite}
.package .now{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.package .now bdi{font:700 clamp(40px,3.6vw,54px)/1.1 Arial,sans-serif;letter-spacing:-2px;color:var(--ink)}
.package .now span{font-size:18px;font-weight:700}
.package .usd{font-size:13px;color:var(--muted)}
.package .usd bdi{font-weight:700;color:var(--ink)}
.package-cta{width:100%;margin:6px 0 14px}
.package-features{list-style:none;padding:0;display:grid;gap:9px;font-size:16px;color:var(--muted)}
.package-features li{display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.package-features li::before{content:'';flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.package-features li.inherit{color:var(--ink);font-weight:700}
.package-features li.inherit::before{background:var(--brass-hi) 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='%230b1030' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}
.package-note{margin-top:auto;padding-top:14px;font-size:13px!important}
.package.is-recommended{--ink:#f3eee4;--muted:#b4b8c6;--line:rgba(243,238,228,.16);color:var(--ink);border:2px solid transparent;background:radial-gradient(420px circle at 80% 0%,rgba(58,99,255,.45),transparent 60%) padding-box,linear-gradient(var(--night),var(--night)) padding-box,conic-gradient(from var(--spin),#1e44d6,#e6c27f,#6c8bff,#b8873a,#1e44d6) border-box;box-shadow:0 60px 110px -50px rgba(11,16,48,.85),0 0 0 1px rgba(230,194,127,.08);animation:spin 7s linear infinite;transform:translateY(-10px)}
.package.is-recommended.is-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-16px)}
.package.is-recommended .now bdi{background:linear-gradient(100deg,#e6c27f 10%,#fff4da 40%,#c79545 65%,#e6c27f 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s ease-in-out infinite}
.package.is-recommended .package-cta{background:var(--paper);border-color:var(--paper);color:var(--night);box-shadow:0 18px 40px -16px rgba(230,194,127,.6)}
.package.is-recommended .package-features li.inherit::before{background-color:var(--brass-hi)}
.package-badge{padding:6px 14px;border-radius:999px;background:linear-gradient(100deg,#e6c27f,#fff1cf,#c79545);background-size:200% 100%;color:var(--night);font-size:14px;font-weight:700;animation:sheen 4s ease-in-out infinite;box-shadow:0 10px 24px -12px rgba(230,194,127,.8)}
.plans-more-row{display:flex;justify-content:center;margin-top:26px}
.plans-chev{display:inline-block;transition:transform .6s var(--ease)}
#plans-toggle[aria-expanded=true] .plans-chev{transform:rotate(180deg)}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:34px;padding:18px 22px;border-radius:22px;border:1px dashed rgba(18,19,24,.18)}
.pay-title{font-weight:700;color:var(--ink);font-size:16px}
.pay-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.pay-list li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -14px rgba(18,19,24,.4);font-weight:700;font-size:15px}
.pay-list svg{width:22px;height:22px;fill:none;stroke:var(--cobalt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pay .form-note{flex-basis:100%}
.package-sum{font:700 22px Arial,var(--font);color:var(--cobalt)}
#package-message{margin-block:14px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:16px;line-height:1.8}
@keyframes spin{to{--spin:360deg}}
@keyframes flip{0%{transform:translateY(-60%) rotateX(70deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes strike{from{transform:scaleX(0)}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(226,72,61,.5)}80%,100%{box-shadow:0 0 0 10px rgba(226,72,61,0)}}
@media(max-width:1000px) and (min-width:768px){.packages{grid-template-columns:1fr 1fr}.package.is-recommended{transform:none}}
@media(max-width:767px){
  .packages{grid-template-columns:1fr;gap:16px}
  .package.is-recommended{transform:none;order:-1}
  .launch{padding:14px 16px}
  .countdown{width:100%;justify-content:space-between}
  .countdown>div{min-width:0;flex:1}
  .package h3{font-size:26px}
}

/* ---------- AI section ---------- */
.ai-section{overflow-x:clip;overflow-clip-margin:16px}
.ai-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.ai-stage{display:grid;justify-items:center;gap:12px}
.ai-phone{transform:perspective(1300px) rotateY(9deg) rotateX(3deg)}
.chat-screen{display:flex;flex-direction:column;background:#efe7da url('./assets/img/textures/shanasheel-shadow-900.webp') center/cover;background-blend-mode:soft-light}
.chat-head{display:flex;align-items:center;gap:10px;padding:48px 14px 10px;background:#0b1030;color:#fff}
.chat-head b{display:block;font-size:14px}.chat-head span{font-size:11px;color:#9fe3b0}
.chat-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8a9a3c,#c8893c);font-weight:700}
.chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px 10px;overflow:hidden;font-size:12px}
.msg{max-width:84%;padding:8px 11px 5px;border-radius:16px;line-height:1.55;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.msg p{color:inherit;font-size:12px}
.msg time{display:block;margin-top:2px;font:10px Arial,sans-serif;opacity:.55;text-align:end;direction:ltr}
.msg.in{align-self:flex-start;background:#fff;color:#1b1c22;border-start-start-radius:4px}
.msg.out{align-self:flex-end;background:#1e44d6;color:#fff;border-start-end-radius:4px}
.msg.sys{align-self:center;max-width:none;padding:6px 12px;border-radius:999px;background:rgba(11,16,48,.82);color:#f3e2b8;font-size:11px}
.msg.typing{align-self:flex-end;display:flex;gap:4px;padding:10px 12px;background:#1e44d6}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#fff;animation:dot 1s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
.chat.armed:not(.play) .msg{opacity:0}
.chat.armed:not(.play) .msg.typing{display:none}
.chat.play .msg{animation:msgIn .55s var(--ease) calc(var(--t) * 1s) backwards}
.chat.play .msg.typing{animation:typingLife 1.1s ease calc(var(--t) * 1s) both}
.ai-caption{max-width:300px;text-align:center;font-size:13px!important}
.ai-caption .demo-label{display:inline-block;margin-inline-end:4px;padding:2px 10px;border-radius:999px;background:rgba(30,68,214,.1);color:var(--cobalt);font-size:12px}
.ai-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ai-card{padding:20px;border-radius:24px;background:rgba(255,255,255,.62);border:1px solid rgba(18,19,24,.07);box-shadow:inset 0 1px 0 #fff,0 26px 50px -38px rgba(18,19,24,.5);transition:transform .8s var(--ease),box-shadow .5s var(--ease)}
.ai-card.is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:0 34px 60px -36px rgba(30,68,214,.45)}
.ai-card img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(18,19,24,.18));transition:transform .8s var(--ease)}
.ai-card:hover img{transform:translateY(-4px) rotate(-8deg)}
.ai-card h3{margin-top:10px;font-size:20px}
.ai-card p{margin-top:4px;font-size:15px;line-height:1.65}
.ai-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:22px 0 10px}
.package-ai{padding:6px 12px;border-radius:999px;background:linear-gradient(100deg,rgba(30,68,214,.12),rgba(230,194,127,.35));color:var(--cobalt);font-size:13px;font-weight:700}
.package-features li.ai-head{margin-top:6px;padding-top:12px;border-top:1px dashed var(--line);font-weight:700;background:linear-gradient(100deg,var(--cobalt),#b8873a);-webkit-background-clip:text;background-clip:text;color:transparent}
.package-features li.ai-head::before{background:linear-gradient(135deg,#1e44d6,#e6c27f)}
.package-features li.ai{color:var(--ink)}
.package-features li.ai::before{content:'AI';display:grid;place-items:center;font:700 8px/1 Arial,sans-serif;color:#fff;background:linear-gradient(135deg,#1e44d6,#b8873a)}
@keyframes dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes typingLife{0%{opacity:0;max-height:0;padding-block:0}12%,82%{opacity:1;max-height:40px;padding-block:10px}100%{opacity:0;max-height:0;padding-block:0;margin-top:-8px}}
@media(prefers-reduced-motion:reduce){.msg.typing{display:none!important}}

/* ---------- Callback ---------- */
.callback-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);padding:clamp(24px,5vw,64px);border-radius:34px;background:radial-gradient(600px circle at 90% 0%,rgba(30,68,214,.12),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));border:1px solid rgba(18,19,24,.08);box-shadow:inset 0 1px 0 #fff,0 60px 120px -70px rgba(18,19,24,.55)}
.callback-intro>p:not(.small-label){margin-top:20px;font-size:19px;max-width:38ch}
.callback-steps{list-style:none;padding:0;display:grid;gap:12px;margin-top:28px}
.callback-steps li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px}
.callback-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 14px Arial,sans-serif}
.callback-form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.callback-form>label:nth-of-type(n+3),.callback-form .cb-methods,.callback-form .cb-consent,.callback-form>.button,.callback-form>.status,.callback-done{grid-column:1/-1}
.cb-methods{padding:0;border:0}
.cb-methods legend{font-size:16px;font-weight:700;margin-bottom:8px}
.cb-methods>div{display:flex;flex-wrap:wrap;gap:8px}
.cb-methods label{position:relative}
.cb-methods input{position:absolute;opacity:0;width:1px;height:1px;min-height:1px}
.cb-methods span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease)}
.cb-methods input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cb-methods input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:3px}
.cb-methods label:hover span{transform:translateY(-2px)}
.cb-consent{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:400;line-height:1.6}
.cb-consent input{width:20px;height:20px;min-height:20px;margin:3px 0 0;accent-color:var(--cobalt);flex:none}
.callback-form>.button{justify-self:start;min-width:220px}
.callback-form .hp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.callback-form.sending>.button{opacity:.7;pointer-events:none}
.callback-done{display:grid;justify-items:center;gap:10px;padding:30px 10px;text-align:center;animation:rise .8s var(--ease)}
.callback-done svg{width:84px;height:84px}
.callback-done circle{fill:none;stroke:var(--cobalt);stroke-width:3;stroke-dasharray:240;stroke-dashoffset:240;animation:draw .9s var(--ease) forwards}
.callback-done path{fill:none;stroke:var(--cobalt);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .6s var(--ease) forwards}
.callback-done h3{font-size:26px}
.hero-alt{display:inline-block;margin-top:14px;font-weight:700;color:var(--cobalt);text-decoration:underline;text-underline-offset:6px}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:1100px) and (min-width:768px){.ai-grid{grid-template-columns:1fr;justify-items:center}}
@media(max-width:767px){
  .ai-grid{grid-template-columns:1fr}
  .ai-cards{grid-template-columns:1fr 1fr;gap:10px}
  .ai-card{padding:14px}.ai-card h3{font-size:17px}.ai-card p{font-size:14px}
  .callback-card{grid-template-columns:1fr;border-radius:26px}
  .callback-form{grid-template-columns:1fr}
  .callback-form>.button{justify-self:stretch}
}
@media(max-width:380px){.ai-cards{grid-template-columns:1fr}}

/* ---------- Performance pass (2026-10-04): no per-frame repaints, no full-screen blur/blend ---------- */
:root{view-transition-name:none}
body::after{display:none}
.hero .accent .wi,.hero .accent:not(:has(.wi)),.offer-price bdi,.package.is-recommended .now bdi,.package-badge{background-position:30% 0}
.offer-price bdi,.package.is-recommended .now bdi,.package-badge,.hero .accent:not(:has(.wi)){animation:none}
.media-gallery figcaption{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,15,22,.66)}
dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,16,48,.55)}
.hero::after{mix-blend-mode:normal;opacity:.2}
.launch-dot{position:relative;animation:none;box-shadow:none}
.launch-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:#e2483d;animation:ping 1.8s ease-out infinite}
.package.is-recommended{position:relative;isolation:isolate;overflow:hidden;border:0;padding:28px 26px 24px;background:var(--night);animation:none}
.package.is-recommended::before{content:'';position:absolute;z-index:-2;left:50%;top:50%;width:260%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(#1e44d6,#e6c27f,#6c8bff,#b8873a,#1e44d6);animation:rot 7s linear infinite}
.package.is-recommended::after{content:'';position:absolute;z-index:-1;inset:2px;border-radius:28px;background:radial-gradient(420px circle at 80% 0%,rgba(58,99,255,.45),transparent 60%),var(--night)}
.js-motion .package.is-recommended[data-reveal].in{animation:rise 1.15s var(--ease) var(--d,0ms) backwards}
@media (pointer:coarse){.scene-poster img{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:40% 60%}}
@keyframes rot{to{rotate:360deg}}
@keyframes ping{to{transform:scale(2.8);opacity:0}}
@keyframes kenburns{from{scale:1}to{scale:1.07;translate:-1.5% 1%}}