*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ===== INTRO MODE — The hero IS the intro ===== */
body.intro{overflow:hidden}

/* Nav hidden during intro */
body.intro nav{opacity:0!important;transform:translateY(-20px)!important;pointer-events:none}

/* Hero logo zoomed up during intro */
body.intro .hero-logo-wrap{transform:scale(1.18);margin-bottom:0}

/* Suppress hero content animations — keep hidden until morph */
body.intro .hero-content{pointer-events:none}
body.intro .htag,
body.intro .hero-content h1,
body.intro .hdesc,
body.intro .hbtns,
body.intro .hplat{animation:none!important}

/* Hide floating cards */
body.intro .fc{opacity:0!important;transform:translateY(15px) scale(.85)!important}

/* Boost hero glow during intro for drama */
body.intro .hero-glow{width:800px;height:800px}

/* Hide everything below hero during intro */
body.intro section:not(.hero),
body.intro .marq,
body.intro footer{opacity:0}

/* ===== INTRO TEXT (inside hero, absolutely positioned) ===== */
.intro-text{
  position:absolute;z-index:5;
  left:50%;bottom:20%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  transition:opacity .4s ease,transform .4s ease;
}
.intro-text.exit{opacity:0;transform:translateX(-50%) translateY(-18px)}
.intro-text.done{display:none}
.intro-brand{
  display:flex;gap:3px;
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,3.8rem);font-weight:800;
  letter-spacing:-.02em;position:relative;overflow:hidden;
}
.intro-letter{
  display:inline-block;opacity:0;
  transform:translateY(40px) scale(.5);
  color:var(--o,#E58B40);
  animation:iLetterIn .6s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-letter:nth-child(1){animation-delay:.8s}
.intro-letter:nth-child(2){animation-delay:.95s}
.intro-letter:nth-child(3){animation-delay:1.1s}
.intro-letter:nth-child(4){animation-delay:1.25s}
@keyframes iLetterIn{
  0%{opacity:0;transform:translateY(40px) scale(.5)}
  60%{transform:translateY(-3px) scale(1.06)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.intro-brand::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  animation:iShimmer .8s 1.6s ease forwards;
  opacity:0;pointer-events:none;
}
@keyframes iShimmer{
  0%{opacity:0;transform:translateX(-120%)}
  15%{opacity:1}
  100%{opacity:0;transform:translateX(120%)}
}
.intro-tagline{
  margin-top:.5rem;font-size:clamp(.7rem,1.1vw,.85rem);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tl,#A68B74);
  opacity:0;transform:translateY(10px);
  animation:iTagIn .5s 1.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes iTagIn{to{opacity:1;transform:translateY(0)}}

/* ===== MORPH TRANSITIONS (fire when body.intro is removed) ===== */
.hero-logo-wrap{transition:transform .9s cubic-bezier(.22,1,.36,1),margin-bottom .9s cubic-bezier(.22,1,.36,1)}
.hero-glow{transition:width .8s ease,height .8s ease}
.fc{transition:opacity .5s ease,transform .5s ease}

:root{
  --o:#E58B40;--od:#C87030;--ol:#F0A860;--op:#F5D4B3;
  --cream:#FFF8F0;--warm:#FFFDFB;
  --t:#7A5F4A;--tl:#A68B74;--tm:#C9B5A2;
  --b:rgba(200,112,48,.07);--bh:rgba(200,112,48,.14);
  color-scheme:light only;
}
@media(prefers-color-scheme:dark){
  :root,html,body{color-scheme:light only!important;background-color:#FFF8F0!important;color:#7A5F4A!important}
  *{color-scheme:light only!important}
  section,div,footer,nav,header,main,article,aside{background-color:transparent!important}
  footer,.marq{background-color:#FFF8F0!important}
  nav.scrolled{background-color:rgba(255,248,240,.92)!important}
  .fc,.dv-item,.price-col{background-color:#FFF8F0!important}
  .price-col.pop{background-color:rgba(229,139,64,.04)!important}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:#FFF8F0;overflow-x:hidden;width:100%;overscroll-behavior:none}
body{font-family:'Outfit',sans-serif;color:#7A5F4A;background:#FFF8F0!important;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;width:100%;max-width:100%;-webkit-overflow-scrolling:touch}
button,a,.faq-q,.cx-fcat-head,.faq-tab,.cx-tab{touch-action:manipulation}
::selection{background:rgba(229,139,64,.15);color:var(--t)}

/* === GLOBAL BACKGROUND LAYERS === */
/* Subtle dot grid */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle,rgba(229,139,64,.09) 1px,transparent 1px);
  background-size:28px 28px;will-change:transform;transform:translateZ(0);
}
/* Grain texture */
body::after{content:'';position:fixed;inset:0;opacity:.03;pointer-events:none;z-index:10000;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px;will-change:transform;transform:translateZ(0)}

/* Ambient floating blobs — fixed, drift slowly */
.ambient-blob{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1;opacity:0;animation:ambientIn 2s ease-out forwards;will-change:transform;transform:translateZ(0)}
@keyframes ambientIn{to{opacity:1}}
.ab1{width:500px;height:500px;background:rgba(229,139,64,.09);top:-10%;right:-8%;animation:abDrift1 30s ease-in-out infinite,ambientIn 2s ease-out forwards}
.ab2{width:400px;height:400px;background:rgba(229,139,64,.07);bottom:10%;left:-10%;animation:abDrift2 35s ease-in-out infinite,ambientIn 2s .5s ease-out forwards}
.ab3{width:350px;height:350px;background:rgba(245,212,179,.08);top:40%;right:-5%;animation:abDrift3 28s ease-in-out infinite,ambientIn 2s 1s ease-out forwards}
.ab4{width:300px;height:300px;background:rgba(229,139,64,.06);top:70%;left:10%;animation:abDrift1 40s ease-in-out infinite reverse,ambientIn 2s 1.5s ease-out forwards}
@keyframes abDrift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-60px) scale(1.1)}66%{transform:translate(-30px,40px) scale(.9)}}
@keyframes abDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-40px) scale(1.15)}}
@keyframes abDrift3{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(-30px,50px) scale(1.05)}75%{transform:translate(20px,-30px) scale(.95)}}

/* Section divider waves */
.wave-divider{width:100%;height:40px;overflow:hidden;position:relative}
.wave-divider svg{position:absolute;bottom:0;width:200%;height:100%;animation:waveDrift 12s linear infinite}
@keyframes waveDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Radial section accents */
.sec-glow{position:absolute;width:600px;height:300px;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.sec-glow-l{left:-15%;background:rgba(229,139,64,.07)}
.sec-glow-r{right:-15%;background:rgba(245,212,179,.07)}

/* Animated crosshatch for certain sections */
.crosshatch{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.045}
.crosshatch::before,.crosshatch::after{content:'';position:absolute;inset:-50%;
  background-image:repeating-linear-gradient(45deg,var(--o) 0,var(--o) 1px,transparent 1px,transparent 24px);
  background-size:34px 34px}
.crosshatch::after{background-image:repeating-linear-gradient(-45deg,var(--o) 0,var(--o) 1px,transparent 1px,transparent 24px);animation:crossShift 25s linear infinite}
@keyframes crossShift{from{transform:translate(0,0)}to{transform:translate(34px,34px)}}

/* Floating section decorations */
.sec-deco{position:absolute;pointer-events:none;z-index:0}
.deco-circle{border-radius:50%;border:1.5px solid rgba(229,139,64,.1);animation:decoFloat 10s ease-in-out infinite}
.deco-ring{border-radius:50%;border:1.5px dashed rgba(229,139,64,.08);animation:decoSpin 20s linear infinite}
.deco-plus{width:14px;height:14px;position:relative;opacity:.1}
.deco-plus::before,.deco-plus::after{content:'';position:absolute;background:var(--o);border-radius:1px}
.deco-plus::before{width:100%;height:2px;top:50%;transform:translateY(-50%)}
.deco-plus::after{width:2px;height:100%;left:50%;transform:translateX(-50%)}
@keyframes decoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(8deg)}}
@keyframes decoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.deco-diamond{width:12px;height:12px;background:rgba(229,139,64,.08);transform:rotate(45deg);animation:decoFloat 8s ease-in-out infinite}
.deco-dot{border-radius:50%;background:rgba(229,139,64,.08);animation:decoPulse 4s ease-in-out infinite}
@keyframes decoPulse{0%,100%{transform:scale(1);opacity:.08}50%{transform:scale(1.5);opacity:.04}}

/* Animated gradient strip between sections */
.grad-strip{height:1px;background:linear-gradient(90deg,transparent,rgba(229,139,64,.12),rgba(229,139,64,.06),rgba(229,139,64,.12),transparent);background-size:200% 100%;animation:gradMove 6s linear infinite}
@keyframes gradMove{from{background-position:200% 0}to{background-position:-200% 0}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:calc(.85rem + env(safe-area-inset-top)) clamp(2rem,4vw,4rem) .85rem;padding-left:calc(clamp(2rem,4vw,4rem) + env(safe-area-inset-left));padding-right:calc(clamp(2rem,4vw,4rem) + env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;transition:all .5s cubic-bezier(.22,1,.36,1);background:#FFF8F0}
nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(229,139,64,.15),rgba(229,139,64,.25),rgba(229,139,64,.15),transparent);opacity:0;transition:opacity .5s}
nav.scrolled{background:rgba(255,248,240,.95)!important;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 4px 20px rgba(229,139,64,.06)}
nav.scrolled::after{opacity:1}
.nl{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--t);cursor:pointer}
.nl img{width:36px;height:36px;border-radius:10px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.nl:hover img{transform:rotate(-8deg) scale(1.05)}
.nl span{font-weight:700;font-size:1.15rem;letter-spacing:-.03em}
.nm{display:flex;align-items:center;gap:.3rem;list-style:none}
.nm a{text-decoration:none;color:var(--t);font-weight:500;font-size:.85rem;padding:.5rem 1rem;border-radius:100px;transition:all .25s;opacity:.55}
.nm a:hover{opacity:1;background:rgba(229,139,64,.06)}
.nm .nc{background:var(--o)!important;color:white!important;opacity:1!important;font-weight:600!important;padding:.55rem 1.4rem!important;box-shadow:0 2px 12px rgba(229,139,64,.2)}
.nm .nc:hover{transform:translateY(-1px)!important;box-shadow:0 6px 24px rgba(229,139,64,.3)!important;background:var(--od)!important}
@media(max-width:768px){.nm{display:none}}

/* BTNS */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.92rem;border-radius:14px;padding:.9rem 1.75rem;text-decoration:none;border:none;cursor:pointer;transition:all .35s cubic-bezier(.22,1,.36,1)}
.bf{background:var(--o);color:white;box-shadow:0 4px 20px rgba(229,139,64,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.bf:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(229,139,64,.35)}
.bg_{background:rgba(229,139,64,.06);color:var(--t);border:1.5px solid var(--b)}
.bg_:hover{border-color:var(--bh);background:rgba(229,139,64,.1);transform:translateY(-2px)}

/* ===== HERO — PATTERN BG + LOGO CENTERPIECE ===== */
.hero{min-height:100lvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem 2rem 4rem;position:relative;overflow:hidden;background:#FFF8F0!important}

/* Grid pattern */
.hero-pattern{position:absolute;inset:0;opacity:.06;background-image:
  linear-gradient(var(--o) 1px,transparent 1px),
  linear-gradient(90deg,var(--o) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);
  animation:patternDrift 20s linear infinite;
}
@keyframes patternDrift{from{background-position:0 0}to{background-position:60px 60px}}

/* Floating decorative dots */
.hero-dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hdot{position:absolute;border-radius:50%;background:var(--o);opacity:.1;animation:hdFloat var(--d,8s) ease-in-out infinite}
@keyframes hdFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(var(--dx,20px),var(--dy,-30px)) scale(1.1)}50%{transform:translate(calc(var(--dx,20px)*-1),var(--dy,-30px)) scale(.9)}75%{transform:translate(var(--dx,20px),calc(var(--dy,-30px)*-.5)) scale(1.05)}}

/* Radial glow */
.hero-glow{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(229,139,64,.12) 0%,rgba(229,139,64,.05) 40%,transparent 70%);pointer-events:none;animation:glowPulse 6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* Logo centerpiece */
.hero-logo-wrap{position:relative;margin-bottom:2.5rem;z-index:2}
.hero-logo{width:180px;height:180px;border-radius:28px;object-fit:contain;filter:drop-shadow(0 20px 60px rgba(229,139,64,.2)) drop-shadow(0 4px 12px rgba(229,139,64,.1));animation:logoEntrance 1s .1s cubic-bezier(.22,1,.36,1) both,logoBreathe 4s 1.5s ease-in-out infinite;position:relative;z-index:2}
@keyframes logoEntrance{from{opacity:0;transform:scale(.6) translateY(30px) rotate(-10deg)}to{opacity:1;transform:scale(1) translateY(0) rotate(0)}}
@keyframes logoBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}

/* Rings around logo */
.logo-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(229,139,64,.14);top:50%;left:50%;transform:translate(-50%,-50%);animation:ringPulse 3s ease-in-out infinite}
.logo-ring.r1{width:220px;height:220px;animation-delay:0s}
.logo-ring.r2{width:290px;height:290px;animation-delay:.5s;border-style:dashed}
.logo-ring.r3{width:370px;height:370px;animation-delay:1s;border-color:rgba(229,139,64,.08)}
@keyframes ringPulse{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.03)}}

/* Orbiting icons around logo */
.logo-orbit{position:absolute;top:50%;left:50%;width:290px;height:290px;margin:-145px 0 0 -145px;animation:spin 20s linear infinite}
.logo-orb-item{position:absolute;width:36px;height:36px;border-radius:50%;background:#FFF8F0;border:1px solid rgba(229,139,64,.1);display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:0 2px 12px rgba(229,139,64,.06);animation:spin 20s linear infinite reverse;transition:transform .3s}
.logo-orb-item:hover{transform:scale(1.3)}
.loi1{top:-18px;left:50%;margin-left:-18px}
.loi2{bottom:-18px;left:50%;margin-left:-18px}
.loi3{top:50%;right:-18px;margin-top:-18px}
.loi4{top:50%;left:-18px;margin-top:-18px}
.loi5{top:12%;right:12%}
.loi6{bottom:12%;left:12%}

/* Floating notification badges */
.fc{position:absolute;background:#FFF8F0!important;border-radius:14px;padding:.55rem .85rem;box-shadow:0 4px 24px rgba(229,139,64,.08);z-index:3;font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:.4rem;border:1px solid rgba(229,139,64,.08);white-space:nowrap;color:var(--t)!important}
.fc .em{font-size:.95rem}
.fc1{top:22%;left:8%;animation:fcA 7s ease-in-out infinite}
.fc2{top:18%;right:8%;animation:fcB 8s ease-in-out infinite}
.fc3{bottom:28%;left:12%;animation:fcC 6s ease-in-out infinite}
.fc4{bottom:24%;right:10%;animation:fcA 9s ease-in-out infinite .5s}
@keyframes fcA{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes fcB{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
@keyframes fcC{0%,100%{transform:translateY(0) rotate(.5deg)}50%{transform:translateY(-16px) rotate(-1deg)}}

.hero-content{position:relative;z-index:2;max-width:720px}
.htag{display:inline-flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--o);margin-bottom:1.25rem;opacity:0;animation:si .7s .6s cubic-bezier(.22,1,.36,1) forwards}
.htag .dot{width:7px;height:7px;background:var(--o);border-radius:50%;position:relative}
.htag .dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--o);animation:ping 2.5s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}75%,100%{transform:scale(2.2);opacity:0}}
.hero-content h1{font-size:clamp(2.6rem,5.5vw,4rem);font-weight:300;line-height:1.12;letter-spacing:-.035em;opacity:0;animation:si .7s .75s cubic-bezier(.22,1,.36,1) forwards}
.hero-content h1 strong{font-weight:800;font-family:'Playfair Display',serif;font-style:italic;background:linear-gradient(135deg,var(--o),var(--od));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdesc{font-size:1.05rem;color:var(--tl);line-height:1.75;margin-top:1.25rem;opacity:0;animation:si .7s .9s cubic-bezier(.22,1,.36,1) forwards}
.hbtns{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:2.25rem;opacity:0;animation:si .7s 1.05s cubic-bezier(.22,1,.36,1) forwards}
.hplat{margin-top:1.5rem;font-size:.72rem;color:var(--tm);font-weight:500;letter-spacing:.02em;opacity:0;animation:si .7s 1.2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes si{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* MARQUEE */
.marq{padding:2.5rem 0;border-top:1px solid var(--b);border-bottom:1px solid var(--b);overflow:hidden;background:#FFF8F0!important}
.mt{display:flex;gap:3rem;animation:ms 45s linear infinite;width:max-content}
.mt:hover{animation-play-state:paused}
@keyframes ms{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mi{display:flex;align-items:center;gap:.65rem;font-size:.82rem;font-weight:500;color:var(--tm);white-space:nowrap;flex-shrink:0;transition:color .3s}
.mi:hover{color:var(--o)}
.mid{width:5px;height:5px;border-radius:50%;background:var(--op)}

/* SECTION SHARED */
.si-wrap{max-width:620px}
.si-wrap.cen{text-align:center;margin-inline:auto}
.si-lab{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--o);font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.si-lab::before{content:'';width:20px;height:1.5px;background:var(--o)}
.cen .si-lab{justify-content:center}
.cen .si-lab::before{display:none}
.si-wrap h2{font-size:clamp(2rem,4vw,2.75rem);font-weight:300;letter-spacing:-.03em;line-height:1.2}
.si-wrap h2 em{font-family:'Playfair Display',serif;font-weight:700;font-style:italic;color:var(--o)}
.si-wrap>p{margin-top:1rem;color:var(--tl);line-height:1.7;font-size:1rem}

/* NUMBERS */
.numbers{padding:5rem 2rem;max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2rem}
.num-item{text-align:center;flex:1;min-width:120px}
.num-item .big{font-family:'Playfair Display',serif;font-size:clamp(3rem,5vw,4.5rem);font-weight:700;color:var(--o);letter-spacing:-.04em;line-height:1;opacity:0;transition:all .8s cubic-bezier(.22,1,.36,1)}
.num-item.counted .big{opacity:1}
.num-item .big:hover{transform:scale(1.08)}
.num-item .sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tm);font-weight:600;margin-top:.5rem}
.num-sep{width:1px;height:60px;background:linear-gradient(to bottom,transparent,var(--op),transparent);flex:0 0 1px;align-self:center}

/* FEATURES */
/* ===== FEATURES SECTION ===== */
.feat-section{padding:5rem 2rem 3rem;max-width:1300px;margin:0 auto}
.feat-row{display:grid;grid-template-columns:2fr 3fr;gap:4rem;align-items:center;padding:4rem 0}
.feat-row + .feat-row,.feat-row + .feat-highlight,.feat-highlight + .feat-row{border-top:1px solid var(--b)}
.feat-row.flip .feat-text{order:2}.feat-row.flip .feat-viz{order:1}
.feat-text .ft-num{font-family:'Playfair Display',serif;font-size:5rem;font-weight:700;color:rgba(229,139,64,.07);line-height:1;letter-spacing:-.05em;margin-bottom:-.5rem;transition:color .5s}
.feat-row:hover .ft-num,.feat-highlight:hover .ft-num{color:rgba(229,139,64,.12)}
.feat-text h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.65rem}
.feat-text p{font-size:.92rem;color:var(--tl);line-height:1.7}
.feat-text .ft-tags,.fh-header .ft-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:1rem}
.feat-text .ft-tag,.fh-header .ft-tag{padding:.3rem .65rem;border-radius:100px;font-size:.65rem;font-weight:600;color:var(--o);border:1px solid rgba(229,139,64,.15);background:rgba(229,139,64,.04);transition:all .3s}
.feat-row:hover .ft-tag,.feat-highlight:hover .ft-tag{background:rgba(229,139,64,.08);border-color:rgba(229,139,64,.2)}

/* — 01: Dashboard cards with sparklines — */
.dash-viz{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.dv-item{padding:1.2rem 1rem .9rem;border-radius:14px;border:1px solid var(--b);background:rgba(229,139,64,.02);text-align:center;transition:all .4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.dv-item:hover{border-color:var(--bh);transform:translateY(-4px);box-shadow:0 16px 40px rgba(229,139,64,.06)}
.dv-spark{position:absolute;bottom:0;left:0;width:100%;height:24px;opacity:.5}
.dv-val{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--o);position:relative}
.dv-lab{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tm);margin-top:.15rem;font-weight:600;position:relative}

/* — 01v2: Dashboard v2 — */
.dash-viz-v2{display:flex;flex-direction:column;gap:.6rem;border:1px solid var(--b);border-radius:18px;padding:1.2rem;background:rgba(229,139,64,.015);max-width:460px;margin-left:auto;font-family:'Outfit',sans-serif}
.dv2-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}
.dv2-status{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--tl)}
.dv2-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2);flex-shrink:0}
.dv2-badge{margin-left:auto;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#22c55e;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);padding:.2rem .55rem;border-radius:100px}
.dv2-orders-mgmt{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:10px;background:rgba(229,139,64,.04);border:1px solid var(--b);cursor:default}
.dv2-orders-icon{width:26px;height:26px;border-radius:7px;background:rgba(229,139,64,.1);display:flex;align-items:center;justify-content:center;color:var(--o);flex-shrink:0}
.dv2-orders-title{font-size:.78rem;font-weight:600;color:var(--tl);flex:1}
.dv2-chevron{color:var(--tm);flex-shrink:0}
.dv2-actions{display:flex;gap:.5rem}
.dv2-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:8px;font-size:.72rem;font-weight:600;cursor:default;transition:all .25s}
.dv2-btn-primary{background:var(--o);color:#fff}
.dv2-btn-secondary{background:rgba(229,139,64,.08);border:1px solid rgba(229,139,64,.2);color:var(--o)}
.dv2-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.dv2-card{padding:.75rem;border-radius:12px;border:1px solid var(--b);background:var(--cream);transition:all .3s}
.dv2-card:hover{border-color:var(--bh);transform:translateY(-2px);box-shadow:0 8px 24px rgba(229,139,64,.06)}
.dv2-card-top{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.dv2-card-icon{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dv2-revenue{background:rgba(229,139,64,.12);color:var(--o)}
.dv2-orders-i{background:rgba(99,102,241,.1);color:#6366f1}
.dv2-customers{background:rgba(34,197,94,.1);color:#16a34a}
.dv2-rate{background:rgba(234,179,8,.1);color:#ca8a04}
.dv2-card-label{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tm)}
.dv2-card-bottom{display:flex;align-items:baseline;gap:.4rem}
.dv2-card-val{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--tl)}
.dv2-trend{font-size:.65rem;font-weight:700;padding:.15rem .4rem;border-radius:6px}
.dv2-trend.up{color:#16a34a;background:rgba(34,197,94,.08)}
.dv2-trend.neutral{color:var(--tm);background:rgba(0,0,0,.04)}
.dv2-channels{border-radius:12px;border:1px solid var(--b);overflow:hidden}
.dv2-ch-header{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:rgba(229,139,64,.03);cursor:default}
.dv2-ch-icons{display:flex;gap:.2rem;font-size:.85rem}
.dv2-ch-count{font-size:.7rem;font-weight:700;color:var(--o);margin-left:auto}
.dv2-ch-arrow{color:var(--tm)}
.dv2-ch-notice{display:flex;align-items:flex-start;gap:.4rem;padding:.45rem .8rem;background:rgba(99,102,241,.03);border-top:1px solid var(--b);font-size:.62rem;color:var(--tm);line-height:1.5}
.dv2-ch-notice svg{flex-shrink:0;margin-top:.1rem;color:#6366f1}
.dv2-ch-list{display:flex;flex-direction:column}
.dv2-ch-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-top:1px solid var(--b);transition:background .2s}
.dv2-ch-item:hover{background:rgba(229,139,64,.02)}
.dv2-ch-indent{padding-left:1.6rem}
.dv2-ch-icon-wrap{font-size:1rem;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dv2-ch-rest{background:rgba(229,139,64,.08)}
.dv2-ch-online{background:rgba(99,102,241,.08)}
.dv2-ch-delivery{background:rgba(239,68,68,.08)}
.dv2-ch-onsite{background:rgba(34,197,94,.08)}
.dv2-ch-info{flex:1}
.dv2-ch-name{font-size:.78rem;font-weight:600;color:var(--tl);display:block}
.dv2-ch-desc{font-size:.62rem;color:var(--tm)}
.dv2-toggle{width:34px;height:20px;border-radius:100px;background:rgba(0,0,0,.1);position:relative;flex-shrink:0;transition:background .25s}
.dv2-toggle.on{background:var(--o)}
.dv2-toggle-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .25s}
.dv2-toggle.on .dv2-toggle-knob{transform:translateX(14px)}

/* — 02: Enhanced Timeline — */
.tl-viz{display:flex;flex-direction:column;padding-left:2rem;position:relative}
.tl-viz::before{content:'';position:absolute;left:7px;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(to bottom,var(--o),rgba(229,139,64,.2))}
.tl-step{display:flex;align-items:center;gap:1rem;padding:1rem 0;transition:all .3s}
.tl-step:hover{padding-left:.5rem}
.tl-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-left:-2rem;z-index:1;border:3px solid var(--cream);transition:all .4s;position:relative}
.tl-dot.active{background:var(--o);box-shadow:0 0 0 4px rgba(229,139,64,.1)}
.tl-dot.pending{background:rgba(229,139,64,.3);border-color:rgba(229,139,64,.15);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,139,64,.15)}50%{box-shadow:0 0 0 8px rgba(229,139,64,.08)}}
.tl-step:hover .tl-dot{transform:scale(1.3)}
.tl-info{flex:1}
.tl-info .tl-name{font-weight:700;font-size:.9rem}
.tl-info .tl-time{font-size:.72rem;color:var(--tm)}
.tl-badge{font-size:.6rem;font-weight:700;color:var(--o);background:rgba(229,139,64,.06);padding:.25rem .6rem;border-radius:100px;flex-shrink:0;letter-spacing:.03em}
.tl-badge.pulse{background:rgba(229,139,64,.12);animation:badgePulse 2s ease-in-out infinite}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.5}}

/* — 03: Chat mockup — */
.chat-viz{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;border:1px solid var(--b);border-radius:18px;background:rgba(229,139,64,.015);max-width:480px;margin-left:auto}
.chat-bubble{display:flex;gap:.6rem;align-items:flex-start;opacity:0;transform:translateY(10px);transition:all .4s ease}
.chat-bubble.show{opacity:1;transform:translateY(0)}
.chat-bubble.user{flex-direction:row-reverse}
.chat-avatar{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:white;background:var(--o);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-bubble.ai .chat-avatar{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.chat-msg{font-size:.82rem;line-height:1.6;padding:.7rem 1rem;border-radius:14px;max-width:85%}
.chat-bubble.user .chat-msg{background:rgba(229,139,64,.08);border-bottom-right-radius:4px;color:var(--tl)}
.chat-bubble.ai .chat-msg{background:rgba(99,102,241,.06);border-bottom-left-radius:4px}
.chat-bubble.user .chat-avatar{display:none}
.chat-bubble.user:first-child .chat-avatar{display:flex}
.chat-typing{display:flex;gap:4px;padding:.5rem 1rem;align-items:center;opacity:0;transition:opacity .3s}
.chat-typing.show{opacity:1}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:rgba(99,102,241,.3);animation:chatDot 1.4s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes chatDot{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-6px);opacity:1}}

/* — 04: Content generation grid — */
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.cg-card{border:1px solid var(--b);border-radius:14px;overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1);cursor:default}
.cg-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(229,139,64,.06);border-color:var(--bh)}
.cg-preview{padding:1rem;min-height:100px;display:flex;flex-direction:column;gap:.4rem;background:rgba(229,139,64,.015)}
.cg-mock-header{height:8px;width:50%;border-radius:4px;background:var(--o);opacity:.25}
.cg-mock-row{height:5px;width:100%;border-radius:3px;background:rgba(229,139,64,.1)}
.cg-mock-row.short{width:65%}
.cg-mock-img{height:48px;border-radius:8px;background:linear-gradient(135deg,rgba(229,139,64,.12),rgba(229,139,64,.04))}
.cg-mock-img.tall{height:60px}
.cg-mock-title{height:7px;width:60%;border-radius:4px;background:rgba(229,139,64,.15)}
.cg-mock-title.wide{width:80%;margin:0 auto}
.cg-mock-btn{height:18px;width:50%;border-radius:100px;background:var(--o);opacity:.2;margin-top:auto}
.cg-mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;margin-top:.4rem}
.cg-mock-grid div{height:32px;border-radius:6px;background:rgba(229,139,64,.07)}
.cg-label{padding:.55rem .75rem;font-size:.72rem;font-weight:700;color:var(--tl);text-align:center;letter-spacing:.02em}

/* — 05: Delivery Pipeline (standout full-width) — */
.feat-highlight{padding:4rem 0;text-align:center}
.fh-header{max-width:600px;margin:0 auto 2.5rem}
.fh-header .ft-num{font-family:'Playfair Display',serif;font-size:5rem;font-weight:700;color:rgba(229,139,64,.07);line-height:1;letter-spacing:-.05em;margin-bottom:-.5rem}
.fh-header h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}
.fh-header p{font-size:.92rem;color:var(--tl);line-height:1.7}
.fh-header .ft-tags{justify-content:center}

/* — 05v2: Delivery Pipeline Flow — */
.dp2-flow{display:flex;align-items:center;justify-content:center;gap:0;padding:2.5rem 0 1rem;position:relative}
.dp2-step{display:flex;align-items:center;flex:1;max-width:180px;position:relative}
.dp2-card{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:1.6rem 1rem 1.2rem;border-radius:20px;border:1.5px solid var(--b);background:var(--cream);width:100%;transition:all .5s cubic-bezier(.22,1,.36,1);opacity:0;transform:translateY(28px);box-shadow:0 2px 8px rgba(229,139,64,.04)}
.feat-highlight.vis .dp2-card{opacity:1;transform:translateY(0)}
.dp2-step[data-step="0"] .dp2-card{transition-delay:.05s}
.dp2-step[data-step="1"] .dp2-card{transition-delay:.18s}
.dp2-step[data-step="2"] .dp2-card{transition-delay:.31s}
.dp2-step[data-step="3"] .dp2-card{transition-delay:.44s}
.dp2-step[data-step="4"] .dp2-card{transition-delay:.57s}
.dp2-step[data-step="5"] .dp2-card{transition-delay:.70s}
.dp2-card:hover{border-color:var(--o);transform:translateY(-6px);box-shadow:0 20px 40px rgba(229,139,64,.12)}
.dp2-step-live .dp2-card{border-color:rgba(229,139,64,.3);background:rgba(229,139,64,.025)}
.dp2-step-done .dp2-card{border-color:rgba(229,139,64,.4);background:linear-gradient(145deg,rgba(229,139,64,.06),rgba(229,139,64,.02))}
.dp2-icon-wrap{width:52px;height:52px;border-radius:16px;background:rgba(229,139,64,.07);border:1px solid rgba(229,139,64,.12);display:flex;align-items:center;justify-content:center;margin-bottom:.6rem;transition:all .4s}
.dp2-card:hover .dp2-icon-wrap{background:rgba(229,139,64,.12);transform:scale(1.1) rotate(-4deg)}
.dp2-emoji{font-size:1.5rem;line-height:1}
.dp2-step-live .dp2-icon-wrap{background:rgba(229,139,64,.1);animation:dp2IconPulse 2.5s ease-in-out infinite}
@keyframes dp2IconPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,139,64,.15)}50%{box-shadow:0 0 0 8px rgba(229,139,64,.08)}}
.dp2-step-done .dp2-icon-wrap{background:rgba(229,139,64,.12)}
.dp2-step-num{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--o);opacity:.7;margin-bottom:.2rem}
.dp2-label{font-size:.82rem;font-weight:700;color:var(--tl);letter-spacing:-.01em;line-height:1.3}
.dp2-sub{font-size:.62rem;color:var(--tm);margin-top:.25rem;line-height:1.4}
.dp2-live-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.5rem;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--o);padding:.2rem .55rem;border-radius:100px;white-space:nowrap;box-shadow:0 2px 8px rgba(229,139,64,.35);animation:dp2LivePulse 1.8s ease-in-out infinite}
@keyframes dp2LivePulse{0%,100%{opacity:1;box-shadow:0 2px 8px rgba(229,139,64,.35)}50%{opacity:.75;box-shadow:0 2px 16px rgba(229,139,64,.6)}}
.dp2-connector{flex-shrink:0;width:32px;display:flex;align-items:center;justify-content:center;position:relative;opacity:0;transition:opacity .4s ease}
.feat-highlight.vis .dp2-connector{opacity:1}
.dp2-step[data-step="0"] .dp2-connector{transition-delay:.25s}
.dp2-step[data-step="1"] .dp2-connector{transition-delay:.38s}
.dp2-step[data-step="2"] .dp2-connector{transition-delay:.51s}
.dp2-step[data-step="3"] .dp2-connector{transition-delay:.64s}
.dp2-step[data-step="4"] .dp2-connector{transition-delay:.77s}
.dp2-line{width:100%;height:2px;background:linear-gradient(90deg,rgba(229,139,64,.3),rgba(229,139,64,.6));position:relative;overflow:hidden;border-radius:2px}
.dp2-line::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:dp2Shimmer 2.2s ease-in-out infinite}
.feat-highlight.vis .dp2-step[data-step="0"] .dp2-line::after{animation-delay:.4s}
.feat-highlight.vis .dp2-step[data-step="1"] .dp2-line::after{animation-delay:.8s}
.feat-highlight.vis .dp2-step[data-step="2"] .dp2-line::after{animation-delay:1.2s}
.feat-highlight.vis .dp2-step[data-step="3"] .dp2-line::after{animation-delay:1.6s}
.feat-highlight.vis .dp2-step[data-step="4"] .dp2-line::after{animation-delay:2.0s}
@keyframes dp2Shimmer{0%{left:-100%}100%{left:200%}}
.dp2-arrow{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(229,139,64,.55);margin-left:-1px;flex-shrink:0}

/* — 06: Menu cards with QR — */
.menu-cards{display:flex;flex-direction:column;gap:.5rem}
.mc-item{display:flex;align-items:center;gap:.85rem;padding:.75rem 1rem;border:1px solid var(--b);border-radius:12px;transition:all .3s cubic-bezier(.22,1,.36,1);cursor:default}
.mc-item:hover{border-color:var(--bh);transform:translateX(4px);box-shadow:0 8px 24px rgba(229,139,64,.04)}
.mc-img{font-size:1.6rem;width:42px;height:42px;border-radius:10px;background:rgba(229,139,64,.04);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-info{flex:1}
.mc-name{font-weight:600;font-size:.85rem}
.mc-price{font-size:.72rem;color:var(--o);font-weight:700}
.mc-drag{color:rgba(229,139,64,.2);font-size:.8rem;letter-spacing:2px;cursor:grab;transition:color .3s}
.mc-item:hover .mc-drag{color:var(--o)}
.mc-qr{display:flex;align-items:center;gap:1rem;padding:1rem;margin-top:.5rem;border:1px dashed rgba(229,139,64,.15);border-radius:12px;background:rgba(229,139,64,.015)}
.mc-qr-box{flex-shrink:0}
.mc-qr-label{font-size:.75rem;font-weight:600;color:var(--tl)}

/* CLIENT EXPERIENCE v2 */
.cx{padding:6rem 2rem;max-width:1400px;margin:0 auto;position:relative;overflow:hidden}

/* Platform switcher tabs */
.cx-switch{display:flex;justify-content:center;gap:.35rem;margin:2.5rem auto 3.5rem;background:rgba(229,139,64,.04);border-radius:100px;padding:.3rem;max-width:420px;border:1px solid var(--b)}
.cx-tab{flex:1;padding:.7rem 1.5rem;border-radius:100px;font-size:.82rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;text-align:center;transition:all .4s cubic-bezier(.22,1,.36,1);color:var(--tl);border:none;background:none;display:flex;align-items:center;justify-content:center;gap:.4rem}
.cx-tab.active{background:var(--o);color:white;box-shadow:0 4px 16px rgba(229,139,64,.25)}
.cx-tab:not(.active):hover{color:var(--t);background:rgba(229,139,64,.06)}
.cx-tab-icon{font-size:1rem}

/* Panel layout */
.cx-panel{display:none;animation:cxFadeIn .5s ease-out}
.cx-panel.active{display:block}
.cx-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}

/* ── Dynamic Visual Panel ── */
.cx-visual-panel{position:sticky;top:5.5rem;align-self:start;min-height:420px}
.cx-vis{display:none;animation:cxFadeIn .4s ease-out}
.cx-vis.active{display:flex;flex-direction:column;gap:1rem}
.cx-vis-header{display:flex;align-items:center;gap:.85rem;margin-bottom:.25rem}
.cx-vis-emoji{font-size:1.8rem;width:52px;height:52px;border-radius:16px;background:rgba(229,139,64,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cx-vis-header h4{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.15rem}
.cx-vis-header p{font-size:.75rem;color:var(--tm)}
.cx-vis-header-tg .cx-vis-emoji{background:rgba(42,171,238,.08)}

/* Visual cards */
.cx-vis-cards{display:flex;flex-direction:column;gap:.55rem}
.cx-vc{border-radius:14px;border:1px solid var(--b);background:white;padding:.85rem 1rem;transition:all .3s cubic-bezier(.22,1,.36,1);font-size:.8rem}
.cx-vc:hover{border-color:var(--bh);transform:translateY(-2px);box-shadow:0 8px 24px rgba(229,139,64,.06)}

/* Hero banner card */
.cx-vc-hero,.cx-vc-banner{background:linear-gradient(135deg,var(--o),var(--ol));color:white;border:none}
.cx-vc-banner-red{background:linear-gradient(135deg,#ef4444,#f97316)}
.cx-vc-banner-orange{background:linear-gradient(135deg,var(--o),#f59e0b)}
.cx-vc-label{font-size:.88rem;font-weight:700;margin-bottom:.2rem}
.cx-vc-sub{font-size:.7rem;opacity:.88}
.cx-vc-tag{display:inline-block;background:rgba(255,255,255,.2);padding:.2rem .55rem;border-radius:8px;font-size:.55rem;font-weight:600;margin-top:.5rem}
.cx-vc-tag-red{background:rgba(255,255,255,.2)}

/* Item row card */
.cx-vc-item,.cx-vc-spotlight{display:flex;align-items:center;gap:.65rem}
.cx-vc-icon{width:38px;height:38px;border-radius:10px;background:rgba(229,139,64,.06);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.cx-vc-info{flex:1}
.cx-vc-name{font-size:.78rem;font-weight:600;margin-bottom:.1rem}
.cx-vc-price{font-size:.7rem;color:var(--o);font-weight:700}
.cx-vc-add{width:26px;height:26px;border-radius:50%;background:var(--o);color:white;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:default}

/* Search bar card */
.cx-vc-search{color:var(--tm);font-size:.75rem;background:rgba(229,139,64,.025)}

/* Profile card */
.cx-vc-profile{display:flex;align-items:center;gap:.75rem;background:rgba(229,139,64,.02)}
.cx-vc-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--o),var(--ol));color:white;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cx-vc-avatar-tg{background:linear-gradient(135deg,#2AABEE,#229ED9)}

/* Row card */
.cx-vc-row{display:flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:500}
.cx-vc-right{margin-left:auto;font-size:.68rem;color:var(--o);font-weight:600}
.cx-vc-right-g{color:#16a34a}
.cx-vc-row-active{border-color:rgba(229,139,64,.25);background:rgba(229,139,64,.03)}
.cx-vc-row-dim{opacity:.45}

/* AI chat card */
.cx-vc-ai-chat{background:rgba(156,39,176,.025);border-color:rgba(156,39,176,.1);display:flex;flex-direction:column;gap:.5rem;padding:1rem}
.cx-vc-ai-bubble{display:flex;align-items:flex-start;gap:.5rem;font-size:.76rem;line-height:1.55;padding:.55rem .75rem;background:white;border-radius:12px;border:1px solid rgba(156,39,176,.08)}
.cx-vc-ai-dot{font-size:.9rem;flex-shrink:0}
.cx-vc-ai-typing{display:flex;gap:4px;padding:.35rem .75rem;align-items:center}
.cx-vc-ai-typing span{width:6px;height:6px;border-radius:50%;background:#9c27b0;opacity:.3;animation:chatDot 1.4s ease-in-out infinite}
.cx-vc-ai-typing span:nth-child(2){animation-delay:.2s}
.cx-vc-ai-typing span:nth-child(3){animation-delay:.4s}

/* Info card */
.cx-vc-info-card{display:flex;flex-direction:column;gap:.4rem;background:rgba(33,150,243,.02);border-color:rgba(33,150,243,.1)}
.cx-vc-info-row{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--tl)}
.cx-vc-hours{display:flex;flex-direction:column;gap:.3rem;padding:.85rem 1rem}
.cx-vc-hour-row{display:flex;justify-content:space-between;font-size:.72rem;color:var(--tl)}
.cx-vc-hour-row.open{color:var(--t);font-weight:600}
.cx-vc-open-dot{color:#16a34a;font-size:.65rem}
.cx-vc-delivery-info{display:flex;justify-content:space-around;background:rgba(0,150,136,.02);border-color:rgba(0,150,136,.1)}
.cx-vc-di-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.7rem}
.cx-vc-di-item span{font-size:1.1rem}
.cx-vc-di-item strong{font-size:.82rem;font-weight:700;color:var(--tl)}
.cx-vc-di-item small{color:var(--tm);font-size:.6rem}

/* Tracking card */
.cx-vc-track{padding:0;overflow:hidden}
.cx-vc-track-map{height:110px;background:linear-gradient(135deg,#f0f4f8,#e8edf2);position:relative;overflow:hidden}
.cx-vc-track-road{position:absolute;background:rgba(0,0,0,.06);border-radius:2px}
.cx-vc-track-road-h{height:3px;width:100%;top:50%;transform:translateY(-50%)}
.cx-vc-track-road-v{width:3px;height:100%;left:40%}
.cx-vc-track-pin{position:absolute;font-size:1.2rem;top:20%;right:25%}
.cx-vc-track-driver{position:absolute;font-size:1.1rem;top:42%;left:15%;animation:driverMove 3s ease-in-out infinite}
@keyframes driverMove{0%,100%{left:15%}50%{left:25%}}
.cx-vc-track-status{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;font-size:.72rem;color:var(--tl)}
.cx-vc-live-badge{font-size:.55rem;font-weight:800;letter-spacing:.08em;color:white;background:var(--o);padding:.2rem .5rem;border-radius:100px;animation:dp2LivePulse 1.8s ease-in-out infinite;white-space:nowrap}

/* Telegram chat card (visual panel) */
.cx-vc-tg-chat{background:linear-gradient(180deg,#EDF4FE,#F5F7FA);border-color:rgba(42,171,238,.15);display:flex;flex-direction:column;gap:.4rem;padding:.85rem}
.cx-tg-bubble{padding:.55rem .75rem;border-radius:12px;font-size:.74rem;line-height:1.55;max-width:90%}
.cx-tg-bubble.bot{background:white;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.cx-tg-bubble.user{background:#E3F2FD;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.cx-tg-name{display:block;font-size:.56rem;font-weight:700;color:#2AABEE;margin-bottom:.15rem}
.cx-tg-btns{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
.cx-tg-btns span{padding:.25rem .55rem;border-radius:7px;background:rgba(42,171,238,.07);color:#2AABEE;font-size:.58rem;font-weight:600;border:1px solid rgba(42,171,238,.12);cursor:default}
.cx-tg-typing{display:flex;gap:3px;padding:.3rem .75rem;align-items:center}
.cx-tg-typing span{width:5px;height:5px;border-radius:50%;background:#2AABEE;opacity:.35;animation:tgDot 1.2s ease-in-out infinite}
.cx-tg-typing span:nth-child(2){animation-delay:.15s}
.cx-tg-typing span:nth-child(3){animation-delay:.3s}

/* Telegram cart */
.cx-vc-tg-cart{background:rgba(42,171,238,.02);border-color:rgba(42,171,238,.15)}
.cx-vc-cart-title{font-size:.8rem;font-weight:700;color:#2AABEE;margin-bottom:.5rem}
.cx-vc-cart-row{display:flex;justify-content:space-between;font-size:.74rem;color:var(--tl);padding:.2rem 0}
.cx-vc-cart-divider{height:1px;background:var(--b);margin:.4rem 0}
.cx-vc-cart-total{font-weight:700;color:var(--t)}

/* Notification cards */
.cx-vc-notif{display:flex;align-items:center;gap:.7rem;font-size:.78rem}
.cx-vc-notif span:first-child{font-size:1.2rem;flex-shrink:0}
.cx-vc-notif div{flex:1}
.cx-vc-notif strong{display:block;font-weight:600;font-size:.78rem}
.cx-vc-notif small{font-size:.65rem;color:var(--tm)}
.cx-vc-time{font-size:.6rem;color:var(--tm);white-space:nowrap}
.cx-vc-notif-active{border-color:rgba(229,139,64,.25);background:rgba(229,139,64,.03)}
.cx-vc-notif-dim{opacity:.4}

/* Screen: Profile */
.cxs-profile-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--b)}
.cxs-profile-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--o),var(--ol));display:flex;align-items:center;justify-content:center;color:white;font-size:1rem;font-weight:700}
.cxs-profile-info h4{font-size:.82rem;font-weight:700;margin-bottom:.15rem}
.cxs-profile-info p{font-size:.6rem;color:var(--tm)}
.cxs-profile-menu{display:flex;flex-direction:column;gap:.35rem}
.cxs-profile-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:12px;border:1px solid var(--b);font-size:.7rem;font-weight:500;transition:all .3s;cursor:pointer}
.cxs-profile-row:hover{border-color:var(--bh);background:rgba(229,139,64,.02)}
.cxs-profile-row span:first-child{font-size:.85rem}
.cxs-profile-row span:last-child{margin-left:auto;color:var(--op);font-size:.6rem}

/* Screen: Info */
.cxs-info-card{border-radius:14px;border:1px solid var(--b);overflow:hidden;margin-bottom:.6rem}
.cxs-info-card-head{padding:.7rem .8rem;background:rgba(229,139,64,.03);display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700}
.cxs-info-card-head span{font-size:.8rem}
.cxs-info-body{padding:.6rem .8rem}
.cxs-info-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;font-size:.65rem;color:var(--tl)}
.cxs-info-row strong{color:var(--t);font-weight:600}
.cxs-hrs{display:flex;flex-direction:column;gap:.25rem}
.cxs-hr{display:flex;justify-content:space-between;font-size:.6rem;padding:.25rem 0}
.cxs-hr .day{font-weight:600;color:var(--t)}
.cxs-hr .time{color:var(--tm)}
.cxs-hr.open .time{color:#4caf50;font-weight:600}

/* Telegram chat card — now lives inside phone frame */
.cx-tg-card{background:transparent;border-radius:0;overflow:hidden;border:none;box-shadow:none}
.cx-phone-screen-tg .tg-body{min-height:380px}
.tg-header{background:linear-gradient(135deg,#2AABEE,#229ED9);padding:1rem 1.2rem;display:flex;align-items:center;gap:.6rem;color:white}
.tg-header-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1rem}
.tg-header-info h4{font-size:.82rem;font-weight:600;margin-bottom:.08rem}
.tg-header-info p{font-size:.58rem;opacity:.8}
.tg-body{background:linear-gradient(180deg,#EDF4FE,#F5F7FA);padding:1rem;min-height:340px;display:flex;flex-direction:column;gap:.5rem}
.tg-msg{max-width:85%;padding:.65rem .85rem;border-radius:14px;font-size:.75rem;line-height:1.55;position:relative}
.tg-msg.bot{background:white;border-bottom-left-radius:4px;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.tg-msg.user{background:#E3F2FD;border-bottom-right-radius:4px;align-self:flex-end;color:var(--t);font-weight:500}
.tg-msg .tg-name{font-weight:700;font-size:.58rem;color:#2AABEE;margin-bottom:.15rem;display:block}
.tg-msg .tg-time{font-size:.48rem;color:#999;text-align:right;margin-top:.25rem}
.tg-buttons{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.tg-btn{padding:.35rem .65rem;border-radius:8px;background:rgba(42,171,238,.07);color:#2AABEE;font-size:.58rem;font-weight:600;border:1px solid rgba(42,171,238,.12);cursor:pointer;transition:all .2s}
.tg-btn:hover{background:rgba(42,171,238,.14)}
.tg-input{background:white;padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem;border-top:1px solid #e8e8e8}
.tg-input span{font-size:.65rem;color:#999;flex:1}
.tg-input-send{width:28px;height:28px;border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center;color:white;font-size:.7rem}
.tg-typing{display:flex;gap:3px;padding:.5rem .85rem;align-self:flex-start}
.tg-typing span{width:5px;height:5px;border-radius:50%;background:#2AABEE;opacity:.4;animation:tgDot 1.2s ease-in-out infinite}
.tg-typing span:nth-child(2){animation-delay:.15s}
.tg-typing span:nth-child(3){animation-delay:.3s}
@keyframes tgDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* Feature categories (accordion) */
.cx-features{display:flex;flex-direction:column;gap:.6rem}
.cx-fcat{border-radius:18px;border:1px solid var(--b);overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1);background:rgba(255,255,255,.6)}
.cx-fcat:hover{border-color:var(--bh);box-shadow:0 8px 32px rgba(229,139,64,.06);transform:translateY(-2px)}
.cx-fcat.open{border-color:rgba(229,139,64,.2);box-shadow:0 4px 20px rgba(229,139,64,.06)}
.cx-fcat-head{display:flex;align-items:center;gap:.85rem;padding:1.1rem 1.3rem;cursor:pointer;transition:all .3s;user-select:none}
.cx-fcat-head:hover{background:rgba(229,139,64,.015)}
.cx-fcat-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.cx-fcat-icon.ic-menu{background:rgba(229,139,64,.08)}
.cx-fcat-icon.ic-account{background:rgba(76,175,80,.08)}
.cx-fcat-icon.ic-ai{background:rgba(156,39,176,.08)}
.cx-fcat-icon.ic-info{background:rgba(33,150,243,.08)}
.cx-fcat-icon.ic-offers{background:rgba(255,87,34,.08)}
.cx-fcat-icon.ic-track{background:rgba(0,150,136,.08)}
.cx-fcat-icon.ic-order{background:rgba(255,152,0,.08)}
.cx-fcat-icon.ic-lang{background:rgba(63,81,181,.08)}
.cx-fcat-icon.ic-bot{background:rgba(96,125,139,.08)}
.cx-fcat-title{flex:1}
.cx-fcat-title h4{font-size:.85rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.1rem}
.cx-fcat-title span{font-size:.62rem;color:var(--tm)}
.cx-fcat-count{font-size:.55rem;font-weight:600;color:var(--o);background:rgba(229,139,64,.08);padding:.2rem .5rem;border-radius:100px}
.cx-fcat-arrow{color:var(--op);font-size:.7rem;transition:transform .3s;margin-left:.25rem}
.cx-fcat.open .cx-fcat-arrow{transform:rotate(180deg)}
.cx-fcat-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.cx-fcat.open .cx-fcat-body{grid-template-rows:1fr}
.cx-fcat-body>*{overflow:hidden}
.cx-fcat-list{padding:.25rem 1.25rem 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.cx-fi{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:500;padding:.4rem .5rem;border-radius:8px;transition:all .3s;cursor:default}
.cx-fi:hover{background:rgba(229,139,64,.04);padding-left:.75rem}
.cx-fi-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.cx-fi-dot.dot-o{background:var(--o)}
.cx-fi-dot.dot-g{background:#4caf50}
.cx-fi-dot.dot-p{background:#9c27b0}
.cx-fi-dot.dot-b{background:#2196f3}
.cx-fi-dot.dot-r{background:#ff5722}
.cx-fi-dot.dot-t{background:#009688}
.cx-fi-dot.dot-i{background:#3f51b5}
.cx-fi-dot.dot-s{background:#607d8b}
.cx-fi-tag{font-size:.45rem;font-weight:600;padding:.1rem .3rem;border-radius:4px;margin-left:auto;flex-shrink:0}
.cx-fi-tag.tag-ai{background:rgba(156,39,176,.08);color:#9c27b0}
.cx-fi-tag.tag-new{background:rgba(76,175,80,.08);color:#4caf50}
.cx-fi-tag.tag-live{background:rgba(229,139,64,.08);color:var(--o)}

/* Bottom highlights strip */
.cx-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem;padding:2rem 0;border-top:1px solid var(--b)}
.cx-hl{text-align:center;padding:1.5rem 1rem;border-radius:16px;transition:all .3s}
.cx-hl:hover{background:rgba(229,139,64,.03);transform:translateY(-2px)}
.cx-hl-icon{font-size:1.5rem;margin-bottom:.5rem;display:block}
.cx-hl-val{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.2rem;font-family:'Playfair Display',serif;color:var(--o)}
.cx-hl-label{font-size:.6rem;color:var(--tm);text-transform:uppercase;letter-spacing:.08em;font-weight:500}

@keyframes cxFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cxSlideIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* HOW */
.how{padding:6rem 2rem;max-width:1300px;margin:0 auto}
.how-track{display:flex;align-items:flex-start;position:relative;margin-top:3rem}
.how-track::before{content:'';position:absolute;top:24px;left:24px;right:24px;height:2px;background:repeating-linear-gradient(90deg,var(--op) 0,var(--op) 6px,transparent 6px,transparent 12px)}
.how-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.how-dot{width:48px;height:48px;border-radius:50%;background:var(--cream);border:2px solid var(--op);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;color:var(--o);margin-bottom:1.25rem;transition:all .5s cubic-bezier(.22,1,.36,1)}
.how-step:hover .how-dot{background:var(--o);color:white;border-color:var(--o);transform:scale(1.15);box-shadow:0 8px 24px rgba(229,139,64,.2)}
.how-step h4{font-weight:700;font-size:.92rem;margin-bottom:.35rem;transition:color .3s}
.how-step:hover h4{color:var(--o)}
.how-step p{font-size:.78rem;color:var(--tl);line-height:1.55;max-width:180px}

/* HOW IT WORKS — new hiw layout */
.hiw-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;margin-top:3.5rem;padding:0 1rem}

/* Step cards */
.hiw-step{position:relative;display:flex;flex-direction:column;align-items:stretch}
.hiw-step-inner{background:#fff;border:1.5px solid var(--b);border-radius:24px;padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 4px 24px rgba(0,0,0,.04);transition:box-shadow .4s,transform .4s}
.hiw-step:hover .hiw-step-inner{box-shadow:0 12px 40px rgba(229,139,64,.1);transform:translateY(-4px)}
.hiw-num{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:700;color:var(--o);opacity:.18;line-height:1;margin-bottom:-.25rem}
.hiw-icon-wrap{width:52px;height:52px;border-radius:16px;background:rgba(229,139,64,.08);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.hiw-icon-contact{background:rgba(99,179,237,.1)}
.hiw-icon-setup{background:rgba(229,139,64,.1)}
.hiw-icon-go{background:rgba(72,187,120,.1)}
.hiw-step-inner h3{font-size:1.2rem;font-weight:700;margin:0;line-height:1.3}
.hiw-step-inner > p{font-size:.85rem;color:var(--tl);line-height:1.65;margin:0}

/* Channel tags */
.hiw-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.hiw-tags span{font-size:.72rem;font-weight:600;padding:.25rem .65rem;border-radius:20px;background:rgba(229,139,64,.07);color:var(--o);border:1px solid rgba(229,139,64,.15)}

/* Chat message card */
.hiw-card{background:rgba(249,245,240,.6);border:1px solid var(--b);border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.hiw-card-msg{}
.hiw-msg{font-size:.8rem;line-height:1.5;max-width:85%;padding:.55rem .8rem;border-radius:12px}
.hiw-msg-out{background:var(--o);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;margin-left:auto;animation:hiw-pop .5s ease both}
.hiw-msg-in{display:flex;align-items:flex-start;gap:.5rem;animation:hiw-pop .5s .3s ease both;opacity:0;animation-fill-mode:forwards}
.hiw-msg-avatar{width:26px;height:26px;border-radius:50%;background:var(--o);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hiw-msg-in > div{background:#fff;border:1px solid var(--b);border-radius:12px;border-bottom-left-radius:4px;padding:.55rem .8rem;font-size:.8rem;line-height:1.5}
.hiw-typing{display:flex;align-items:center;gap:3px;padding:.4rem .8rem;animation:hiw-pop .5s .6s ease both;opacity:0;animation-fill-mode:forwards}
.hiw-typing span{width:6px;height:6px;border-radius:50%;background:var(--tm);display:inline-block}
.hiw-typing span:nth-child(1){animation:hiwBounce 1.2s .0s infinite}
.hiw-typing span:nth-child(2){animation:hiwBounce 1.2s .2s infinite}
.hiw-typing span:nth-child(3){animation:hiwBounce 1.2s .4s infinite}

/* Checklist card */
.hiw-card-checklist{gap:.5rem}
.hiw-check{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:500;padding:.4rem .5rem;border-radius:8px;color:var(--tl);transition:background .2s}
.hiw-check.done{color:#38a169}
.hiw-check.done span{width:18px;height:18px;border-radius:50%;background:rgba(56,161,105,.15);color:#38a169;font-size:.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hiw-check.active{color:var(--o);background:rgba(229,139,64,.05)}
.hiw-check-spin{display:inline-block;animation:hiwSpin 1s linear infinite;color:var(--o);font-size:1rem}

/* Connector arrow between step and mascot */
.hiw-connector{display:flex;align-items:center;gap:.25rem;color:var(--o);opacity:.45}
.hiw-conn-line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--o) 0,var(--o) 5px,transparent 5px,transparent 10px)}
.hiw-conn-arrow{font-size:1.4rem;line-height:1;flex-shrink:0}
.hiw-connector-left{flex-direction:row-reverse}

/* Mascot center column */
.hiw-mascot{position:relative;display:flex;justify-content:center;align-items:center;width:190px;flex-shrink:0}
.hiw-mascot-glow{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(229,139,64,.18) 0%,transparent 70%);animation:hiwGlowPulse 3s ease-in-out infinite}
.hiw-mascot-img{width:150px;position:relative;z-index:1;filter:drop-shadow(0 8px 24px rgba(229,139,64,.2));animation:hiwFloat 4s ease-in-out infinite}
.hiw-mascot-badge{position:absolute;z-index:2;background:#fff;border:1.5px solid var(--b);border-radius:20px;padding:.35rem .85rem;font-size:.72rem;font-weight:700;color:var(--o);box-shadow:0 4px 16px rgba(0,0,0,.07);white-space:nowrap}
.hiw-mb-top{top:10px;right:-10px;animation:hiwBadgePop .6s .5s cubic-bezier(.34,1.56,.64,1) both}
.hiw-mb-bot{bottom:10px;left:-10px;animation:hiwBadgePop .6s 1s cubic-bezier(.34,1.56,.64,1) both}

/* Step 3 — full width bottom row */
.hiw-bottom{margin-top:2.5rem}
.hiw-bottom-inner{background:#fff;border:1.5px solid var(--b);border-radius:24px;padding:2rem 2.5rem;box-shadow:0 4px 24px rgba(0,0,0,.04);display:grid;grid-template-columns:auto auto 1fr;gap:1.5rem;align-items:center;transition:box-shadow .4s,transform .4s}
.hiw-bottom-inner:hover{box-shadow:0 12px 40px rgba(229,139,64,.1);transform:translateY(-4px)}
.hiw-bottom-text h3{font-size:1.2rem;font-weight:700;margin:0 0 .35rem}
.hiw-bottom-text p{font-size:.84rem;color:var(--tl);line-height:1.65;margin:0;max-width:420px}
.hiw-bottom-cards{display:flex;gap:1rem;justify-content:flex-end;flex-wrap:wrap}
.hiw-bc{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:rgba(249,245,240,.7);border:1.5px solid var(--b);border-radius:16px;padding:.9rem 1.1rem;min-width:100px;text-align:center;transition:all .3s}
.hiw-bc:hover{background:rgba(229,139,64,.06);border-color:var(--o);transform:translateY(-3px);box-shadow:0 6px 20px rgba(229,139,64,.12)}
.hiw-bc-icon{font-size:1.5rem}
.hiw-bc-label{font-size:.82rem;font-weight:700;color:var(--tm)}
.hiw-bc-sub{font-size:.7rem;color:var(--tl)}
.hiw-bc-highlight{background:linear-gradient(135deg,rgba(229,139,64,.08),rgba(229,139,64,.04));border-color:var(--op)}
.hiw-bc-highlight .hiw-bc-label{color:var(--o)}

/* hiw keyframes */
@keyframes hiw-pop{from{opacity:0;transform:scale(.9) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes hiwBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes hiwSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hiwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hiwGlowPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes hiwBadgePop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* ECOSYSTEM */
.eco{padding:6rem 2rem}
.eco::before{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,var(--b),transparent);margin-bottom:3rem}
.eco-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;max-width:1300px;margin:0 auto}
.eco-list{display:flex;flex-direction:column;gap:.15rem}
.eco-row{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:14px;transition:all .4s cubic-bezier(.22,1,.36,1);cursor:default;border-left:3px solid transparent}
.eco-row:hover{background:rgba(229,139,64,.03);padding-left:1.5rem;border-left-color:var(--o)}
.eco-row .eco-em{font-size:1.3rem;flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(229,139,64,.04);transition:all .4s}
.eco-row:hover .eco-em{background:rgba(229,139,64,.1);transform:scale(1.1) rotate(-5deg)}
.eco-row h4{font-weight:700;font-size:.95rem;margin-bottom:.15rem}
.eco-row p{font-size:.78rem;color:var(--tl);line-height:1.5}
.eco-graphic{position:relative;display:flex;justify-content:center;align-items:center}
.orbit-viz{position:relative;width:320px;height:320px}
.orbit-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(229,139,64,.06);display:flex;align-items:center;justify-content:center;z-index:2}
.orbit-center img{width:48px;height:48px;border-radius:12px}
.orbit-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px dashed var(--op)}
.orbit-ring.r1{width:200px;height:200px;margin:-100px 0 0 -100px;animation:spin 25s linear infinite}
.orbit-ring.r2{width:300px;height:300px;margin:-150px 0 0 -150px;animation:spin 40s linear infinite reverse}
.orbit-dot{position:absolute;width:38px;height:38px;border-radius:50%;background:#FFF8F0;border:1.5px solid var(--b);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .3s;animation:spin 25s linear infinite reverse}
.orbit-ring.r2 .orbit-dot{animation:spin 40s linear infinite}
.orbit-dot:hover{transform:scale(1.25);border-color:var(--o);box-shadow:0 4px 16px rgba(229,139,64,.1)}
.od1{top:-19px;left:50%;margin-left:-19px}.od2{bottom:-19px;left:50%;margin-left:-19px}
.od3{top:50%;right:-19px;margin-top:-19px}.od4{top:50%;left:-19px;margin-top:-19px}
.od5{top:8%;right:8%}.od6{bottom:8%;left:8%}

/* TECH STRIPS */
.tech{padding:6rem 2rem;max-width:1300px;margin:0 auto}
.tech-strips{display:flex;flex-direction:column;gap:.75rem;margin-top:3rem}
.tech-strip{display:flex;align-items:stretch;overflow:hidden;transition:all .4s cubic-bezier(.22,1,.36,1);border-bottom:1px solid var(--b);padding-bottom:1.25rem}
.tech-strip:hover{padding-left:.5rem}
.ts-accent{width:3px;background:var(--o);flex-shrink:0;border-radius:3px;margin-right:1.25rem}
.ts-body h4{font-weight:700;font-size:1rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.ts-body h4 .em{font-size:1.05rem}
.ts-body p{font-size:.83rem;color:var(--tl);line-height:1.65;margin-bottom:.75rem}
.ts-pills{display:flex;flex-wrap:wrap;gap:.25rem}
.ts-pill{padding:.2rem .55rem;border-radius:100px;font-size:.6rem;font-weight:600;color:var(--o);background:rgba(229,139,64,.04);border:1px solid rgba(229,139,64,.1);transition:all .3s}
.tech-strip:hover .ts-pill{background:rgba(229,139,64,.08)}

/* PLATFORMS + PWA */
.plats{padding:5rem 2rem;max-width:1300px;margin:0 auto}

/* Platform pills */
.plat-row{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;margin-top:2.5rem;background:#fff;border:1.5px solid var(--b);border-radius:24px;padding:1.5rem 2.5rem;box-shadow:0 4px 24px rgba(0,0,0,.04);max-width:720px;margin-inline:auto;margin-top:2.5rem}
.plat-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;min-width:120px;padding:.5rem 1rem;transition:all .4s cubic-bezier(.22,1,.36,1);cursor:default}
.plat-item:hover{transform:translateY(-5px)}
.plat-icon-wrap{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;transition:all .4s cubic-bezier(.22,1,.36,1)}
.plat-item:hover .plat-icon-wrap{transform:scale(1.1) rotate(-4deg)}
.pi-android{background:rgba(61,220,132,.1)}
.pi-ios{background:rgba(180,180,180,.1)}
.pi-web{background:rgba(59,130,246,.1)}
.pi-win{background:rgba(0,120,212,.1)}
.plat-name{font-weight:700;font-size:.9rem}
.plat-ver{font-size:.65rem;color:var(--tm)}
.plat-divider{width:1px;height:50px;background:var(--b);flex-shrink:0;margin:0 .5rem}

/* PWA Hero */
.pwa-hero{margin-top:4rem;max-width:1100px;margin-inline:auto;padding:3rem;background:#fff;border:1.5px solid var(--b);border-radius:28px;box-shadow:0 4px 32px rgba(0,0,0,.05);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.pwa-hero-label{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;font-size:.8rem;font-weight:600;color:var(--tl)}
.pwa-badge{background:linear-gradient(135deg,var(--o),var(--od));color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.08em;padding:.25rem .6rem;border-radius:6px}
.pwa-hero h3{font-size:1.9rem;font-weight:300;letter-spacing:-.03em;line-height:1.25;margin-bottom:1rem}
.pwa-hero h3 em{font-family:'Playfair Display',serif;font-weight:700;font-style:italic;color:var(--o)}
.pwa-hero > p{font-size:.9rem;color:var(--tl);line-height:1.7;margin:0}
.pwa-hero > p strong{color:var(--tm);font-weight:700}

/* VS comparison */
.pwa-vs{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:rgba(249,245,240,.6);border:1px solid var(--b);border-radius:18px}
.pwa-vs-col{flex:1;display:flex;flex-direction:column;gap:.5rem}
.pwa-vs-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tm);margin-bottom:.25rem}
.pwa-vs-item{font-size:.78rem;padding:.35rem .6rem;border-radius:8px;line-height:1.4}
.pwa-vs-item.bad{color:#e53e3e;background:rgba(229,62,62,.05)}
.pwa-vs-item.good{color:#2f855a;background:rgba(72,187,120,.07);font-weight:500}
.pwa-vs-arrow{font-size:1.5rem;color:var(--o);flex-shrink:0;opacity:.5}

/* PWA feature cards */
.pwa-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem;max-width:1100px;margin-inline:auto}
.pwa-card{background:#fff;border:1.5px solid var(--b);border-radius:20px;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:all .4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.pwa-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(229,139,64,.04) 0%,transparent 60%);opacity:0;transition:opacity .4s}
.pwa-card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(229,139,64,.1);border-color:var(--op)}
.pwa-card:hover::before{opacity:1}
.pwa-card-accent{background:linear-gradient(135deg,rgba(229,139,64,.07),rgba(229,139,64,.03));border-color:var(--op)}
.pwa-card-icon{font-size:1.6rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(229,139,64,.08)}
.pwa-card h5{font-weight:700;font-size:.92rem;margin:0}
.pwa-card p{font-size:.78rem;color:var(--tl);line-height:1.6;margin:0}
.pwa-card-stat{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--o);opacity:.25;margin-top:auto;line-height:1}

/* responsive overrides kept below in breakpoints */
.pwa-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pwa-feat{text-align:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pwa-feat:hover{transform:translateY(-4px)}
.pwa-feat .pwa-icon{font-size:1.5rem;margin-bottom:.5rem}
.pwa-feat h5{font-weight:700;font-size:.85rem;margin-bottom:.2rem}
.pwa-feat p{font-size:.72rem;color:var(--tl);line-height:1.5}

/* QUOTES — removed, section deleted */
.quotes{display:none}
.quotes-grid,.q-item,.q-text,.q-author,.q-avatar,.q-name,.q-role{}

/* PRICING */
.pricing{padding:6rem 2rem;max-width:1200px;margin:0 auto}

/* Billing toggle */
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}
.billing-toggle .bt-label{font-size:.85rem;font-weight:600;color:var(--tm);transition:color .3s;cursor:pointer;padding:.35rem .75rem;border-radius:8px}
.billing-toggle .bt-label.active{color:var(--t);background:rgba(229,139,64,.06)}
.bt-switch{position:relative;width:52px;height:28px;border-radius:100px;background:var(--b);border:2px solid rgba(229,139,64,.15);cursor:pointer;transition:all .4s;flex-shrink:0}
.bt-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--o);transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 8px rgba(229,139,64,.3)}
.bt-switch.yearly{background:rgba(229,139,64,.1);border-color:var(--o)}
.bt-switch.yearly::after{left:calc(100% - 21px)}
.bt-save{font-size:.62rem;font-weight:700;color:var(--o);background:rgba(229,139,64,.08);padding:.2rem .55rem;border-radius:100px;letter-spacing:.04em;animation:savePulse 2s ease-in-out infinite}
@keyframes savePulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* Price grid — 3 columns */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:3rem auto 2.5rem;max-width:1100px;width:100%;align-items:start}

/* Card base */
.price-card{position:relative;padding:2.25rem 2rem 2rem;border-radius:28px;border:1.5px solid var(--b);background:#fff;transition:all .5s cubic-bezier(.22,1,.36,1);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 16px rgba(0,0,0,.04)}
.price-card::before{content:'';position:absolute;inset:0;border-radius:28px;opacity:0;transition:opacity .5s;background:radial-gradient(circle at 50% 0%,rgba(229,139,64,.05),transparent 65%);pointer-events:none}
.price-card:hover{border-color:rgba(229,139,64,.25);transform:translateY(-6px);box-shadow:0 20px 56px rgba(229,139,64,.08),0 4px 16px rgba(0,0,0,.03)}
.price-card:hover::before{opacity:1}

/* Popular card */
.price-card.popular{border-color:var(--o);background:linear-gradient(165deg,#fff,rgba(255,248,240,.85));transform:translateY(-10px) scale(1.02);z-index:2;box-shadow:0 24px 64px rgba(229,139,64,.14),0 0 0 1px rgba(229,139,64,.12)}
.price-card.popular::before{opacity:1}
.price-card.popular:hover{transform:translateY(-16px) scale(1.03);box-shadow:0 36px 80px rgba(229,139,64,.18),0 0 0 1px rgba(229,139,64,.18)}

/* Popular badge */
.pop-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--o),var(--od));color:white;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.35rem 1.1rem;border-radius:0 0 12px 12px;white-space:nowrap;box-shadow:0 4px 16px rgba(229,139,64,.3)}

/* Plan header row */
.pc-plan-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.pc-icon-v2{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;transition:all .5s cubic-bezier(.22,1,.36,1)}
.price-card:hover .pc-icon-v2{transform:scale(1.1) rotate(-5deg)}
.pc-icon-v2.free{background:rgba(72,187,120,.1);border:1px solid rgba(72,187,120,.2)}
.pc-icon-v2.basic{background:rgba(99,179,237,.1);border:1px solid rgba(99,179,237,.2)}
.pc-icon-v2.pro{background:rgba(229,139,64,.1);border:1px solid rgba(229,139,64,.2)}
.pc-name{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.15rem}
.pc-desc{font-size:.75rem;color:var(--tl);line-height:1.45}

/* Price block */
.pc-price-block{margin-bottom:1.25rem}
.pc-amount-v2{display:flex;align-items:baseline;gap:.1rem;line-height:1}
.pc-currency{font-size:1.1rem;font-weight:600;color:var(--tl);align-self:flex-start;margin-top:.55rem}
.pc-value{font-family:'Playfair Display',serif;font-size:3.5rem;font-weight:800;color:var(--t);letter-spacing:-.04em;line-height:1;transition:transform .2s,opacity .2s}
.price-card.popular .pc-value{color:var(--o)}
.pc-period{font-size:.78rem;color:var(--tm);font-weight:500;margin-top:.25rem}
.pc-period-sub{font-size:.68rem;color:var(--tl);font-style:italic}

/* Divider */
.pc-divider{height:1px;background:var(--b);margin:1.25rem 0}
.price-card.popular .pc-divider{background:rgba(229,139,64,.15)}

/* Section label above list */
.pc-section-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tm);margin-bottom:.75rem}

/* Feature list */
.pc-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.75rem;flex:1}
.pc-list li{font-size:.82rem;display:flex;align-items:flex-start;gap:.6rem;line-height:1.45;color:var(--t);transition:all .25s}
.pc-list li:hover{padding-left:.2rem}
.pc-list li .check{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.6rem;flex-shrink:0;margin-top:.05rem;transition:transform .3s;font-weight:700}
.pc-list li .check.green{background:rgba(72,187,120,.12);color:#2f855a}
.pc-list li .check.blue{background:rgba(99,179,237,.12);color:#2b6cb0}
.pc-list li .check.orange{background:rgba(229,139,64,.12);color:var(--o)}
.price-card:hover .pc-list li .check{transform:scale(1.1)}
.pc-list li .feat-label{font-weight:500}
.pc-list li .feat-new{font-size:.55rem;font-weight:700;color:var(--o);background:rgba(229,139,64,.1);padding:.12rem .4rem;border-radius:100px;margin-left:.3rem;letter-spacing:.04em;vertical-align:middle}
.pc-list li .feat-tip{width:14px;height:14px;border-radius:50%;background:var(--b);color:var(--tm);font-size:.6rem;display:inline-flex;align-items:center;justify-content:center;margin-left:.3rem;cursor:help;flex-shrink:0;vertical-align:middle;font-weight:700}

/* CTA button */
.pc-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.25rem;border-radius:14px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.88rem;border:none;cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1);width:100%;text-decoration:none;position:relative;overflow:hidden;margin-top:auto}
.pc-cta.outline{background:transparent;color:var(--t);border:1.5px solid var(--b)}
.pc-cta.outline:hover{border-color:var(--o);color:var(--o);background:rgba(229,139,64,.03);transform:translateY(-2px)}
.pc-cta.filled{background:linear-gradient(135deg,var(--o),var(--od));color:white;border:none;box-shadow:0 4px 20px rgba(229,139,64,.28),inset 0 1px 0 rgba(255,255,255,.15)}
.pc-cta.filled:hover{box-shadow:0 8px 32px rgba(229,139,64,.38);transform:translateY(-2px)}
.pc-cta.filled::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);transition:transform .6s}
.pc-cta.filled:hover::before{transform:translateX(100%)}
.pc-cta svg{transition:transform .3s}
.pc-cta:hover svg{transform:translateX(3px)}

/* Feature comparison table */
.pc-compare-hint{margin:2.5rem auto 0;max-width:860px;width:100%}
.pch-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--tm);text-align:center;margin-bottom:1rem}
.pch-table{background:#fff;border:1.5px solid var(--b);border-radius:24px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.04)}

/* Header row */
.pch-thead{display:grid;grid-template-columns:1fr repeat(3,90px);background:rgba(249,245,240,.8);border-bottom:1.5px solid var(--b)}
.pch-th{padding:.75rem .5rem;font-size:.72rem;font-weight:700;text-align:center;color:var(--tm);text-transform:uppercase;letter-spacing:.06em}
.pch-th.pch-th-feat{text-align:left;padding-left:1.4rem}
.pch-th.pch-th-pro{color:var(--o)}

/* Group labels */
.pch-group-label{padding:.5rem 1.4rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--tm)}
.pch-group-label.pch-group-basic{background:linear-gradient(90deg,#4a7c59,#6aab7f);color:#fff}
.pch-group-label.pch-group-pro{background:linear-gradient(90deg,var(--od),var(--o));color:#fff}

/* Feature rows */
.pch-row{display:grid;grid-template-columns:1fr repeat(3,90px);align-items:center;border-bottom:1px solid var(--b);transition:background .2s}
.pch-row:last-child{border-bottom:none}
.pch-row:hover{background:rgba(249,245,240,.5)}
.pch-feat{padding:.75rem 1rem .75rem 1.4rem;font-size:.84rem;font-weight:500;color:var(--t)}
.pch-yes,.pch-no{text-align:center;font-size:.85rem;font-weight:700;padding:.75rem .25rem}
.pch-yes{color:#4a9e6b}
.pch-yes.pro{color:var(--o)}
.pch-yes.pro.ai{font-size:.68rem;letter-spacing:.04em;background:rgba(229,139,64,.08);border-radius:6px;padding:.3rem .5rem;margin:auto}
.pch-no{color:var(--b);font-size:.9rem;opacity:.6}

@media(max-width:600px){.pch-thead,.pch-row{grid-template-columns:1fr repeat(3,64px)}.pch-th,.pch-feat{font-size:.75rem}.pch-feat{padding-left:1rem}.pch-group-label{padding-left:1rem}}

/* Guarantee strip */
.pricing-guarantee{display:flex;align-items:center;justify-content:center;gap:2rem;margin:2.5rem auto 0;max-width:1100px;width:100%;padding:1.25rem 2rem;border-radius:16px;background:rgba(229,139,64,.02);border:1px solid var(--b);flex-wrap:wrap}
.pg-item{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:500;color:var(--tl)}
.pg-item .pg-icon{font-size:1rem}

/* Try-it banner */
.trial-banner{margin:2rem auto 2.5rem;max-width:1100px;width:100%}
.trial-banner-inner{display:flex;align-items:center;gap:1.25rem;padding:1.4rem 2rem;border-radius:20px;background:linear-gradient(135deg,rgba(229,139,64,.07) 0%,rgba(255,255,255,.6) 100%);border:1.5px solid rgba(229,139,64,.3);box-shadow:0 4px 24px rgba(229,139,64,.08);flex-wrap:wrap}
.trial-icon{font-size:2rem;flex-shrink:0}
.trial-text{flex:1;min-width:0}
.trial-text strong{display:block;font-size:1rem;font-weight:700;color:var(--td);margin-bottom:.3rem}
.trial-text span{font-size:.82rem;color:var(--tl);line-height:1.6}
.trial-badge{flex-shrink:0;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.4rem 1rem;border-radius:100px;background:var(--o);color:#fff;box-shadow:0 3px 12px rgba(229,139,64,.3)}
@media(max-width:600px){.trial-banner-inner{gap:.85rem;padding:1.1rem 1.25rem}.trial-badge{width:100%;text-align:center}}

@media(max-width:1024px){.price-grid{grid-template-columns:1fr 1fr}.price-card.popular{transform:translateY(-4px) scale(1)}}
@media(max-width:768px){.price-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}.price-card.popular{transform:none;scale:1}.pricing-guarantee{flex-direction:column;gap:1rem;align-items:flex-start}}

/* FAQ */
.faq{padding:6rem 2rem;max-width:860px;margin:0 auto}

/* Category tabs */
.faq-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:2rem 0 2.5rem}
.faq-tab{font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:600;padding:.5rem 1.1rem;border-radius:100px;border:1.5px solid var(--b);background:transparent;color:var(--tm);cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1)}
.faq-tab:hover{border-color:var(--op);color:var(--o);background:rgba(229,139,64,.04)}
.faq-tab.active{background:var(--o);color:#fff;border-color:var(--o);box-shadow:0 4px 16px rgba(229,139,64,.25)}

/* Category panels */
.faq-body{position:relative}
.faq-cat{display:none;flex-direction:column;gap:0;animation:faqFadeIn .35s ease both}
.faq-cat.active{display:flex}
@keyframes faqFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* FAQ item */
.faq-item{border-bottom:1px solid var(--b);overflow:hidden}
.faq-item:first-child{border-top:1px solid var(--b)}

/* Question row */
.faq-q{padding:1.3rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:all .3s;user-select:none}
.faq-q-inner{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}
.faq-icon{font-size:1.1rem;width:36px;height:36px;border-radius:10px;background:rgba(229,139,64,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .4s}
.faq-q-inner span:last-child{font-weight:600;font-size:.93rem;line-height:1.4;color:var(--t);transition:color .3s}
.faq-q .arr{width:20px;height:20px;transition:all .4s cubic-bezier(.22,1,.36,1);flex-shrink:0;color:var(--tm)}
.faq-item:hover .faq-q-inner span:last-child{color:var(--o)}
.faq-item:hover .faq-icon{background:rgba(229,139,64,.1);transform:scale(1.05)}
.faq-item.open .faq-q-inner span:last-child{color:var(--o)}
.faq-item.open .faq-icon{background:rgba(229,139,64,.12);transform:scale(1.05) rotate(-5deg)}
.faq-item.open .faq-q .arr{transform:rotate(180deg);color:var(--o)}

/* Answer panel */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1);padding-left:2.9rem}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>*{overflow:hidden}
.faq-a-inner{padding:.1rem 0 1.5rem 0}
.faq-a p{font-size:.87rem;color:var(--tl);line-height:1.75;margin:0;padding-bottom:1.25rem}

/* Tags inside answer */
.faq-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.faq-tags span{font-size:.72rem;font-weight:600;padding:.22rem .6rem;border-radius:20px;background:rgba(229,139,64,.07);color:var(--o);border:1px solid rgba(229,139,64,.15)}

/* Highlight pill inside answer */
.faq-highlight{margin-top:.75rem;padding:.5rem .85rem;background:rgba(229,139,64,.06);border-left:3px solid var(--o);border-radius:0 10px 10px 0;font-size:.8rem;font-weight:600;color:var(--o)}

/* Bottom CTA block */
.faq-cta{margin-top:3rem}
.faq-cta-inner{display:flex;align-items:center;gap:1.5rem;background:#fff;border:1.5px solid var(--b);border-radius:24px;padding:1.75rem 2rem;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:all .4s}
.faq-cta-inner:hover{box-shadow:0 8px 32px rgba(229,139,64,.1);border-color:var(--op)}
.faq-cta-mascot{width:70px;flex-shrink:0;animation:hiwFloat 4s ease-in-out infinite}
.faq-cta-text{flex:1}
.faq-cta-text h4{font-weight:700;font-size:1rem;margin:0 0 .3rem}
.faq-cta-text p{font-size:.82rem;color:var(--tl);margin:0;line-height:1.5}

/* CONTACT */
.contact{padding:6rem 2rem 5rem;max-width:1100px;margin:0 auto;position:relative;overflow:visible}

/* Contact cards — 3 col grid */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.contact-card{display:flex;align-items:center;gap:1.1rem;padding:1.5rem 1.6rem;border-radius:22px;border:1.5px solid var(--b);background:#fff;text-decoration:none;color:inherit;transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 14px rgba(0,0,0,.04);position:relative;overflow:hidden}
.contact-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(229,139,64,.04),transparent);opacity:0;transition:opacity .4s}
.contact-card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(229,139,64,.12);border-color:rgba(229,139,64,.3)}
.contact-card:hover::before{opacity:1}
.contact-card-wa:hover{border-color:rgba(37,211,102,.35);box-shadow:0 12px 36px rgba(37,211,102,.1)}
.contact-card-wa:hover::before{background:linear-gradient(135deg,rgba(37,211,102,.05),transparent)}
.cc-icon-wrap{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.contact-card:hover .cc-icon-wrap{transform:scale(1.1) rotate(-6deg)}
.cc-icon{font-size:1.5rem}
.cc-body{flex:1;min-width:0}
.cc-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tm);margin-bottom:.2rem}
.cc-value{font-size:.92rem;font-weight:700;color:var(--t);margin-bottom:.2rem;word-break:break-all}
.cc-hint{font-size:.72rem;color:var(--tl);line-height:1.4}
.cc-arrow{font-size:1.1rem;color:var(--op);transition:all .4s;flex-shrink:0}
.contact-card:hover .cc-arrow{color:var(--o);transform:translateX(4px)}

/* Bottom row: map + meta */
.contact-bottom{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;align-items:stretch}

/* Floating map card */
.ci-map{position:relative;border-radius:20px;overflow:hidden;height:100%;min-height:180px;border:1.5px solid var(--b);background:linear-gradient(135deg,#FFF8F0 0%,#FDF0E2 100%)}
.ci-map-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(229,139,64,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(229,139,64,.06) 1px,transparent 1px);
  background-size:28px 28px;animation:mapPan 25s linear infinite}
@keyframes mapPan{0%{background-position:0 0}100%{background-position:140px 84px}}
.ci-map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-80%);z-index:2}
.ci-map-pin .pin-icon{font-size:2.2rem;display:block;animation:pinBounce 2s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(229,139,64,.25))}
@keyframes pinBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ci-map-pin .pin-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--o);background:white;padding:3px 10px;border-radius:20px;box-shadow:0 2px 12px rgba(229,139,64,.12)}
.ci-map-ripple{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--o);opacity:0;animation:mapRipple 3s ease-out infinite}
.ci-map-ripple:nth-child(2){animation-delay:1s}
.ci-map-ripple:nth-child(3){animation-delay:2s}
@keyframes mapRipple{0%{width:20px;height:20px;opacity:.5}100%{width:120px;height:120px;opacity:0}}
.ci-map-dots{position:absolute;inset:0}
.ci-map-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--o);opacity:.15;animation:dotPulse 4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.3;transform:scale(1.4)}}

/* Meta info block */
.contact-bottom-meta{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.5rem 1.75rem;border-radius:20px;border:1.5px solid var(--b);background:#fff}
.cbm-item{display:flex;align-items:flex-start;gap:.85rem}
.cbm-icon{font-size:1.2rem;flex-shrink:0;margin-top:.1rem}
.cbm-item strong{display:block;font-size:.85rem;font-weight:700;color:var(--t);margin-bottom:.1rem}
.cbm-item span{font-size:.78rem;color:var(--tl);line-height:1.4}

@media(max-width:900px){.contact-cards{grid-template-columns:1fr}.contact-bottom{grid-template-columns:1fr}.ci-map{min-height:160px}}
@media(max-width:600px){.contact-card{padding:1.1rem 1.2rem}.cc-value{font-size:.85rem}}

/* CTA */
.cta{padding:5rem 2rem 6rem;text-align:center;max-width:800px;margin:0 auto;position:relative}
.cta::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(229,139,64,.08) 0%,transparent 70%);pointer-events:none}
.cta img{width:80px;height:80px;border-radius:20px;margin-bottom:1.5rem;animation:logoBreathe 4s ease-in-out infinite;position:relative;z-index:1;filter:drop-shadow(0 16px 40px rgba(229,139,64,.12))}
.cta h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:300;letter-spacing:-.025em;line-height:1.25;position:relative;z-index:1;color:var(--t)!important}
.cta h2 em{font-family:'Playfair Display',serif;font-weight:700;font-style:italic;color:var(--o)!important}
.cta>p{color:var(--tl)!important;margin:1rem auto 2rem;max-width:420px;line-height:1.7;font-size:.95rem;position:relative;z-index:1}

/* FOOTER */
footer{padding:2.5rem 2rem calc(2.5rem + env(safe-area-inset-bottom));border-top:1px solid var(--b);background:#FFF8F0!important;color:var(--t)!important;position:relative;z-index:2;width:100%;box-sizing:border-box}
.fi{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.fl{display:flex;align-items:center;gap:.6rem}
.fl img{width:28px;height:28px;border-radius:7px}
.ft .fn{font-weight:700;font-size:.9rem;color:var(--t)!important}
.ft .fs{font-size:.68rem;color:var(--tm)!important}
.flinks{display:flex;gap:1.75rem;list-style:none;flex-wrap:wrap}
.flinks a{font-size:.82rem;color:var(--tl)!important;text-decoration:none;transition:color .2s}
.flinks a:hover{color:var(--o)!important}
.fb{max-width:1300px;margin:1.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--b);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.fb span{font-size:.7rem;color:var(--tm)!important}

/* WIDESCREEN */
@media(min-width:1440px){
  .hero{min-height:100vh;padding-top:12rem;padding-bottom:5rem}
  .hero-content{max-width:800px}
  .hero-content h1{font-size:4.2rem}
  .hdesc{font-size:1.15rem}
  .fc{font-size:.8rem;padding:.65rem 1rem;border-radius:16px}
  .fc1{left:6%}.fc2{right:6%}.fc3{left:10%}.fc4{right:8%}
  .numbers{padding:6rem 3rem;gap:3rem}
  .num-item .big{font-size:5rem}
  .feat-section{padding:6rem 3rem 4rem}
  .feat-row{gap:6rem;padding:5rem 0}
  .feat-text h3{font-size:1.5rem}
  .feat-text>p{font-size:.95rem}
  .feat-text .ft-num,.fh-header .ft-num{font-size:6rem}
  .fh-header h3{font-size:1.7rem}
  .dp2-card{padding:1.4rem .8rem 1rem}
  .cx{padding:7rem 3rem}
  .cx-layout{gap:3rem}
  .cx-fcat-list{grid-template-columns:1fr 1fr 1fr}
  .how{padding:7rem 3rem}
  .how-step p{max-width:220px;font-size:.85rem}
  .eco{padding:7rem 3rem}
  .eco-layout{gap:6rem}
  .orbit-viz{width:360px;height:360px}
  .tech{padding:7rem 3rem}
  .ts-body h4{font-size:1.1rem}
  .ts-body p{font-size:.9rem}
  .plats{padding:6rem 3rem}
  .pwa-hero{padding:2.5rem}
  .pwa-cards-grid{grid-template-columns:repeat(3,1fr)}
  .pwa-features{gap:2rem}
  .pricing{padding:7rem 3rem}
  .price-card{padding:2.5rem 2rem}
  .faq{padding:7rem 3rem;max-width:860px}
  .faq-q{font-size:1rem}
  .contact{padding:7rem 3rem 6rem}
  .contact-layout{gap:5rem}
  .ci-map{height:210px}
  .contact-form{padding:2.8rem}
  .cta{padding:6rem 3rem 7rem}
  .si-wrap{max-width:700px}
  .si-wrap h2{font-size:3rem}
  .si-wrap>p{font-size:1.08rem}
}
@media(min-width:1800px){
  .hero-content{max-width:880px}
  .hero-content h1{font-size:4.8rem}
  .numbers,.feat-section,.how,.tech,.plats,.pricing,.contact{max-width:1500px}
  .eco-layout{max-width:1500px}
  .feat-row{gap:8rem}
  .eco-layout{gap:8rem}
  .orbit-viz{width:400px;height:400px}
  .si-wrap{max-width:780px}
}

/* REVEAL */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.rv.vis{opacity:1;transform:translateY(0)}

/* ===== ENHANCEMENT 1: SCROLL PROGRESS BAR ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--ol),var(--o),var(--od));z-index:10001;width:0%;box-shadow:0 0 8px rgba(229,139,64,.4);will-change:width;contain:layout style}

/* ===== ENHANCEMENT 2: 3D TILT ON CARDS ===== */
.tilt-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;transform-style:preserve-3d;will-change:transform}
.tilt-card:hover{box-shadow:0 25px 60px rgba(229,139,64,.1),0 8px 20px rgba(0,0,0,.04)!important}

/* ===== ENHANCEMENT 3: CURSOR GLOW ===== */
.cursor-glow{position:fixed;width:350px;height:350px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:opacity .4s ease;background:radial-gradient(circle,rgba(229,139,64,.07) 0%,rgba(229,139,64,.03) 35%,transparent 70%);transform:translate(-50%,-50%);mix-blend-mode:normal}
.cursor-glow.active{opacity:1}

/* ===== ENHANCEMENT 4: ANIMATED GRADIENT HEADINGS ===== */
.si-wrap h2 em,.cta h2 em,.pwa-head h3 em,.pwa-hero h3 em,.hero-content h1 strong{
  background:linear-gradient(90deg,var(--o),var(--od),var(--ol),var(--o));
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmerGrad 6s ease-in-out infinite;
}
@keyframes shimmerGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== ENHANCEMENT 5: STAGGERED GRID REVEALS ===== */
.rv.stagger-1{transition-delay:.1s}
.rv.stagger-2{transition-delay:.2s}
.rv.stagger-3{transition-delay:.3s}
.rv.stagger-4{transition-delay:.4s}
.rv.stagger-5{transition-delay:.5s}
.rv.stagger-6{transition-delay:.6s}

/* ===== ENHANCEMENT 6: MOBILE HAMBURGER MENU ===== */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;cursor:pointer;z-index:1002;background:none;border:none;padding:0;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--t);border-radius:2px;transition:all .35s cubic-bezier(.22,1,.36,1);transform-origin:center}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(2.5px,2.5px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(2.5px,-2.5px)}
.mobile-menu{position:fixed;top:0;right:-100%;width:min(320px,85vw);height:100dvh;background:rgba(255,248,240,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1001;padding:calc(5rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) 2rem;display:flex;flex-direction:column;gap:.25rem;transition:right .45s cubic-bezier(.22,1,.36,1);box-shadow:-20px 0 60px rgba(0,0,0,.08);border-left:1px solid var(--b)}
.mobile-menu.open{right:0}
.mobile-menu a{text-decoration:none;color:var(--t);font-weight:600;font-size:1.1rem;padding:1rem 1.25rem;border-radius:14px;transition:all .25s;display:flex;align-items:center;gap:.65rem}
.mobile-menu a:hover,.mobile-menu a:active{background:rgba(229,139,64,.06);color:var(--o);padding-left:1.6rem}
.mobile-menu a.mc{background:var(--o);color:white;text-align:center;justify-content:center;margin-top:auto;border-radius:14px;padding:1rem;box-shadow:0 4px 20px rgba(229,139,64,.25)}
.mobile-menu a.mc:hover{background:var(--od)}
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:1000;opacity:0;pointer-events:none;transition:opacity .35s ease}
.mobile-overlay.open{opacity:1;pointer-events:all}
@media(max-width:768px){.hamburger{display:flex}}

/* ===== CREATIVE 1: MAGNETIC BUTTONS ===== */
.btn{position:relative;overflow:hidden}
.btn .btn-ripple-bg{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2) 0%,transparent 60%);opacity:0;transition:opacity .3s}
.btn:hover .btn-ripple-bg{opacity:1}

/* ===== CREATIVE 2: ROTATING GRADIENT CARD BORDERS ===== */
.glow-border{position:relative}
.glow-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--border-angle,0deg),transparent 25%,var(--o) 50%,transparent 75%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s ease;animation:none;pointer-events:none;z-index:2}
.glow-border:hover::before{opacity:1;animation:rotateBorder 4s linear infinite}
@keyframes rotateBorder{from{--border-angle:0deg}to{--border-angle:360deg}}
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ===== CREATIVE 3: CLICK RIPPLE ===== */
.click-ripple{position:fixed;border-radius:50%;border:2px solid var(--o);pointer-events:none;z-index:9998;animation:clickRippleAnim .7s ease-out forwards}
@keyframes clickRippleAnim{0%{width:0;height:0;opacity:.6;transform:translate(-50%,-50%) scale(1)}100%{width:200px;height:200px;opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* ===== CREATIVE 4: HERO PARTICLE CANVAS ===== */
#heroCanvas{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ===== CREATIVE 5: ELASTIC COUNTER BOUNCE ===== */
.num-item .big{display:inline-block}
@keyframes counterBounce{0%{transform:scale(1.3) translateY(-8px)}40%{transform:scale(.95) translateY(2px)}70%{transform:scale(1.05) translateY(-2px)}100%{transform:scale(1) translateY(0)}}
.num-item.bounced .big{animation:counterBounce .5s cubic-bezier(.22,1,.36,1) forwards}



/* ===== CREATIVE 7: SMOOTH TEXT MASK REVEAL ===== */
.text-reveal{overflow:hidden;display:inline-block}
.text-reveal .text-reveal-inner{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.text-reveal.revealed .text-reveal-inner{transform:translateY(0)}

/* ===== CREATIVE 8: HOVER GLOW SPOTLIGHT ON CARDS ===== */
.spotlight-card{position:relative;overflow:hidden}
.spotlight-card::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(229,139,64,.08),transparent 70%);opacity:0;pointer-events:none;transition:opacity .4s;transform:translate(var(--spot-x,-50%),var(--spot-y,-50%))}
.spotlight-card:hover::after{opacity:1}

/* ===== ASSET INTEGRATION: MASCOT ANIMATIONS ===== */

/* Base mascot image styling */
.mascot-img{
  max-width:100%;height:auto;
  filter:drop-shadow(0 20px 40px rgba(229,139,64,.15)) drop-shadow(0 8px 16px rgba(0,0,0,.06));
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s ease;
}
.mascot-img:hover{
  transform:scale(1.05) rotate(-2deg);
  filter:drop-shadow(0 28px 50px rgba(229,139,64,.22)) drop-shadow(0 12px 24px rgba(0,0,0,.08));
}

/* Mascot entrance animation */
.mascot-float{
  opacity:0;
  transform:translateY(40px) scale(.9);
  transition:all .9s cubic-bezier(.22,1,.36,1);
}
.mascot-float.mascot-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Floating idle animation after entrance */
.mascot-float.mascot-visible .mascot-img{
  animation:mascotIdle 5s ease-in-out infinite;
}
@keyframes mascotIdle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-10px) rotate(1deg)}
  75%{transform:translateY(-6px) rotate(-1deg)}
}

/* Features section mascot */
.mascot-section-float{
  position:absolute;pointer-events:none;z-index:1;
}
.mascot-features{
  width:clamp(120px,12vw,180px);
  opacity:.85;
}
.feat-section .mascot-section-float{
  top:2%;right:2%;
}

/* FAQ section mascot */
.mascot-faq-wrap{
  position:absolute;top:-40px;right:-20px;z-index:0;
}
.mascot-faq{
  width:clamp(90px,10vw,140px);
  opacity:.8;
}

/* CTA section mascot */
.cta{overflow:visible}
.cta-mascot-wrap{
  position:absolute;
  bottom:10%;right:5%;
  z-index:0;pointer-events:none;
}
.mascot-cta{
  width:clamp(100px,10vw,150px);
  opacity:.75;
}
.cta-mascot-wrap.mascot-visible .mascot-cta{
  animation:mascotBounce 3s ease-in-out infinite;
}
@keyframes mascotBounce{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-16px) rotate(3deg)}
  60%{transform:translateY(-8px) rotate(-2deg)}
}

/* Contact section mascot */
.mascot-contact-float{
  position:absolute;bottom:5%;left:-60px;z-index:0;pointer-events:none;
}
.mascot-contact{
  width:clamp(100px,10vw,150px);
  opacity:.7;
}

/* ===== SCREENSHOT SHOWCASE ===== */
.screenshot-showcase{
  margin-top:3.5rem;
  display:flex;justify-content:center;
}
.screenshot-device{
  position:relative;
  max-width:700px;width:100%;
  perspective:1200px;
}
.screenshot-bezel{
  background:linear-gradient(145deg,#1a1a2e,#16213e);
  border-radius:20px;
  padding:12px 12px 28px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.18),
    0 10px 30px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
  transform:rotateX(2deg);
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease;
}
.screenshot-bezel::before{
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:60px;height:4px;border-radius:4px;background:rgba(255,255,255,.1);z-index:3;
}
.screenshot-bezel:hover{
  transform:rotateX(0deg) translateY(-6px);
  box-shadow:0 40px 100px rgba(229,139,64,.12),0 15px 40px rgba(0,0,0,.12);
}
.screenshot-track{
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:16/10;background:#FFF8F0;
}
.screenshot-slide{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.02);
  transition:all .8s cubic-bezier(.22,1,.36,1);
}
.screenshot-slide.active{
  opacity:1;transform:scale(1);
}
.screenshot-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.screenshot-dots{
  display:flex;justify-content:center;gap:6px;
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;
}
.screenshot-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:all .4s ease;cursor:pointer;
}
.screenshot-dot.active{
  background:var(--o);width:18px;border-radius:3px;
  box-shadow:0 0 8px rgba(229,139,64,.4);
}

/* Hero mascot larger for hero */
.hero-logo{
  border-radius:24px!important;
  object-fit:contain;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .mascot-features{width:clamp(80px,10vw,120px)}
  .mascot-faq{width:clamp(70px,8vw,100px)}
  .mascot-cta{width:clamp(80px,8vw,110px)}
  .mascot-contact{width:clamp(80px,8vw,110px)}
  .mascot-contact-float{left:-30px}
}
@media(max-width:768px){
  .feat-section .mascot-section-float{display:none}
  .mascot-faq-wrap{top:-20px;right:0}
  .mascot-faq{width:80px}
  .cta-mascot-wrap{bottom:auto;top:-40px;right:10%}
  .mascot-cta{width:80px}
  .mascot-contact-float{display:none}
  .screenshot-bezel{padding:8px 8px 22px;border-radius:14px}
  .screenshot-bezel::before{width:40px;height:3px}
}

/* RESPONSIVE (original) */
@media(max-width:1024px){
  .contact-layout{grid-template-columns:1fr}
  .contact-line{display:none}
  .cx-layout{grid-template-columns:1fr}
  .cx-visual-panel{position:relative;top:auto}
  .cx-highlights{grid-template-columns:repeat(2,1fr)}
  .feat-row{grid-template-columns:1fr;gap:2rem}
  .feat-row.flip .feat-text{order:1}.feat-row.flip .feat-viz{order:2}
  .dp2-flow{flex-wrap:wrap;gap:1rem;justify-content:center}
  .dp2-step{max-width:130px}
  .dp2-connector{width:24px}
  .dp2-step:nth-child(3) .dp2-connector,.dp2-step:nth-child(6) .dp2-connector{display:none}
  .chat-viz{max-width:100%;margin-left:0}
  .eco-layout{grid-template-columns:1fr}
  .eco-graphic{display:none}
  .pwa-hero{grid-template-columns:1fr;gap:2rem}
  .pwa-cards-grid{grid-template-columns:repeat(2,1fr)}
  .pwa-features{grid-template-columns:repeat(2,1fr)}
  .plat-row{max-width:100%;flex-wrap:wrap;gap:1rem;padding:1.25rem 1.5rem}
  .plat-divider{display:none}
  /* hiw tablet */
  .hiw-layout{grid-template-columns:1fr;gap:1.5rem}
  .hiw-mascot{width:100%;flex-direction:row;justify-content:center;padding:1rem 0}
  .hiw-mascot-img{width:120px}
  .hiw-connector{display:none}
  .hiw-connector-left{display:none}
  .hiw-bottom-inner{grid-template-columns:1fr;gap:1rem}
  .hiw-bottom-cards{justify-content:flex-start}
}
@media(max-width:768px){
  .hero{min-height:auto;padding-top:7rem;padding-bottom:3rem}
  .hero-logo{width:140px;height:140px;border-radius:24px}
  .logo-ring.r1{width:180px;height:180px}.logo-ring.r2{width:230px;height:230px}.logo-ring.r3{width:290px;height:290px}
  .logo-orbit{width:230px;height:230px;margin:-115px 0 0 -115px}
  .fc{display:none}
  .numbers{flex-direction:column;align-items:center;gap:1.5rem}
  .num-sep{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--op),transparent)}
  .how-track{flex-direction:column;align-items:center;gap:1.5rem}
  .how-track::before{display:none}
  /* hiw mobile */
  .hiw-bc{min-width:calc(50% - .5rem);flex:1}
  .hiw-bottom-cards{gap:.75rem}
  .feat-text .ft-num,.fh-header .ft-num{font-size:3rem}
  .dp2-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .dp2-step{max-width:none;flex-direction:column}
  .dp2-connector{display:none}
  .content-grid{gap:.5rem}
  .cg-preview{min-height:70px;padding:.7rem}
  .plat-row{gap:.5rem}
  .plat-item{min-width:calc(50% - 1rem)}
  .pwa-cards-grid{grid-template-columns:1fr 1fr}
  .pwa-vs{flex-direction:column;gap:.75rem}
  .pwa-vs-arrow{transform:rotate(90deg)}
  .pwa-features{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
  .cx-fcat-list{grid-template-columns:1fr}
  .cx-highlights{grid-template-columns:1fr 1fr}
  .cf-row{grid-template-columns:1fr}
  .pwa-features{grid-template-columns:1fr;max-width:280px;margin-inline:auto}
  .fi,.fb{flex-direction:column;text-align:center;align-items:center}
  .fl{flex-direction:column;text-align:center}
  .ft{text-align:center}
  .flinks{justify-content:center;flex-wrap:wrap;gap:1rem}
  .price-col{min-width:260px}
}

/* === MOBILE PERFORMANCE === */
@media(max-width:1024px){
  /* Disable expensive desktop-only effects on touch devices */
  .cursor-glow{display:none!important}
  .click-ripple{display:none!important}
  /* Disable 3D tilt on cards — causes jank on touch scroll */
  .tilt-card{transform:none!important;will-change:auto}
  /* Disable spotlight effect */
  .spotlight-card::after{display:none!important}
  /* Hide grain texture on mobile — negligible at 3% opacity, causes repaint storms */
  body::after{display:none}
  /* Remove GPU hints on mobile dot grid to save memory */
  body::before{will-change:auto;transform:none}
  /* Hide blurred blobs on mobile — 80px blur is expensive and barely visible on small screens */
  .ambient-blob{display:none}
  /* Reduce animation complexity */
  .rv{transition-duration:.5s}
  /* Disable magnetic buttons on mobile */
  .btn .btn-ripple-bg{display:none}
}