/* Maya Interaktive v7 — solid-color token system, zero gradients */

/* ═══════════════════════════════════════════
   DESIGN TOKENS — default (Orange / White / Black)
   Override-ul complet al temei albastre e la sfârşit.
═══════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --bg:       #0C0800;
  --bg-2:     #130D03;
  --bg-card:  #1A1108;
  --bg-warm:  #100A02;

    /* ── High‑res gradients (no bitmap textures) ── */
  --bg-grad:
    radial-gradient(1200px circle at 18% 18%, rgba(249,115,22,.18), transparent 60%),
    radial-gradient(900px circle at 82% 28%, rgba(249,115,22,.10), transparent 55%),
    linear-gradient(135deg, #070707 0%, #0B0B0B 45%, #070707 100%);
  --bg-lines:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px);
/* ── Text / surfaces ── */
  --cream:    #FFF6EE;
  --cream-2:  #FFF0E0;
  --ink:      #1A0C00;
  --ink-60:   rgba(26,12,0,.60);
  --ink-30:   rgba(26,12,0,.30);
  --white:    #FFFFFF;
  --fog:      rgba(255,246,238,.72);

  /* ── Accent scale — orange ── */
  --orange:     #F97316;
  --orange-dk:  #EA6010;
  --orange-dkr: #C94F08;
  --orange-lt:  #FB923C;

  /* ── Accent opacity tokens ── */
  --o-20: rgba(249,115,22,.20);
  --o-12: rgba(249,115,22,.12);
  --o-08: rgba(249,115,22,.08);
  --o-05: rgba(249,115,22,.05);
  --o-03: rgba(249,115,22,.03);

  /* ── Glow helpers (box-shadow / filter glows) ── */
  --glow-strong: rgba(249,115,22,.42);
  --glow-mid:    rgba(249,115,22,.22);
  --glow-soft:   rgba(249,115,22,.10);

  /* ── Type ── */
  --fs-display: clamp(4.5rem,9.5vw,10rem);
  --fs-h2:      clamp(2.8rem,5vw,5.2rem);

  /* ── Motion ── */
  --ease-c:  cubic-bezier(.16,1,.3,1);
  --ease-c2: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.7,0,.3,1);
  --dur-reveal: 900ms;
  --dur-mid:    600ms;
  --dur-fast:   300ms;
  --amp: 14px;
}

/* ═══════════════════════════════════════════
   BLUE THEME — token override (NEGRU + ALBASTRU + ALB)
═══════════════════════════════════════════ */
html.theme-blue {
  --bg:       #06101E;
  --bg-2:     #091525;
  --bg-card:  #0C1D30;
  --bg-warm:  #081628;
  --bg-grad:
    radial-gradient(1200px circle at 18% 18%, rgba(74,144,217,.18), transparent 60%),
    radial-gradient(900px circle at 82% 28%, rgba(26,82,204,.10), transparent 55%),
    linear-gradient(135deg, #050A12 0%, #071120 45%, #050A12 100%);
  --bg-lines:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px);

  --cream:    #EDF4FF;
  --cream-2:  #E8F1FF;
  --ink:      #06101E;
  --ink-60:   rgba(6,16,30,.60);
  --ink-30:   rgba(6,16,30,.30);

  --orange:     #4A90D9;
  --orange-dk:  #1A52CC;
  --orange-dkr: #1040A8;
  --orange-lt:  #6BAEE8;

  --o-20: rgba(74,144,217,.20);
  --o-12: rgba(74,144,217,.12);
  --o-08: rgba(74,144,217,.08);
  --o-05: rgba(74,144,217,.05);
  --o-03: rgba(74,144,217,.03);

  --glow-strong: rgba(26,82,204,.42);
  --glow-mid:    rgba(74,144,217,.22);
  --glow-soft:   rgba(74,144,217,.10);
}

/* ═══════════════════════════════════════════
   RESET / BASE
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:hidden;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{font-family:'Instrument Sans',system-ui,sans-serif;background:var(--bg);color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'kern' 1,'liga' 1,'calt' 1}
::selection{background:var(--orange);color:var(--white)}
::moz-selection{background:var(--orange);color:var(--white)}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.r{opacity:0;transform:translateY(var(--amp));filter:blur(4px);transition:opacity var(--dur-reveal) var(--ease-c),transform var(--dur-reveal) var(--ease-c),filter calc(var(--dur-reveal)*.75) var(--ease-c)}
.r.vis{opacity:1;transform:translateY(0);filter:blur(0)}
.r-s{opacity:0;transform:scale(.97);transition:opacity var(--dur-reveal) var(--ease-c2),transform var(--dur-reveal) var(--ease-c2)}
.r-s.vis{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.r,.r-s{transition:opacity 200ms ease;filter:none;transform:none}}

*:focus{outline:none}
*:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px;box-shadow:0 0 0 5px var(--o-12);transition:outline-color .2s,box-shadow .2s}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}

/* ── Grain — subtle film texture for luxury feel ── */
#grain-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.032;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");background-repeat:repeat;background-size:180px}

/* ═══════════════════════════════════════════
   LOADER
═══════════════════════════════════════════ */
#loader{position:fixed;inset:0;z-index:8000;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;overflow:hidden}
#loader.out{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.3,1)}
/* glow orb — solid color + blur filter (sem radial-gradient) */
.ld-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:var(--orange);opacity:.07;filter:blur(80px);animation:ld-glow-pulse 2s ease-in-out infinite;pointer-events:none}
@keyframes ld-glow-pulse{0%,100%{opacity:.07}50%{opacity:.14}}
.ld-ring-wrap{position:relative;width:120px;height:120px;margin-bottom:2.4rem}
.ld-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--o-12)}
.ld-ring-spin{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--orange);border-right-color:var(--o-20);animation:ld-spin 1.1s cubic-bezier(.6,0,.4,1) infinite}
.ld-ring-spin2{animation-duration:1.8s;animation-direction:reverse;border-top-color:transparent;border-bottom-color:var(--o-08);inset:8px}
@keyframes ld-spin{to{transform:rotate(360deg)}}
.ld-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.18em;color:var(--orange);animation:ld-mark-pulse 2s ease-in-out infinite}
@keyframes ld-mark-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.ld-brand{font-family:'Bebas Neue',sans-serif;font-size:.82rem;letter-spacing:.45em;color:rgba(255,246,238,.28);margin-bottom:1.8rem;text-transform:uppercase;animation:ld-brand-in .8s var(--ease-c) both}
html.theme-blue .ld-brand{color:rgba(237,244,255,.28)}
@keyframes ld-brand-in{from{opacity:0;letter-spacing:.2em}to{opacity:1;letter-spacing:.45em}}
.ld-bar-wrap{width:clamp(160px,28vw,240px);height:2px;background:var(--o-08);border-radius:2px;overflow:hidden;margin-bottom:.9rem}
#ldFill{height:100%;width:0;background:var(--orange);transition:width .06s linear;border-radius:2px}
#ldPct{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;letter-spacing:.1em;color:var(--orange);line-height:1;animation:ld-num-in .5s var(--ease-c) both .2s}
@keyframes ld-num-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ld-pct-label{font-size:.6rem;letter-spacing:.25em;color:rgba(255,246,238,.2);text-transform:uppercase;margin-top:.2rem}
html.theme-blue .ld-pct-label{color:rgba(237,244,255,.2)}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;background:#120A00;padding:1.4rem 5vw;display:flex;align-items:center;justify-content:space-between;transition:padding var(--dur-mid) var(--ease-c),box-shadow var(--dur-mid) var(--ease-c)}
#nav.stuck{box-shadow:0 1px 0 var(--o-12),0 8px 32px rgba(0,0,0,.2);padding:1rem 5vw}
.nav-brand{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.08em;color:var(--cream);white-space:nowrap;flex-shrink:0;line-height:1;align-self:center;transform:translateY(4px)}
.nav-brand span{color:var(--orange)}
.nav-ul{display:flex;gap:2.5rem;list-style:none}
.nav-ul a{font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:rgba(255,246,238,.65);position:relative;transition:color var(--dur-fast) var(--ease-c)}
.nav-ul a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--orange);transition:width var(--dur-fast) var(--ease-c)}
.nav-ul a:hover{color:var(--cream);text-shadow:0 0 20px var(--o-20)}.nav-ul a:hover::after{width:100%}
.nav-utils{display:flex;align-items:center;gap:.8rem}
.nav-util-btn{background:transparent;border:1px solid rgba(255,246,238,.12);color:rgba(255,246,238,.65);border-radius:100px;padding:.45rem .9rem;font-size:.75rem;letter-spacing:.08em;display:flex;align-items:center;gap:.45rem;transition:all var(--dur-fast) var(--ease-c)}
.nav-util-btn:hover{border-color:var(--orange);color:var(--cream)}
.nav-util-btn svg{flex-shrink:0}
.nav-cta-btn{background:var(--cream);color:var(--ink);border:none;border-radius:100px;padding:.55rem 1.35rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;white-space:nowrap;position:relative;overflow:hidden;transition:color var(--dur-fast) var(--ease-c),transform var(--dur-fast) var(--ease-c)}
.nav-cta-btn::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform var(--dur-mid) var(--ease-c)}
.nav-cta-btn:hover{color:var(--white);transform:translateY(-2px);box-shadow:0 8px 24px var(--glow-mid)}.nav-cta-btn:hover::before{transform:translateX(0)}
.nav-cta-btn span{position:relative;z-index:1}
html.theme-blue .nav-cta-btn::before{background:var(--orange-dk)}
#lang-label{font-size:.75rem;font-weight:600;letter-spacing:.1em}
.nav-ham{display:none;flex-direction:column;gap:5px;background:transparent;border:none;padding:.5rem}
.nav-ham span{display:block;width:22px;height:1.5px;background:var(--cream);border-radius:2px;transition:transform var(--dur-fast) var(--ease-c),opacity var(--dur-fast)}
.nav-ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-drawer{position:fixed;inset:0;z-index:490;background:rgba(12,8,0,.97);backdrop-filter:blur(24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-mid) var(--ease-c)}
.nav-drawer.open{clip-path:inset(0 0 0% 0)}
.nav-drawer a{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:.08em;color:rgba(255,246,238,.7);transition:color var(--dur-fast) var(--ease-c)}
.nav-drawer a:hover{color:var(--orange)}
html.theme-blue .nav-drawer{background:rgba(6,16,30,.97)}

/* Theme knob */
.theme-toggle-wrap{display:flex;align-items:center;gap:.5rem}
#btn-theme{position:relative;width:44px;height:24px;background:var(--o-08);border:1px solid var(--o-20);border-radius:100px;transition:background var(--dur-mid) var(--ease-c),border-color var(--dur-mid) var(--ease-c);flex-shrink:0}
#btn-theme::before{content:'';position:absolute;top:50%;left:3px;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--orange);transition:transform var(--dur-mid) var(--ease-c)}
html.theme-blue #btn-theme::before{transform:translateY(-50%) translateX(20px)}
.theme-label{font-size:.65rem;font-weight:600;letter-spacing:.12em;color:rgba(255,246,238,.35);user-select:none;white-space:nowrap}
html.theme-blue .theme-label{color:var(--o-20)}

/* ═══════════════════════════════════════════
   HERO — solid bg + glow via filter:blur on solid orbs
═══════════════════════════════════════════ */
#hero{position:relative;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* diagonal texture — SVG pattern, fara gradient */
.hero-bg::before{content:'';position:absolute;inset:-10%;background-image:var(--bg-grad),var(--bg-lines);background-size:cover,auto;background-position:center,0 0;will-change:background-position;animation:bg-drift 120s linear infinite}
@keyframes bg-drift{from{background-position:center,0 0}to{background-position:center,420px 420px}}
/* bottom ambient — solid orb + blur */
.hero-bg::after{content:'';position:absolute;bottom:-15%;left:50%;transform:translateX(-50%);width:60vw;height:40vh;border-radius:50%;background:var(--orange);opacity:.14;filter:blur(80px);pointer-events:none}
/* floating glows */
.hero-glow{position:absolute;top:-10%;right:-5%;width:60vw;height:60vh;border-radius:50%;background:var(--orange);opacity:.18;filter:blur(90px);pointer-events:none;z-index:0;transition:transform 1.8s var(--ease-c2)}
.hero-glow2{position:absolute;bottom:-5%;left:5%;width:40vw;height:40vh;border-radius:50%;background:var(--orange);opacity:.09;filter:blur(70px);pointer-events:none;z-index:0;transition:transform 2.4s var(--ease-c2)}
.hero-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.10;mix-blend-mode:overlay;background-image:radial-gradient(800px circle at 50% 40%, rgba(255,255,255,.05), transparent 60%)}

/* hero grid: 2 columns, single row — orb centers against exact text-block height */
.hero-head{position:relative;z-index:2;padding:clamp(7rem,12vh,10rem) 5vw clamp(3rem,5vw,4rem) 5vw;display:grid;grid-template-columns:55fr 45fr;grid-template-rows:1fr;align-items:center;gap:0;min-height:calc(100vh - 6rem)}
.hero-left{display:flex;flex-direction:column;justify-content:center;gap:0}
.hero-eyebrow{display:flex;align-items:center;gap:.8rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.hero-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--orange)}
.hero-title-col{padding-right:2rem}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-display);line-height:.92;letter-spacing:-.01em;color:var(--cream);text-shadow:0 2px 40px rgba(0,0,0,.15)}
.hero-title .line{display:block;overflow:hidden}
.hero-title .accent{color:var(--orange)}
.hero-desc-col{display:flex;flex-direction:column;justify-content:flex-start;padding-top:2.5rem;gap:2rem;padding-right:2rem}
.hero-desc{font-size:.95rem;line-height:1.7;color:rgba(255,246,238,.55);max-width:28ch}
.hero-actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}

/* ── Buttons ── */
.btn-fill{display:inline-flex;align-items:center;gap:.6rem;background:var(--orange-dk);color:var(--white);border:none;border-radius:100px;padding:.9rem 2rem;font-size:.85rem;font-weight:600;letter-spacing:.04em;position:relative;overflow:hidden;transition:transform var(--dur-fast) var(--ease-c),box-shadow var(--dur-fast) var(--ease-c)}
.btn-fill::before{content:'';position:absolute;inset:0;background:var(--orange-dkr);transform:translateX(-101%);transition:transform var(--dur-mid) var(--ease-c)}
.btn-fill:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 44px var(--glow-strong),0 6px 20px var(--glow-mid),0 0 0 1px var(--o-12)}.btn-fill:hover::before{transform:translateX(0)}
.btn-fill span,.btn-fill svg{position:relative;z-index:1}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:rgba(255,246,238,.55);border:1px solid rgba(255,246,238,.18);border-radius:100px;padding:.85rem 1.8rem;font-size:.82rem;font-weight:500;letter-spacing:.06em;transition:all var(--dur-fast) var(--ease-c)}
.btn-ghost:hover{color:var(--cream);border-color:var(--orange);box-shadow:0 0 32px var(--o-20),inset 0 0 20px var(--o-05);transform:translateY(-2px)}

/* ── B2B/B2C orbital badge — ultra-premium ── */
.hero-stats-col{grid-column:2/3;grid-row:1/2;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;padding:clamp(2rem,calc(50vh - clamp(7rem,12vh,10rem) - 185px),9rem) 0 0;align-self:start}
.b2-scene{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(290px,30vw,370px);height:clamp(290px,30vw,370px);will-change:transform}

/* pulse rings — expanding halos */
.b2-pulse-ring{position:absolute;inset:-40px;border-radius:50%;border:1px solid var(--orange);opacity:0;pointer-events:none}
.b2-pulse-1{animation:b2Pulse 4s ease-out infinite}
.b2-pulse-2{animation:b2Pulse 4s ease-out 2s infinite}
@keyframes b2Pulse{0%{transform:scale(.85);opacity:.35}100%{transform:scale(1.25);opacity:0}}

/* orbit rings */
.b2-orbit-ring{position:absolute;border-radius:50%;pointer-events:none}
.b2-orbit-ring.r1{inset:-32px;border:1px dashed var(--o-20);animation:orbitSpin 28s linear infinite,orbitPulse1 6s ease-in-out infinite}
.b2-orbit-ring.r2{inset:-14px;border:1px solid var(--o-08);animation:orbitSpin 16s linear infinite reverse,orbitPulse2 9s ease-in-out infinite}
.b2-orbit-ring.r3{inset:-52px;border:1px solid var(--o-05);animation:orbitSpin 36s linear infinite;opacity:.4}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbitPulse1{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes orbitPulse2{0%,100%{opacity:.35}40%{opacity:.8}80%{opacity:.45}}

/* orbiting dots */
.b2-orbit-dot{position:absolute;width:0;height:0;top:50%;left:50%;transform-origin:0 0;animation:orbitSpin 6s linear infinite}
.b2-orbit-dot::after{content:'';position:absolute;width:8px;height:8px;background:var(--orange);border-radius:50%;box-shadow:0 0 14px var(--orange),0 0 28px var(--glow-soft);transform:translate(-50%,-50%);animation:dotBreath 3.2s ease-in-out infinite}
.b2-orbit-dot{width:clamp(150px,16vw,200px);height:clamp(150px,16vw,200px);margin-top:calc(-1 * clamp(150px,16vw,200px));margin-left:calc(-1 * clamp(150px,16vw,200px))}
.b2-orbit-dot-2{animation-duration:9s;animation-direction:reverse;opacity:.55}
.b2-orbit-dot-2::after{animation-delay:1.6s;width:6px;height:6px}
.b2-orbit-dot-3{animation-duration:14s;opacity:.3}
.b2-orbit-dot-3::after{width:4px;height:4px;animation-delay:2.8s}
@keyframes dotBreath{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 10px var(--orange)}50%{transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 20px var(--orange),0 0 36px var(--glow-soft)}}

/* sparkle particles */
.b2-sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--orange);pointer-events:none;opacity:0}
.b2-sp1{top:12%;left:22%;animation:sparkle 3s ease-in-out .0s infinite}
.b2-sp2{top:72%;right:15%;animation:sparkle 3s ease-in-out .8s infinite}
.b2-sp3{bottom:20%;left:12%;animation:sparkle 3s ease-in-out 1.5s infinite}
.b2-sp4{top:18%;right:22%;animation:sparkle 3s ease-in-out 2.2s infinite}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}30%{opacity:.8;transform:scale(1.2)}50%{opacity:.5;transform:scale(.8)}70%{opacity:.7;transform:scale(1)}90%{opacity:0;transform:scale(0)}}

/* card — premium glass sphere */
.b2-card-wrap{perspective:1000px;z-index:2;position:relative}
.b2-card{width:clamp(240px,27vw,320px);height:clamp(240px,27vw,320px);border-radius:50%;background:var(--orange-dk);border:2px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;animation:b2spin 10s ease-in-out infinite;box-shadow:0 0 90px var(--glow-strong),0 0 160px var(--glow-soft),inset 0 -20px 40px rgba(0,0,0,.15),0 28px 80px rgba(0,0,0,.35);transform-style:preserve-3d;position:relative;overflow:hidden}
/* glass sheen sweep */
.b2-card-sheen{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.05) 100%);pointer-events:none;z-index:3;animation:sheenRotate 10s ease-in-out infinite}
@keyframes sheenRotate{0%,100%{opacity:.7}50%{opacity:.3}}
@keyframes b2spin{0%,100%{transform:rotateY(-12deg) rotateX(6deg) scale(1)}25%{transform:rotateY(16deg) rotateX(-6deg) scale(1.02)}50%{transform:rotateY(-8deg) rotateX(4deg) scale(1)}75%{transform:rotateY(12deg) rotateX(-4deg) scale(1.01)}}
.b2-inner{text-align:center;transform:translateZ(30px);position:relative;z-index:4;padding:0 .8rem}
.b2-lbl{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,5vw,4.8rem);color:#fff;letter-spacing:.1em;line-height:1;text-shadow:0 4px 20px rgba(0,0,0,.3),0 0 40px rgba(255,255,255,.08)}
.b2-divider{display:flex;align-items:center;gap:.6rem;margin:.4rem auto;justify-content:center}
.b2-div-line{flex:0 0 28px;height:1px;background:rgba(255,255,255,.3);border-radius:1px}
.b2-plus-sym{display:flex;align-items:center;justify-content:center;width:24px;height:24px;opacity:.7}
.b2-sub{text-align:center;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,246,238,.35);margin-top:.6rem;animation:subFadeIn 1.5s ease-out 1.2s both}
@keyframes subFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* B2B deco lines */
.b2-hline{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:relative}
.b2-hline::before{content:'';display:block;height:1px;width:100%;background:var(--orange);opacity:.3;animation:lineGlow 3s ease-in-out infinite}
.b2-hline::after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--orange);opacity:.55;box-shadow:0 0 10px var(--orange),0 0 20px var(--glow-soft);animation:dotBreath 3s ease-in-out infinite}
@keyframes lineGlow{0%,100%{opacity:.25}50%{opacity:.5}}
.b2-hline-left::after{align-self:flex-end;margin-right:-2px}
.b2-hline-right::after{align-self:flex-start;margin-left:-2px}
.b2-center-col{display:flex;flex-direction:column;align-items:center;gap:.6rem;flex-shrink:0}

@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* HOME only: viewport-locked fullscreen layout */
html[data-page="home"]{overflow:hidden;height:100vh}
html[data-page="home"] body{display:flex;flex-direction:column;height:100vh;overflow:hidden}
html[data-page="home"] section{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
html[data-page="home"] section::-webkit-scrollbar{display:none}
html[data-page="home"] footer{flex-shrink:0}
/* Non-home: viewport-locked — section scrolls between fixed header and footer */
html:not([data-page="home"]){overflow:hidden;height:100vh}
html:not([data-page="home"]) body{display:flex;flex-direction:column;height:100vh;overflow:hidden}
html:not([data-page="home"]) section{flex:1 1 0;min-height:0;overflow-y:auto!important;overflow-x:hidden;scrollbar-width:none}
html:not([data-page="home"]) section::-webkit-scrollbar{display:none}
html:not([data-page="home"]) footer{flex-shrink:0}
/* Home page: hero fills space, marquee+footer pinned at bottom */
[data-page="home"] #hero{flex:1 1 0;min-height:0;overflow:hidden}
[data-page="home"] .hero-head{min-height:0;height:100%;padding-top:clamp(5rem,10vh,7rem);padding-bottom:clamp(.5rem,1.5vh,1.5rem)}
/* Scale title by vh too — prevents 4-line title overflowing on short viewports */
[data-page="home"] .hero-title{font-size:clamp(2.8rem,min(7.5vw,10.5vh),6.5rem)}
[data-page="home"] .hero-desc-col{padding-top:clamp(.8rem,1.5vh,1.8rem);gap:clamp(.6rem,1.2vh,1.5rem)}
[data-page="home"] .marquee-wrap{flex-shrink:0}
[data-page="home"] footer{flex-shrink:0}

/* ═══════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════ */
.marquee-wrap{background:var(--orange-dk);padding:.85rem 0;overflow:hidden;position:relative;z-index:10}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-item{display:flex;align-items:center;gap:1.8rem;font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.12em;color:var(--white);padding:0 1.8rem;white-space:nowrap;flex-shrink:0}
.marquee-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}

/* ═══════════════════════════════════════════
   ABOUT — solid panels
═══════════════════════════════════════════ */
#about{display:grid;grid-template-columns:1fr 1fr}
.about-left{background:var(--bg-2);padding:clamp(2.5rem,5.5vh,4.5rem) 5vw;position:relative;overflow:hidden}
/* corner accent glow — solid orb + blur */
.about-left::before{content:'';position:absolute;top:-10%;right:-10%;width:50%;height:50%;border-radius:50%;background:var(--orange);opacity:.07;filter:blur(60px);pointer-events:none}
.about-quote{font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;color:var(--cream);margin-bottom:1.8rem;max-width:30ch}
.about-stats{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.5rem}
.about-stat-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.8rem,4vw,3.6rem);line-height:1;color:var(--orange);letter-spacing:.02em;display:inline-block;animation:floatY 4s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.about-stat:nth-child(2) .about-stat-val{animation-delay:.6s}
.about-stat:nth-child(3) .about-stat-val{animation-delay:1.2s}
.about-stat-val sup{font-size:.5em;color:var(--orange);vertical-align:super}
.about-stat-lbl{font-size:.8rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,246,238,.45);margin-top:.2rem}
.about-right{background:var(--cream);padding:clamp(2.5rem,5.5vh,4.5rem) 5vw;color:var(--ink);position:relative}
html.theme-blue .about-left{background:var(--bg-2)}
html.theme-blue .about-right{background:var(--cream-2);color:var(--ink)}
.s-label{display:inline-flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem;opacity:0;transition:opacity var(--dur-reveal) var(--ease-c)}
.s-label.vis{opacity:1}.s-label::before{content:'—';font-size:.8em}
.s-label.dark{color:var(--orange-dk)}.s-label.dark::before{color:var(--orange-dk)}
.s-label.light{color:var(--orange)}.s-label.light::before{color:var(--orange)}
.about-h2{font-family:'DM Serif Display',serif;font-size:var(--fs-h2);line-height:1.05;color:var(--ink);margin-bottom:1rem}
.about-h2 em{font-style:italic;color:var(--orange-dk)}
.about-body{font-size:.9rem;line-height:1.65;color:var(--ink-60);margin-bottom:.7rem}
.about-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.pill{display:inline-flex;padding:.45rem 1.1rem;border-radius:100px;border:1.5px solid var(--o-20);color:var(--orange-dk);font-size:.78rem;font-weight:500;background:var(--o-05);transition:all var(--dur-fast) var(--ease-c)}
.pill:hover{background:var(--orange-dk);border-color:var(--orange-dk);color:var(--white);transform:translateY(-2px);box-shadow:0 4px 16px var(--glow-soft)}

/* ═══════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════ */
#services{background:var(--cream-2);padding:clamp(5rem,10vh,8rem) 5vw;color:var(--ink);position:relative;overflow:hidden}
#services::before{content:'';position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23EA6010' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.svc-header{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:4rem;align-items:end}
.svc-h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-h2);line-height:.95;color:var(--ink)}.svc-h2 span{color:var(--orange-dk)}
.svc-sub{font-size:.95rem;line-height:1.7;color:var(--ink-60);max-width:34ch}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.svc-card{background:var(--white);border-radius:1.2rem;padding:2.5rem;position:relative;overflow:hidden;border:1.5px solid var(--o-08);transition:transform var(--dur-mid) var(--ease-c),box-shadow var(--dur-mid) var(--ease-c),border-color var(--dur-mid) var(--ease-c);transform-style:preserve-3d}
/* bottom accent bar — solid */
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--orange-dk);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid) var(--ease-c)}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px var(--glow-soft),0 8px 24px rgba(0,0,0,.06);border-color:var(--o-20)}.svc-card:hover::after{transform:scaleX(1)}
.svc-num{font-family:'Bebas Neue',sans-serif;font-size:.85rem;letter-spacing:.18em;color:var(--orange);opacity:.5;margin-bottom:1.5rem}
.svc-icon{font-size:1.6rem;color:var(--orange-dk);margin-bottom:1rem}
.svc-title{font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--ink);margin-bottom:1rem;line-height:1.2}
.svc-desc{font-size:.88rem;line-height:1.68;color:var(--ink-60);margin-bottom:1.8rem}
.svc-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.svc-tag{padding:.28rem .8rem;border-radius:100px;border:1px solid var(--o-12);font-size:.72rem;font-weight:500;letter-spacing:.06em;color:var(--orange-dk);background:var(--o-03)}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

/* ═══════════════════════════════════════════
   STATS — solid dark
═══════════════════════════════════════════ */
#stats{background:var(--bg-warm);padding:clamp(4rem,8vh,6rem) 5vw;position:relative;overflow:hidden}
#stats::before{content:'';position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F97316' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
/* top accent glow — solid + blur */
#stats::after{content:'';position:absolute;top:-15%;left:50%;transform:translateX(-50%);width:50vw;height:30vh;border-radius:50%;background:var(--orange);opacity:.12;filter:blur(70px);pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative;z-index:1}
.stat-item{text-align:center}
.stat-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,5vw,5rem);line-height:1;color:var(--orange);letter-spacing:.03em;position:relative;display:inline-block;transition:text-shadow .5s}
.stat-val::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--orange-dkr);border-radius:2px;opacity:.5}
.stat-item.vis .stat-val{text-shadow:0 0 50px var(--glow-mid),0 0 100px var(--glow-soft)}
.stat-lbl{margin-top:1rem;font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,246,238,.4)}

/* ═══════════════════════════════════════════
   WHY — solid dark section
═══════════════════════════════════════════ */
#why{background:var(--bg-2);padding:clamp(5rem,10vh,8rem) 5vw;position:relative;overflow:hidden}
.why-glow{position:absolute;right:-10%;top:20%;width:40vw;height:40vh;border-radius:50%;background:var(--orange);opacity:.1;filter:blur(70px);pointer-events:none;z-index:0;transition:transform 2s var(--ease-c2)}
.why-header{max-width:48ch;margin-bottom:4rem;position:relative;z-index:1}
.why-h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-h2);line-height:.92;color:var(--cream)}.why-h2 span{color:var(--orange)}
.why-intro{margin-top:1.5rem;font-size:.95rem;line-height:1.7;color:rgba(255,246,238,.5);max-width:36ch}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative;z-index:1}
.why-item{padding:2rem 1.5rem 2.5rem;border:1px solid rgba(255,246,238,.06);border-radius:1rem;background:rgba(255,246,238,.02);position:relative;overflow:hidden;transition:background var(--dur-mid) var(--ease-c),border-color var(--dur-mid) var(--ease-c),transform var(--dur-mid) var(--ease-c);transform-style:flat}
/* top accent strip instead of radial-gradient overlay */
.why-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange);opacity:0;transition:opacity var(--dur-mid) var(--ease-c)}
.why-item:hover{background:rgba(255,246,238,.04);border-color:var(--o-20);transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.2),0 0 0 1px var(--o-08)}.why-item:hover::before{opacity:1}
.why-item-num{font-family:'Bebas Neue',sans-serif;font-size:.85rem;letter-spacing:.18em;color:var(--orange);margin-bottom:1.5rem;transition:color var(--dur-fast) var(--ease-c),letter-spacing var(--dur-fast) var(--ease-c);display:inline-block}
.why-item:hover .why-item-num{letter-spacing:.26em}
.why-item-icon{font-size:1.4rem;margin-bottom:1rem;color:rgba(255,246,238,.2);transition:color var(--dur-fast) var(--ease-c)}.why-item:hover .why-item-icon{color:var(--orange)}
.why-item-title{font-family:'DM Serif Display',serif;font-size:1.15rem;color:var(--cream);margin-bottom:.75rem;line-height:1.25}
.why-item-desc{font-size:.85rem;line-height:1.65;color:rgba(255,246,238,.45)}

/* ═══════════════════════════════════════════
   PROCESS — solid card-dark
═══════════════════════════════════════════ */
#process{background:var(--bg-card);padding:clamp(5rem,10vh,8rem) 5vw;position:relative;overflow:hidden}
#process::before{content:'';position:absolute;top:0;right:0;width:35%;height:100%;background:var(--orange);opacity:.03;pointer-events:none}
.proc-header{margin-bottom:2.5rem}
.proc-h2{font-family:'DM Serif Display',serif;font-size:var(--fs-h2);line-height:1.1;color:var(--cream)}.proc-h2 em{font-style:italic;color:var(--orange)}
.proc-sub{margin-top:1.2rem;font-size:.95rem;line-height:1.7;color:rgba(255,246,238,.45);max-width:42ch}
.proc-steps{display:flex;gap:0;position:relative}
.proc-line{display:none!important}
.proc-step{flex:1;padding:2rem 2rem 2rem 1.5rem;position:relative;z-index:1;transition:transform var(--dur-mid) var(--ease-c)}.proc-step:hover{transform:translateY(-4px)}
.proc-dot{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,246,238,.12);display:flex;align-items:center;justify-content:center;margin-bottom:2rem;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:rgba(255,246,238,.4);letter-spacing:.08em;background:var(--bg-2);transition:all var(--dur-mid) var(--ease-c)}
.proc-step:hover .proc-dot{background:var(--orange-dk);border-color:var(--orange-dk);color:var(--white);box-shadow:0 0 0 6px var(--o-12),0 8px 24px var(--glow-mid);animation:dotPulse .6s var(--ease-c)}
@keyframes dotPulse{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.proc-icon{font-size:1rem;color:var(--orange);margin-bottom:.8rem;opacity:.6}
.proc-title{font-family:'DM Serif Display',serif;font-size:1.25rem;color:var(--cream);margin-bottom:.8rem;line-height:1.2}
.proc-desc{font-size:.87rem;line-height:1.65;color:rgba(255,246,238,.45)}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
#contact{display:grid;grid-template-columns:1fr 1fr;min-height:100%}
.ct-left{background:var(--orange-dk);color:var(--white);padding:clamp(5.5rem,12vh,8rem) 5vw clamp(4rem,8vh,7rem);position:relative;overflow:hidden}
.ct-left-inner{position:relative;z-index:1}
.ct-h2{font-family:'Bebas Neue',sans-serif;font-size:var(--fs-h2);line-height:.92;color:var(--white);margin-bottom:3rem}
.ct-info{display:flex;flex-direction:column;gap:1.5rem}
.ct-info-item{display:flex;flex-direction:column;gap:.25rem}
.ct-info-label{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ct-info-val{font-size:1.05rem;font-weight:500;color:var(--white)}
.ct-info-val a{color:inherit;transition:opacity var(--dur-fast)}.ct-info-val a:hover{opacity:.75}
.ct-right{background:var(--cream);padding:clamp(5.5rem,12vh,8rem) 5vw clamp(4rem,8vh,7rem);color:var(--ink)}
html.theme-blue .ct-right{background:var(--cream-2);color:var(--ink)}
.form-title-wrap{margin-bottom:2.5rem}
.form-title{font-family:'DM Serif Display',serif;font-size:1.8rem;color:var(--ink);margin-bottom:.4rem}
.form-sub{font-size:.87rem;color:var(--ink-60)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.5rem}
.fgroup{display:flex;flex-direction:column;gap:.4rem}.fgroup.full{grid-column:1/-1}
.flabel{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.finput,.fselect,.ftextarea{width:100%;padding:.75rem 1rem;background:var(--white);color:var(--ink);border:1.5px solid var(--o-12);border-radius:.7rem;font-family:inherit;font-size:.9rem;transition:border-color var(--dur-fast) var(--ease-c),box-shadow var(--dur-fast) var(--ease-c)}
.finput:focus,.fselect:focus,.ftextarea:focus{outline:none;border-color:var(--orange-dk);box-shadow:0 0 0 4px var(--o-08),0 2px 12px var(--o-05)}
.ftextarea{resize:vertical;min-height:120px}
.fsubmit{margin-top:.5rem;width:100%;padding:1rem;background:var(--orange-dk);color:var(--white);border:none;border-radius:.7rem;font-family:inherit;font-size:.9rem;font-weight:600;letter-spacing:.04em;position:relative;overflow:hidden;transition:transform var(--dur-fast) var(--ease-c),box-shadow var(--dur-fast) var(--ease-c)}
.fsubmit::before{content:'';position:absolute;inset:0;background:var(--orange-dkr);transform:translateX(-101%);transition:transform var(--dur-mid) var(--ease-c)}
.fsubmit:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 40px var(--glow-strong),0 4px 12px var(--glow-mid)}.fsubmit:hover::before{transform:translateX(0)}
.fsubmit span{position:relative;z-index:1}
.form-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:3rem}
.form-success.vis{display:flex}
.form-success-icon{font-size:3rem;color:var(--orange-dk)}
.form-success-title{font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--ink)}
.form-success-sub{font-size:.9rem;color:var(--ink-60)}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer{background:var(--bg);border-top:1px solid var(--o-12);padding:1.8rem 5vw;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem;min-height:60px}
.foot-brand{font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:.1em;color:rgba(255,246,238,.6)}
.foot-links{display:flex;gap:2rem;flex-wrap:wrap}
.foot-links a{font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,246,238,.55);transition:color var(--dur-fast) var(--ease-c)}.foot-links a:hover{color:var(--orange)}
.foot-badges{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.foot-badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,246,238,.15);border-radius:6px;padding:.3rem .7rem;font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,246,238,.45);transition:all var(--dur-fast) var(--ease-c)}
.foot-badge:hover{border-color:var(--orange);color:var(--cream)}
.foot-badge svg{flex-shrink:0;opacity:.6}

/* ═══════════════════════════════════════════
   LEGAL OVERLAY
═══════════════════════════════════════════ */
#legal-overlay{background:var(--bg);overflow-y:auto;overflow-x:hidden}
.lgl-nav{position:sticky;top:0;z-index:10;padding:1.1rem 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(12,8,0,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--o-12)}
html.theme-blue .lgl-nav{background:rgba(6,16,30,.92);border-bottom-color:var(--o-12)}
.lgl-brand{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.08em;color:var(--cream)}
.lgl-brand span{color:var(--orange)}
.lgl-back{display:inline-flex;align-items:center;gap:.55rem;background:transparent;border:1px solid rgba(255,246,238,.14);color:rgba(255,246,238,.55);border-radius:100px;padding:.45rem 1.1rem;font-size:.75rem;font-weight:500;letter-spacing:.08em;transition:all var(--dur-fast) var(--ease-c)}
.lgl-back:hover{color:var(--cream);border-color:var(--orange)}
html.theme-blue .lgl-back{border-color:var(--o-12)}.html.theme-blue .lgl-back:hover{border-color:var(--o-20)}
.lgl-tabs{display:flex;gap:.5rem;padding:.6rem 5vw;background:rgba(12,8,0,.6);border-bottom:1px solid var(--o-05);overflow-x:auto;-webkit-overflow-scrolling:touch}
html.theme-blue .lgl-tabs{background:rgba(6,16,30,.6);border-bottom-color:var(--o-05)}
.lgl-tab{background:transparent;border:1px solid rgba(255,246,238,.1);color:rgba(255,246,238,.4);border-radius:100px;padding:.4rem 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:all var(--dur-fast) var(--ease-c)}
.lgl-tab:hover{border-color:var(--orange);color:rgba(255,246,238,.7)}
.lgl-tab.active{background:var(--orange-dk);border-color:var(--orange-dk);color:#fff}
.lgl-page{display:none;max-width:860px;margin:0 auto;padding:3.5rem 5vw 6rem}
.lgl-page.active{display:block}
.lgl-page-hero{margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid var(--o-12);position:relative}
.lgl-label{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.lgl-label::before{content:'—'}
.lgl-title{font-family:'DM Serif Display',serif;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.1;color:var(--cream);margin-bottom:.8rem}
.lgl-meta{font-size:.8rem;color:rgba(255,246,238,.3);letter-spacing:.04em}
.lgl-section{margin-bottom:3rem}
.lgl-section h2{font-family:'DM Serif Display',serif;font-size:1.55rem;color:var(--cream);margin-bottom:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--o-12)}
.lgl-section h3{font-size:1rem;font-weight:600;color:var(--cream);margin:1.4rem 0 .5rem;letter-spacing:.02em}
.lgl-section p{font-size:.92rem;line-height:1.78;color:rgba(255,246,238,.55);margin-bottom:.9rem}
html.theme-blue .lgl-section p{color:rgba(237,244,255,.55)}
.lgl-section ul,.lgl-section ol{margin:.4rem 0 .9rem 1.4rem}
.lgl-section li{font-size:.89rem;line-height:1.72;color:rgba(255,246,238,.5);margin-bottom:.35rem}
html.theme-blue .lgl-section li{color:rgba(237,244,255,.5)}
.lgl-section strong{color:var(--cream);font-weight:600}
.lgl-section a{color:var(--orange);text-decoration:none;transition:opacity .2s}.lgl-section a:hover{opacity:.75}
.lgl-box{background:var(--o-05);border:1px solid var(--o-12);border-radius:.8rem;padding:1.3rem 1.5rem;margin:1.4rem 0}
.lgl-box p{margin:0;color:rgba(255,246,238,.55)}
html.theme-blue .lgl-box p{color:rgba(237,244,255,.55)}
.ck-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.84rem}
.ck-table th{background:var(--o-12);color:var(--cream);font-weight:600;padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--o-20)}
.ck-table td{padding:.7rem 1rem;border-bottom:1px solid rgba(255,246,238,.05);color:rgba(255,246,238,.5);vertical-align:top}
html.theme-blue .ck-table td{border-bottom-color:rgba(237,244,255,.05);color:rgba(237,244,255,.5)}
.ck-table tr:hover td{background:rgba(255,246,238,.02)}
.badge{display:inline-block;padding:.18rem .55rem;border-radius:100px;font-size:.68rem;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.badge-ess{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.badge-ana{background:var(--o-12);color:var(--orange);border:1px solid var(--o-20)}
.badge-mkt{background:rgba(168,85,247,.1);color:#c084fc;border:1px solid rgba(168,85,247,.2)}
.rights-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.4rem 0}
.right-card{background:rgba(255,246,238,.03);border:1px solid var(--o-12);border-radius:.75rem;padding:1.1rem 1.3rem}
html.theme-blue .right-card{background:rgba(237,244,255,.03);border-color:var(--o-12)}
.right-card h3{margin:0 0 .4rem;font-size:.88rem;color:var(--orange)}
.right-card p{margin:0;font-size:.82rem;color:rgba(255,246,238,.45)}
html.theme-blue .right-card p{color:rgba(237,244,255,.45)}

/* ═══════════════════════════════════════════
   HoReCa
═══════════════════════════════════════════ */
#horeca{padding:clamp(5rem,10vh,8rem) 5vw;background:var(--bg-2);position:relative;overflow-x:hidden;overflow-y:auto;color:var(--cream)}
#horeca::before{content:'';position:absolute;inset:0;background-image:var(--bg-lines);opacity:.35}
.horeca-intro{text-align:center;max-width:780px;margin:0 auto 2.5rem}
.horeca-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:1.4rem}
.horeca-eyebrow::before,.horeca-eyebrow::after{content:'';display:block;width:24px;height:1px;background:var(--orange);opacity:.5}
.horeca-h2{font-family:'DM Serif Display',serif;font-size:var(--fs-h2);line-height:1.05;color:var(--cream);margin-bottom:1.2rem}
.horeca-h2 em{font-style:italic;color:var(--orange)}
.horeca-lead{font-size:.98rem;line-height:1.78;color:rgba(255,246,238,.48);max-width:50ch;margin:0 auto}
html.theme-blue .horeca-lead{color:rgba(237,244,255,.48)}
.horeca-features{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:2rem auto 0;max-width:640px}
.horeca-feat{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500;color:rgba(255,246,238,.55);letter-spacing:.04em}
.horeca-feat::before{content:'✓';color:var(--orange);font-weight:700;font-size:.85rem}
html.theme-blue .horeca-feat{color:rgba(237,244,255,.55)}
.horeca-steps-label{font-family:'Bebas Neue',sans-serif;font-size:.8rem;letter-spacing:.22em;color:rgba(255,246,238,.25);text-align:center;margin-bottom:2rem;text-transform:uppercase}
html.theme-blue .horeca-steps-label{color:rgba(237,244,255,.25)}
.horeca-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-bottom:5rem;position:relative}
/* connecting line — solid accent */
.horeca-steps::before{content:'';position:absolute;top:3.6rem;left:calc(33.33% - .5rem);right:calc(33.33% - .5rem);height:1px;background:var(--orange);opacity:.2;pointer-events:none}
.horeca-step{background:var(--bg-card);border:1.5px solid var(--o-08);border-radius:1.2rem;padding:2.4rem 2rem;position:relative;overflow:hidden;transition:border-color .3s var(--ease-c),transform .3s var(--ease-c),box-shadow .3s var(--ease-c)}
.horeca-step:hover{border-color:var(--o-20);transform:translateY(-7px);box-shadow:0 24px 60px rgba(0,0,0,.3),0 0 0 1px var(--o-08)}
/* corner glow — solid orb + blur */
.horeca-step-glow{position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:var(--orange);opacity:.06;filter:blur(24px);pointer-events:none}
.horeca-step-num{font-family:'Bebas Neue',sans-serif;font-size:4.5rem;line-height:1;color:var(--orange);opacity:.1;position:absolute;bottom:1rem;right:1.5rem;letter-spacing:-.03em;transition:opacity .3s}
.horeca-step:hover .horeca-step-num{opacity:.25}
.horeca-step-icon{width:48px;height:48px;border-radius:12px;background:var(--o-08);border:1px solid var(--o-12);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.35rem;transition:transform .3s var(--ease-c),background .3s}
.horeca-step:hover .horeca-step-icon{transform:scale(1.1) rotate(-4deg);background:var(--o-12)}
.horeca-step-title{font-family:'DM Serif Display',serif;font-size:1.18rem;color:var(--cream);margin-bottom:.8rem;line-height:1.25}
.horeca-step-body{font-size:.86rem;line-height:1.72;color:rgba(255,246,238,.44)}
html.theme-blue .horeca-step-body{color:rgba(237,244,255,.44)}
.horeca-step-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.horeca-tag{font-size:.68rem;font-weight:600;letter-spacing:.07em;padding:.28rem .7rem;border-radius:100px;border:1px solid var(--o-20);color:var(--orange);background:var(--o-03)}
/* Pricing */
.horeca-pricing{margin-bottom:5rem}
.horeca-section-title{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--cream);text-align:center;margin-bottom:.5rem}
.horeca-section-note{text-align:center;font-size:.83rem;color:rgba(255,246,238,.38);letter-spacing:.06em;margin-bottom:3rem;text-transform:uppercase}
html.theme-blue .horeca-section-note{color:rgba(237,244,255,.38)}
.horeca-plans{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:840px;margin:0 auto}
.horeca-plan{border-radius:1.4rem;padding:2.8rem 2.4rem;position:relative;overflow:hidden;transition:transform .3s var(--ease-c),box-shadow .3s}
.horeca-plan:hover{transform:translateY(-6px)}
.horeca-plan.basic{background:var(--bg-card);border:1.5px solid var(--o-12)}
/* premium — solid accent, sem gradient */
.horeca-plan.premium{background:var(--orange-dk);border:none;box-shadow:0 0 60px var(--glow-strong),0 24px 60px rgba(0,0,0,.3)}
.horeca-plan.premium:hover{box-shadow:0 0 80px var(--glow-strong),0 32px 80px rgba(0,0,0,.35)}
.plan-badge{position:absolute;top:1.4rem;right:1.4rem;background:rgba(255,255,255,.14);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.28rem .8rem;border-radius:100px}
.plan-price{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.2rem,5.5vw,4.5rem);line-height:1;letter-spacing:-.01em}
.horeca-plan.basic .plan-price{color:var(--orange)}
.horeca-plan.premium .plan-price{color:#fff}
.plan-price-note{font-size:.76rem;margin-bottom:1.8rem;letter-spacing:.03em;margin-top:.2rem}
.horeca-plan.basic .plan-price-note{color:rgba(255,246,238,.45)}
html.theme-blue .horeca-plan.basic .plan-price-note{color:rgba(237,244,255,.45)}
.horeca-plan.premium .plan-price-note{color:rgba(255,255,255,.6)}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.2rem}
.plan-features li{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;line-height:1.55}
.plan-features li::before{content:'✓';font-weight:700;flex-shrink:0;margin-top:.05rem}
.horeca-plan.basic .plan-features li{color:rgba(255,246,238,.52)}
.horeca-plan.basic .plan-features li::before{color:var(--orange)}
html.theme-blue .horeca-plan.basic .plan-features li{color:rgba(237,244,255,.52)}
.horeca-plan.premium .plan-features li{color:rgba(255,255,255,.82)}
.horeca-plan.premium .plan-features li::before{color:rgba(255,255,255,.9)}
.plan-cta{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:.95rem 1.5rem;border-radius:.8rem;font-size:.88rem;font-weight:600;letter-spacing:.04em;transition:all .3s var(--ease-c);text-decoration:none;position:relative;overflow:hidden}
.horeca-plan.basic .plan-cta{background:var(--orange-dk);color:#fff;border:none}
.horeca-plan.basic .plan-cta:hover{background:var(--orange-dkr);transform:translateY(-2px);box-shadow:0 10px 28px var(--glow-strong)}
.horeca-plan.premium .plan-cta{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.horeca-plan.premium .plan-cta:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}
/* Testimonials */
.horeca-testimonials{margin-top:1rem}
.horeca-test-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:880px;margin:0 auto}
.horeca-test-card{background:var(--bg-card);border:1px solid var(--o-08);border-radius:1rem;padding:1.8rem;position:relative;transition:border-color .3s,transform .3s var(--ease-c)}
.horeca-test-card:hover{border-color:var(--o-20);transform:translateY(-3px)}
.horeca-test-card::before{content:'"';font-family:'DM Serif Display',serif;font-size:5rem;line-height:.7;color:var(--orange);opacity:.14;position:absolute;top:1.2rem;right:1.4rem}
.horeca-test-text{font-size:.88rem;line-height:1.74;color:rgba(255,246,238,.52);font-style:italic;margin-bottom:1.3rem}
html.theme-blue .horeca-test-text{color:rgba(237,244,255,.52)}
.horeca-test-author{display:flex;align-items:center;gap:.75rem}
.horeca-test-av{width:38px;height:38px;border-radius:50%;background:var(--o-08);border:1.5px solid var(--o-12);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.95rem;color:var(--orange);flex-shrink:0}
.horeca-test-name{font-size:.82rem;font-weight:600;color:var(--cream)}
.horeca-test-co{font-size:.72rem;color:rgba(255,246,238,.35);margin-top:.1rem}
html.theme-blue .horeca-test-co{color:rgba(237,244,255,.35)}
.horeca-cta-strip{margin-top:4.5rem;padding:3rem 2.5rem;background:var(--o-05);border:1px solid var(--o-12);border-radius:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:860px;margin-left:auto;margin-right:auto}
.horeca-cta-text h3{font-family:'DM Serif Display',serif;font-size:1.55rem;color:var(--cream);margin-bottom:.4rem}
.horeca-cta-text p{font-size:.87rem;color:rgba(255,246,238,.45);max-width:36ch;line-height:1.65}
html.theme-blue .horeca-cta-text p{color:rgba(237,244,255,.45)}

/* ═══════════════════════════════════════════
   PERFORMANCE — content-visibility for paint optimization
═══════════════════════════════════════════ */
#horeca{content-visibility:auto;contain-intrinsic-size:auto 800px}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
/* pause animations when tab hidden */
html.page-hidden *{animation-play-state:paused!important}
html.reduced-motion .hero-glow,html.reduced-motion .hero-glow2,html.reduced-motion .why-glow{animation:none}
html.reduced-motion .b2-orbit-ring.r1{animation:orbitSpin 22s linear infinite}
html.reduced-motion .b2-orbit-ring.r2{animation:orbitSpin 12s linear infinite reverse}
html.reduced-motion .b2-orbit-dot::after{animation:none}
@media(prefers-reduced-motion:reduce){.b2-orbit-ring.r1{animation:none}.b2-orbit-ring.r2{animation:none}.b2-orbit-dot::after{animation:none}.b2-orbit-dot,.b2-orbit-dot-2{animation:none}}
@media(pointer:coarse){.b2-orbit-ring.r1{animation:orbitSpin 22s linear infinite}.b2-orbit-ring.r2{animation:orbitSpin 12s linear infinite reverse}.b2-orbit-dot::after{animation:none}}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1024px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .rights-grid{grid-template-columns:1fr}
}
/* ── NAV — un singur rand la viewporturi intermediare (901–1200px) ── */
@media(min-width:901px) and (max-width:1200px){
  #nav{padding-left:3vw;padding-right:3vw}
  .nav-ul{gap:1rem;margin-left:1.5rem}
  .nav-ul a{font-size:.72rem;letter-spacing:.08em}
  .nav-utils{gap:.5rem}
  .nav-util-btn{padding:.4rem .7rem;font-size:.7rem;letter-spacing:.06em}
}
/* ── THEME LABEL EMOJI — ascunde bulinuta din nav, butonul toggle ramine ── */
#theme-label{display:none!important}
@media(max-width:900px){
  :root{--fs-display:clamp(3.2rem,7.5vw,5.8rem);--fs-h2:clamp(2.2rem,4.5vw,3.8rem)}
  .nav-ul{display:none}.nav-utils{gap:.5rem}.nav-ham{display:flex}
  .hero-head{grid-template-columns:1fr;grid-template-rows:auto auto;padding-top:5rem;gap:0;min-height:auto;text-align:center}
  .hero-left{grid-column:1;grid-row:1}
  .hero-title-col{padding-right:0}
  .hero-desc-col{align-items:center}
  .hero-actions{align-items:center;width:100%}
  .hero-eyebrow{text-align:center}
  .hero-desc{text-align:center}
  .hero-stats-col{grid-column:1;grid-row:2;flex-direction:column;padding:1rem 0 0;margin:0 auto;align-self:auto}
  .b2-hline{display:none}
  .b2-center-col{flex-direction:column}
  .b2-scene{width:clamp(200px,44vw,260px);height:clamp(200px,44vw,260px)}
  .b2-card{width:clamp(168px,38vw,220px)!important;height:clamp(168px,38vw,220px)!important}
  .b2-pulse-ring{inset:-24px}
  .b2-orbit-dot{width:115px;height:115px;margin-top:-115px;margin-left:-115px}
  .hero-desc-col{padding-right:0;padding-top:1rem;padding-bottom:.5rem}
  .hero-desc{max-width:100%}
  .hero-stats-col{padding:.5rem 0 0}
  [data-page="home"] #hero{overflow-y:auto;overflow-x:hidden}
  #about{grid-template-columns:1fr}
  .svc-header{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .why-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .proc-steps{flex-direction:column;gap:1rem}
  #contact{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .horeca-steps{grid-template-columns:1fr;gap:1.2rem}
  [data-page="auto-sh"] .horeca-steps,
  [data-page="auto-sh-en"] .horeca-steps{grid-template-columns:1fr 1fr;gap:1.2rem}
  .horeca-steps::before{display:none}
  .horeca-plans{grid-template-columns:1fr;max-width:480px}
  .horeca-test-grid{grid-template-columns:1fr;max-width:520px}
  .horeca-cta-strip{flex-direction:column;text-align:center;padding:2.2rem 1.8rem}
  .horeca-cta-text p{max-width:100%;margin:0 auto}
  footer{flex-direction:column;align-items:center;gap:.8rem}.scroll-pip{display:none}
  .lgl-tabs{gap:.3rem;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem}
}
@media(max-width:600px){
  :root{--fs-display:clamp(2.8rem,11vw,4.2rem);--fs-h2:clamp(1.9rem,7vw,3rem)}
  .hero-head{padding-top:4.5rem}
  .hero-title .line{display:block}
  .hero-desc-col{padding-top:.6rem;padding-bottom:.5rem}
  .hero-desc{font-size:.85rem}
  .hero-stats-col{padding:.5rem 0 0}
  .b2-scene{width:clamp(150px,40vw,200px);height:clamp(150px,40vw,200px)}
  .b2-card{width:clamp(126px,34vw,170px)!important;height:clamp(126px,34vw,170px)!important}
  .b2-lbl{font-size:clamp(1.8rem,7vw,2.6rem)!important}
  .b2-pulse-ring{inset:-14px}
  .b2-orbit-dot{width:80px;height:80px;margin-top:-80px;margin-left:-80px}
  .b2-orbit-ring.r3{inset:-20px}
  .b2-orbit-ring.r1{inset:-22px}
  .b2-sparkle{display:none}
  .b2-sub{font-size:.6rem;margin-top:.3rem}
  .svc-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .nav-util-btn span{display:none}
  .nav-cta-btn span{font-size:.72rem}
  .horeca-plans{grid-template-columns:1fr}
  .horeca-test-grid{grid-template-columns:1fr}
  .horeca-step{padding:1.8rem 1.5rem}
  [data-page="auto-sh"] .horeca-steps,
  [data-page="auto-sh-en"] .horeca-steps{grid-template-columns:1fr;gap:1rem}
  [data-page="auto-sh"] .horeca-intro,
  [data-page="auto-sh-en"] .horeca-intro{margin-bottom:2rem}
  [data-page="auto-sh"] .horeca-h2,
  [data-page="auto-sh-en"] .horeca-h2{font-size:clamp(1.9rem,7vw,3rem)}
  [data-page="auto-sh"] .horeca-plans,
  [data-page="auto-sh-en"] .horeca-plans{grid-template-columns:1fr}
  [data-page="auto-sh"] .horeca-cta-strip,
  [data-page="auto-sh-en"] .horeca-cta-strip{flex-direction:column;text-align:center;padding:2rem 1.5rem}
  .horeca-intro{margin-bottom:3.5rem}
  #services,#why,#process,#horeca,#auto,#stats{padding-left:5vw;padding-right:5vw}
  .svc-header,.about-left,.about-right,.ct-left,.ct-right{padding-left:5vw;padding-right:5vw}
  .proc-step{padding:1.5rem 1rem}
  .foot-links{gap:1.2rem;justify-content:center}
  .foot-badges{justify-content:center}
  /* — mobile compact: process — */
  .proc-dot{width:44px;height:44px;margin-bottom:.5rem}
  .proc-icon{display:none}
  .proc-title{font-size:1.1rem;margin-bottom:.5rem}
  .proc-desc{font-size:.83rem}
  /* — mobile compact: why — */
  .why-item{padding:1.2rem 1.2rem 1.3rem}
  .why-item-num{margin-bottom:.5rem}
  .why-item-icon{margin-bottom:.5rem;font-size:1.1rem}
  .why-item-title{font-size:1rem;margin-bottom:.4rem}
  .why-item-desc{font-size:.83rem}
  .why-header{margin-bottom:1.2rem}
  .why-h2{font-size:clamp(1.8rem,8vw,2.8rem);margin-bottom:.5rem}
  .why-intro{font-size:.88rem}
  /* — mobile compact: services — */
  [data-page="services"] .svc-header{gap:1rem}
  /* — mobile compact: contact — */
  .ct-h2{font-size:clamp(2rem,8vw,3.2rem);line-height:1}
  .ct-info{margin-top:1rem}
  .ct-info-item{padding:.6rem 0}
}

@media(max-width:400px){
  :root{--fs-display:clamp(2.4rem,13vw,3.2rem)}
  .hero-head{padding-top:4rem}
  .hero-actions{flex-direction:column;gap:.6rem}
  .btn-fill,.btn-ghost{width:100%;justify-content:center}
  .nav-cta-btn{display:none}
  .hero-eyebrow{font-size:.6rem;margin-bottom:.3rem}
  .b2-scene{width:clamp(130px,36vw,170px);height:clamp(130px,36vw,170px)}
  .b2-card{width:clamp(110px,30vw,146px)!important;height:clamp(110px,30vw,146px)!important}
  .b2-lbl{font-size:clamp(1.5rem,6vw,2.2rem)!important}
  .b2-orbit-dot{width:70px;height:70px;margin-top:-70px;margin-left:-70px}
  .b2-orbit-ring.r1{inset:-16px}
  .b2-orbit-ring.r3{inset:-14px}
  .b2-pulse-ring{inset:-10px}
}

/* ═══════════════════════════════════════════
   SMOOTH SCROLL — reduced-motion override
═══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ═══════════════════════════════════════════
   ACTIVE NAV — data-page attribute
═══════════════════════════════════════════ */
[data-page="about"] .nav-ul a[href="about.html"],
[data-page="services"] .nav-ul a[href="services.html"],
[data-page="why"] .nav-ul a[href="why.html"],
[data-page="process"] .nav-ul a[href="process.html"],
[data-page="horeca"] .nav-ul a[href="horeca.html"],
[data-page="contact"] .nav-ul a[href="contact.html"]{color:var(--cream)}
/* ABOUT — compact fit, no overflow */
[data-page="about"] .about-left,[data-page="about"] .about-right{padding-top:clamp(2rem,4vh,3.5rem);padding-bottom:clamp(2rem,4vh,3.5rem)}
[data-page="about"] .about-h2{font-size:clamp(2rem,3.2vw,3rem);margin-bottom:.8rem}
[data-page="about"] .about-stat-val{font-size:clamp(2.2rem,3vw,3rem)}
[data-page="about"] .about-quote{font-size:clamp(1.1rem,1.6vw,1.4rem);margin-bottom:1.2rem}
/* SERVICES — compact fit, no overflow */
[data-page="services"] #services{padding:clamp(1.5rem,3vh,2.5rem) 5vw}
[data-page="services"] .svc-header{margin-bottom:1.5rem}
[data-page="services"] .svc-h2{font-size:clamp(2rem,3.8vw,3.2rem)}
[data-page="services"] .svc-card{padding:1.5rem}
[data-page="services"] .svc-num{margin-bottom:.8rem}
[data-page="services"] .svc-icon{margin-bottom:.6rem}
[data-page="services"] .svc-title{margin-bottom:.6rem}
[data-page="services"] .svc-desc{margin-bottom:1rem;font-size:.83rem}
/* WHY — compact fit, no overflow */
[data-page="why"] #why{padding-top:clamp(1.5rem,3.5vh,3rem);padding-bottom:clamp(1.5rem,3.5vh,3rem)}
[data-page="why"] .why-header{margin-bottom:2rem}
[data-page="why"] .why-h2{font-size:clamp(2rem,4vw,3.5rem)}
/* PROCESS — compact fit, no overflow */
[data-page="process"] #process{padding-top:clamp(1.5rem,3.5vh,3rem);padding-bottom:clamp(1.5rem,3.5vh,3rem)}
[data-page="process"] .proc-header{margin-bottom:1.5rem}
/* CONTACT — compact fit, no overflow */
[data-page="contact"] .ct-left,[data-page="contact"] .ct-right{padding-top:clamp(2rem,5vh,4rem);padding-bottom:clamp(1.5rem,4vh,3rem)}

[data-page="about"] .nav-ul a[href="about.html"]::after,
[data-page="services"] .nav-ul a[href="services.html"]::after,
[data-page="why"] .nav-ul a[href="why.html"]::after,
[data-page="process"] .nav-ul a[href="process.html"]::after,
[data-page="horeca"] .nav-ul a[href="horeca.html"]::after,
[data-page="contact"] .nav-ul a[href="contact.html"]::after{width:100%}

/* ═══════════════════════════════════════════
   PAGE NAV — next/prev page strip
═══════════════════════════════════════════ */
.page-nav{display:flex;justify-content:center;gap:1rem;padding:.8rem 5vw;background:var(--bg-2);border-top:1px solid var(--o-08);flex-shrink:0}
.page-nav-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1.2rem;border-radius:100px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,246,238,.5);border:1px solid var(--o-12);background:transparent;transition:all var(--dur-fast) var(--ease-c);text-decoration:none;white-space:nowrap}
.page-nav-btn:hover{color:var(--cream);border-color:var(--orange);box-shadow:0 0 20px var(--o-10);transform:translateY(-1px)}
.page-nav-btn svg{flex-shrink:0}
.page-nav-btn.prev svg{transform:rotate(180deg)}
/* Light-background sections */
[data-page="about"] ~ .page-nav,[data-page="services"] ~ .page-nav{background:var(--cream-2);border-top:1px solid rgba(0,0,0,.06)}
[data-page="about"] ~ .page-nav .page-nav-btn,[data-page="services"] ~ .page-nav .page-nav-btn{color:var(--ink-60);border-color:rgba(0,0,0,.12)}
[data-page="about"] ~ .page-nav .page-nav-btn:hover,[data-page="services"] ~ .page-nav .page-nav-btn:hover{color:var(--orange-dk);border-color:var(--orange-dk)}
@media(max-width:400px){.page-nav{gap:.5rem;padding:.6rem 3vw}.page-nav-btn{padding:.45rem .8rem;font-size:.65rem}}

/* ═══════════════════════════════════════════
   HORECA SCROLL INDICATOR
═══════════════════════════════════════════ */
.horeca-scroll-hint{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.6rem 0 .6rem;pointer-events:none;user-select:none}
.horeca-scroll-hint-text{font-size:.65rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,246,238,.28)}
.horeca-scroll-hint-arrow{animation:hintBounce 1.8s ease-in-out infinite;color:rgba(255,246,238,.3);display:flex;align-items:center;justify-content:center}
@keyframes hintBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ═══════════════════════════════════════════
   PAGE-ENTER ANIMATION — fade in on return from legal
═══════════════════════════════════════════ */
@keyframes pageEnter{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
body.page-enter{animation:pageEnter .5s var(--ease-c) both}
@media(prefers-reduced-motion:reduce){body.page-enter{animation:none}}
/* ═══════════════════════════════════════════
   MOBILE PAGE-SPECIFIC OVERRIDES
   (must follow global compact rules to win cascade)
═══════════════════════════════════════════ */
@media(max-width:600px){
  [data-page="services"] .svc-card{padding:1.2rem}
  [data-page="services"] .svc-h2{font-size:clamp(1.8rem,8vw,2.6rem)}
  [data-page="contact"] .ct-left,[data-page="contact"] .ct-right{padding-top:1.5rem;padding-bottom:1.5rem}
  /* contact: use block layout on mobile so ct-left/right size to content */
  #contact{display:block}
}

/* ═══════════════════════════════════════════
   V2 — LAYOUT FIX + CENTERING + SPACING
   Fix page-nav/footer visibility + proper symmetry
═══════════════════════════════════════════ */

/* ── CORE FIX: account for fixed nav so page-nav+footer don't overflow ── */
/* Nav is ~62px fixed. Body flex starts at 0 (under nav). Adding padding-top
   makes body's flex children start below the nav → page-nav + footer visible */
html[data-page="about"] body,
html[data-page="services"] body,
html[data-page="why"] body,
html[data-page="process"] body,
html[data-page="contact"] body,
html[data-page="horeca"] body,
html[data-page="auto-sh"] body,
html[data-page="auto-sh-en"] body {
  padding-top: 62px;
}

/* ── CONTACT — center both columns symmetrically ── */
[data-page="contact"] #contact {
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
}
[data-page="contact"] .ct-left,
[data-page="contact"] .ct-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(3rem, 7vh, 6rem);
  padding-bottom: clamp(3rem, 7vh, 6rem);
}
/* Fix: both panels start at same vertical position */
[data-page="contact"] .ct-left {
  padding-top: clamp(3rem, 7vh, 6rem);
}
[data-page="contact"] .ct-right {
  padding-top: clamp(3rem, 7vh, 6rem);
}
[data-page="contact"] .ct-h2 {
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
}
[data-page="contact"] .ct-info { gap: 1.8rem; }
[data-page="contact"] .form-title-wrap { margin-bottom: 2rem; }
[data-page="contact"] .form-title { font-size: 1.9rem; }
[data-page="contact"] .form-grid { gap: 1.2rem 1.5rem; }
[data-page="contact"] .ftextarea { min-height: 120px; }

/* ── ABOUT — stretch both panels, center content, bigger text ── */
[data-page="about"] #about {
  align-items: stretch;
  flex: 1 1 0;
  min-height: 0;
}
[data-page="about"] .about-left,
[data-page="about"] .about-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(3rem, 7vh, 6rem);
  padding-bottom: clamp(3rem, 7vh, 6rem);
}
/* Bigger quote text */
[data-page="about"] .about-quote {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-bottom: 2.2rem;
  line-height: 1.45;
}
/* Bigger h2 */
[data-page="about"] .about-h2 {
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  margin-bottom: 1.4rem;
}
[data-page="about"] .about-stat-val {
  font-size: clamp(3rem, 4.2vw, 3.8rem);
}
[data-page="about"] .about-stats { gap: 1.8rem; margin-bottom: 1.8rem; }
[data-page="about"] .about-body { margin-bottom: 1.1rem; }
[data-page="about"] .about-pills { margin: 1.4rem 0; gap: .55rem; }

/* ── SERVICES — flex column, start (nu center — center + overflow = content deasupra nav!) ── */
[data-page="services"] #services {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(3rem, 7vh, 5.5rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  overflow-y: auto;
}
[data-page="services"] .svc-header { margin-bottom: clamp(2rem, 4vh, 3.5rem); }
[data-page="services"] .svc-h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
[data-page="services"] .svc-card { padding: 2rem 2rem 2.2rem; }
[data-page="services"] .svc-num { margin-bottom: 1rem; }
[data-page="services"] .svc-icon { margin-bottom: .9rem; }
[data-page="services"] .svc-title { font-size: 1.55rem; margin-bottom: .9rem; }
[data-page="services"] .svc-desc { font-size: .9rem; margin-bottom: 1.5rem; }
[data-page="services"] .svc-grid { gap: 1.8rem; }

/* ── WHY — flex column start (center + overflow = content sub nav!) ── */
[data-page="why"] #why {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(3rem, 7vh, 5.5rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  overflow-y: auto;
}
[data-page="why"] .why-header {
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
  max-width: 52ch;
}
[data-page="why"] .why-h2 { font-size: clamp(2.8rem, 5vw, 5rem); line-height: .9; }
[data-page="why"] .why-intro { font-size: 1rem; margin-top: 1.2rem; }
[data-page="why"] .why-grid { gap: 1.5rem; }
[data-page="why"] .why-item {
  padding: 2rem 1.8rem 2.4rem;
}
[data-page="why"] .why-item-title { font-size: 1.2rem; margin-bottom: .8rem; }
[data-page="why"] .why-item-desc { font-size: .88rem; line-height: 1.65; }

/* ── PROCESS — flex column start (center + overflow = content sub nav!) ── */
[data-page="process"] #process {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(3rem, 7vh, 5.5rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  overflow-y: auto;
}
[data-page="process"] .proc-header { margin-bottom: clamp(2.5rem, 5vh, 4.5rem); }
[data-page="process"] .proc-h2 { font-size: clamp(2.4rem, 4vw, 3.8rem); }
[data-page="process"] .proc-sub { font-size: 1rem; margin-top: 1.4rem; max-width: 46ch; }
[data-page="process"] .proc-step { padding: 2.2rem 2.5rem 2.2rem 2rem; }
[data-page="process"] .proc-dot {
  width: 60px; height: 60px; font-size: 1.1rem; margin-bottom: 2rem;
}
[data-page="process"] .proc-title { font-size: 1.35rem; margin-bottom: .9rem; }
[data-page="process"] .proc-desc { font-size: .9rem; line-height: 1.7; }

/* ── HoReCa — breathing room sub nav (v63 fix: era prea mic clamp 1.5rem) ── */
[data-page="horeca"] #horeca {
  padding-top: clamp(2.5rem, 5vh, 4.5rem);
}
[data-page="horeca"] .horeca-intro {
  margin-bottom: .8rem;
  padding-bottom: 0;
  max-width: 680px;
}
[data-page="horeca"] .horeca-h2 {
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.08;
  margin-bottom: .9rem;
}
[data-page="horeca"] .horeca-eyebrow {
  margin-bottom: 1rem;
}
[data-page="horeca"] .horeca-lead {
  font-size: .92rem;
  max-width: 48ch;
}
[data-page="horeca"] .horeca-features {
  margin-top: 1.2rem;
}
/* ── AUTO SH — layout fixes ── */
[data-page="auto-sh"] #auto,
[data-page="auto-sh-en"] #auto {
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
[data-page="auto-sh"] .horeca-scroll-hint,
[data-page="auto-sh-en"] .horeca-scroll-hint {
  display: none;
}
[data-page="auto-sh"] .horeca-intro,
[data-page="auto-sh-en"] .horeca-intro {
  margin-bottom: 2rem;
  max-width: 720px;
}
[data-page="auto-sh"] .horeca-h2,
[data-page="auto-sh-en"] .horeca-h2 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.04;
  margin-bottom: .9rem;
}
[data-page="auto-sh"] .horeca-eyebrow,
[data-page="auto-sh-en"] .horeca-eyebrow {
  margin-bottom: 1rem;
}
[data-page="auto-sh"] .horeca-features,
[data-page="auto-sh-en"] .horeca-features {
  margin-top: 1.2rem;
}
[data-page="auto-sh"] .horeca-steps,
[data-page="auto-sh-en"] .horeca-steps {
  margin-bottom: 3rem;
}
[data-page="auto-sh"] .horeca-steps::before,
[data-page="auto-sh-en"] .horeca-steps::before {
  left: calc(33.33% - .5px);
  right: calc(33.33% - .5px);
}
[data-page="auto-sh"] .horeca-pricing,
[data-page="auto-sh-en"] .horeca-pricing {
  margin-bottom: 3rem;
}
[data-page="auto-sh"] .horeca-plans,
[data-page="auto-sh-en"] .horeca-plans {
  max-width: 860px;
  grid-template-columns: 1fr 1fr;
}
[data-page="auto-sh"] .horeca-cta-strip,
[data-page="auto-sh-en"] .horeca-cta-strip {
  margin-top: 3rem;
}
[data-page="horeca"] .horeca-scroll-hint {
  margin-top: .4rem;
  margin-bottom: .8rem;
  padding: .3rem 0;
}

/* ── Mobile overrides ── */
@media(max-width:900px) {
  html[data-page="about"] body,
  html[data-page="services"] body,
  html[data-page="why"] body,
  html[data-page="process"] body,
  html[data-page="contact"] body,
  html[data-page="horeca"] body { padding-top: 58px; }
  [data-page="about"] .about-left,
  [data-page="about"] .about-right,
  [data-page="contact"] .ct-left,
  [data-page="contact"] .ct-right {
    padding-top: clamp(2.5rem, 5vh, 4rem);
    padding-bottom: clamp(2.5rem, 5vh, 4rem);
  }
}
@media(max-width:600px) {
  html[data-page="about"] body,
  html[data-page="services"] body,
  html[data-page="why"] body,
  html[data-page="process"] body,
  html[data-page="contact"] body,
  html[data-page="horeca"] body { padding-top: 54px; }
  [data-page="about"] .about-quote { font-size: clamp(1.1rem, 3.5vw, 1.4rem); }
  [data-page="about"] .about-h2 { font-size: clamp(2rem, 7vw, 2.8rem); }
  [data-page="why"] .why-h2 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  [data-page="process"] .proc-h2 { font-size: clamp(2rem, 8vw, 3rem); }
  [data-page="services"] #services,
  [data-page="why"] #why,
  [data-page="process"] #process {
    padding-top: clamp(2rem, 4vh, 3rem);
    padding-bottom: clamp(2rem, 4vh, 3rem);
  }
}

/* ── HOME — hero already accounts for fixed nav via its own padding-top ── */
/* No body padding-top override needed for home; hero-head has clamp(5rem,10vh,7rem) */
/* Home page-nav style (light bg since hero is dark) */
[data-page="home"] .page-nav {
  background: var(--bg);
  border-top: 1px solid var(--o-12);
}
[data-page="home"] .page-nav .page-nav-btn {
  color: rgba(255,246,238,.5);
  border-color: var(--o-12);
}
[data-page="home"] .page-nav .page-nav-btn:hover {
  color: var(--cream);
  border-color: var(--orange);
}

/* ── HOME hero layout fix — proper sizing, centering & symmetry ── */

/* 1. Title: smaller so it fits + doesn't overflow into nav */
[data-page="home"] .hero-title {
  font-size: clamp(2.4rem, min(5.8vw, 8.5vh), 5.2rem) !important;
}

/* 2. Hero-head: proper top padding (nav is ~62px) + even bottom */
[data-page="home"] .hero-head {
  padding-top: clamp(4.5rem, 9vh, 6.5rem);
  padding-bottom: clamp(1.5rem, 3vh, 3rem);
  align-items: center;
}

/* 3. B2B/B2C orb: truly vertically centered in the grid cell */
.hero-stats-col {
  padding: 0 !important;
  align-self: center !important;
  align-items: center;
  justify-content: center;
}

/* 4. Hero allows overflow so buttons never clip */
[data-page="home"] #hero {
  overflow: hidden;
}
[data-page="home"] .hero-desc-col {
  padding-top: clamp(.6rem, 1.2vh, 1.5rem);
  gap: clamp(.5rem, 1vh, 1.2rem);
}

/* 5. Tight height fallback */
@media (max-height: 640px) {
  [data-page="home"] #hero { overflow-y: auto; }
  [data-page="home"] .hero-title {
    font-size: clamp(2rem, min(5vw, 7vh), 4rem) !important;
  }
}

/* ═══════════════════════════════════════════
   MOBILE COMPLETE FIX (≤900px)
   Unlock viewport, natural scroll, spacious layout
═══════════════════════════════════════════ */
@media(max-width:900px) {

  /* 1. UNLOCK the html/body viewport lock — let pages scroll naturally */
  html {
    overflow: auto !important;
    height: auto !important;
  }
  body {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding-top: 58px;
  }
  section {
    flex: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
  }
  footer { flex-shrink: unset; }

  /* 2. Remove body padding-top we added in V2 (now handled above) */
  html[data-page="about"] body,
  html[data-page="services"] body,
  html[data-page="why"] body,
  html[data-page="process"] body,
  html[data-page="contact"] body,
  html[data-page="horeca"] body {
    padding-top: 58px;
  }

  /* 3. HOME — natural flow, hero fills screen then scrolls down */
  [data-page="home"] #hero {
    flex: none !important;
    height: auto;
    min-height: calc(100svh - 58px);
    overflow: visible !important;
  }
  [data-page="home"] .hero-head {
    min-height: calc(100svh - 58px - 3.5rem);
    padding-top: 2.5rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(2.2rem, 10vw, 4rem) !important;
  }
  [data-page="home"] .hero-left { grid-column: unset; grid-row: unset; }
  [data-page="home"] .hero-stats-col {
    padding: 0 !important;
    margin: 0 auto;
    align-self: unset !important;
  }
  /* B2B/B2C orb — compact, centered on mobile */
  .b2-scene {
    width: clamp(160px, 42vw, 220px) !important;
    height: clamp(160px, 42vw, 220px) !important;
  }
  .b2-card {
    width: clamp(135px, 36vw, 186px) !important;
    height: clamp(135px, 36vw, 186px) !important;
  }

  /* 4. ABOUT — stack panels, full padding, no clipping */
  [data-page="about"] #about {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
  }
  [data-page="about"] .about-left,
  [data-page="about"] .about-right {
    justify-content: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: 0 !important;
    height: auto !important;
  }
  [data-page="about"] .about-quote {
    font-size: clamp(1.1rem, 3.8vw, 1.4rem);
    margin-bottom: 1.8rem;
  }
  [data-page="about"] .about-h2 {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }
  [data-page="about"] .about-stat-val {
    font-size: clamp(2.4rem, 7vw, 3rem);
  }
  [data-page="about"] .about-stats { gap: 1.4rem; }

  /* 5. SERVICES — single column, no height lock */
  [data-page="services"] #services {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }
  [data-page="services"] .svc-grid {
    grid-template-columns: 1fr !important;
    gap: 1.4rem;
  }
  [data-page="services"] .svc-card { padding: 1.8rem; }

  /* 6. WHY — natural flow */
  [data-page="why"] #why {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }
  [data-page="why"] .why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem;
  }
  [data-page="why"] .why-item {
    padding: 1.4rem 1.2rem 1.6rem;
  }
  [data-page="why"] .why-header { margin-bottom: 1.8rem; }
  [data-page="why"] .why-h2 { font-size: clamp(2.2rem, 7vw, 3.2rem); }

  /* 7. PROCESS — natural flow */
  [data-page="process"] #process {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }
  [data-page="process"] .proc-header { margin-bottom: 2rem; }
  [data-page="process"] .proc-steps { flex-direction: column; gap: 1rem; }
  [data-page="process"] .proc-step { padding: 1.8rem 1.5rem; }

  /* 8. CONTACT — stacked, no height lock */
  [data-page="contact"] #contact {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
  }
  [data-page="contact"] .ct-left,
  [data-page="contact"] .ct-right {
    justify-content: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
    height: auto !important;
    min-height: 0 !important;
  }
  [data-page="contact"] .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* 9. HORECA — natural scroll */
  [data-page="horeca"] #horeca {
    padding-top: 2rem;
    padding-bottom: 3rem;
    height: auto !important;
    overflow: visible !important;
    content-visibility: visible !important;
  }
  [data-page="horeca"] .horeca-h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  }

  /* 10. NAV fixed height adjust for mobile */
  #nav { padding: 1rem 4vw; }

  /* 11. Page-nav always visible */
  .page-nav {
    position: relative;
    z-index: 1;
    display: flex !important;
  }
  footer {
    display: flex !important;
    position: relative;
    z-index: 1;
  }

  /* 12. SCROLL HINT on mobile for pages that need it */
  .mobile-scroll-hint {
    display: flex !important;
  }
}

/* Extra small: ≤480px */
@media(max-width:480px) {
  body { padding-top: 54px; }
  html[data-page="about"] body,
  html[data-page="services"] body,
  html[data-page="why"] body,
  html[data-page="process"] body,
  html[data-page="contact"] body,
  html[data-page="horeca"] body {
    padding-top: 54px;
  }
  [data-page="why"] .why-grid {
    grid-template-columns: 1fr !important;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }
  .b2-scene {
    width: clamp(130px, 38vw, 180px) !important;
    height: clamp(130px, 38vw, 180px) !important;
  }
  .b2-card {
    width: clamp(110px, 32vw, 152px) !important;
    height: clamp(110px, 32vw, 152px) !important;
  }
}

/* ── Mobile scroll hint — shown only on mobile ── */
.mobile-scroll-hint {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1rem 0 .5rem;
  pointer-events: none;
}
.mobile-scroll-hint-text {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,246,238,.35);
}
html.theme-blue .mobile-scroll-hint-text { color: rgba(237,244,255,.35); }
.mobile-scroll-hint-arrow {
  animation: hintBounce 1.8s ease-in-out infinite;
  color: rgba(255,246,238,.35);
  display: flex;
}
html.theme-blue .mobile-scroll-hint-arrow { color: rgba(237,244,255,.35); }
/* Scroll hint now positioned at page top (dark body bg) — use light color for all pages */
[data-page="services"] .mobile-scroll-hint-text,
[data-page="about"] .mobile-scroll-hint-text {
  color: rgba(255,246,238,.4);
}
[data-page="services"] .mobile-scroll-hint-arrow,
[data-page="about"] .mobile-scroll-hint-arrow {
  color: rgba(255,246,238,.4);
}


/* ═══════════════════════════════════════════
   MOBILE PATCH — Marquee + Hero + Glisează
═══════════════════════════════════════════ */

/* ── 1. MARQUEE — prevent infinite scroll bug, force full width ── */
.marquee-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media(max-width:900px) {
  /* Clip horizontal overflow on html so body stays viewport-width */
  html { overflow-x: hidden !important; }

  /* Marquee always full-width */
  .marquee-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
  }

  /* ── 2. HOME HERO — tighter spacing, no empty gaps ── */
  [data-page="home"] .hero-head {
    padding-top: 2rem !important;
    padding-bottom: 1.2rem !important;
    gap: 0.6rem !important;
    justify-content: flex-start !important;
  }
  [data-page="home"] .hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  [data-page="home"] .hero-title-col {
    margin-bottom: 0;
  }
  [data-page="home"] .hero-desc-col {
    padding-top: 0.3rem !important;
    padding-bottom: 0.2rem !important;
    gap: 0.6rem !important;
    align-items: center;
  }
  [data-page="home"] .hero-stats-col {
    padding: 0.4rem 0 0 !important;
    margin-top: 0 !important;
  }
  [data-page="home"] .hero-actions {
    gap: 0.6rem !important;
  }
  .b2-sub {
    margin-top: 0.2rem !important;
  }

  /* ── 3. GLISEAZĂ — clean text + arrow, no box, top-of-page positioning ── */
  .mobile-scroll-hint {
    display: none;            /* hidden by default */
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.2rem 0 0.8rem;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: none;
    user-select: none;
    width: 100%;
  }
  .mobile-scroll-hint-text {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(255,246,238,.4);
    background: transparent;
    border: none;
  }
  .mobile-scroll-hint-arrow {
    color: rgba(255,246,238,.4);
    animation: hintBounce 1.8s ease-in-out infinite;
    display: flex;
  }
  /* All pages use light color — hint now sits on dark body bg at page top */
  html.theme-blue .mobile-scroll-hint-text { color: rgba(200,220,255,.4); }
  html.theme-blue .mobile-scroll-hint-arrow { color: rgba(200,220,255,.4); }

  /* Show scroll hint ONLY on home page at mobile — not on other pages */
  [data-page="home"] .mobile-scroll-hint { display: flex !important; }
}

@media(max-width:480px) {
  [data-page="home"] .hero-head {
    padding-top: 1.5rem !important;
    gap: 0.5rem !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 2 — Multi-fix batch
═══════════════════════════════════════════ */

/* ── 1. PROCESS — same gradient on both halves of the page ── */
#process::before {
  /* Remove the accent overlay so all steps share the same bg */
  display: none;
}
/* All 3 steps: uniform dark card bg */
.proc-step {
  background: transparent;
}

/* ── 2. CONTACT — align ct-left content to top, matching ct-right ── */
[data-page="contact"] .ct-left,
[data-page="contact"] .ct-right {
  justify-content: flex-start !important;
  padding-top: clamp(3.5rem, 8vh, 6rem) !important;
  padding-bottom: clamp(3rem, 7vh, 6rem) !important;
}
[data-page="contact"] .ct-h2 {
  margin-bottom: 1.8rem;
}
[data-page="contact"] .ct-info {
  gap: 1.5rem;
}

/* ── 3. ABOUT page mobile — fix about-left (stats panel) top/bottom padding symmetry ── */
@media(max-width:900px) {
  [data-page="about"] .about-left {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  /* ROI maxim pill row — justify all pills the same so ROI maxim lines up left */
  [data-page="about"] .about-pills {
    justify-content: flex-start;
  }
  /* Make .pill that wraps to second row start from left (not center) */
  [data-page="about"] .about-right {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ── 4. WHY page — remove excess bottom space ── */
  [data-page="why"] #why {
    padding-bottom: 1.5rem !important;
  }
  [data-page="why"] .why-grid {
    margin-bottom: 0;
  }

  /* ── 5. SERVICES page mobile — bigger header text, smaller cards ── */
  [data-page="services"] .svc-h2 {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
  }
  [data-page="services"] .svc-sub {
    font-size: .9rem !important;
  }
  [data-page="services"] .svc-card {
    padding: 1.2rem 1.2rem 1.4rem !important;
  }
  [data-page="services"] .svc-title {
    font-size: 1.2rem !important;
  }
  [data-page="services"] .svc-desc {
    font-size: .85rem !important;
  }
  [data-page="services"] .svc-num {
    margin-bottom: .6rem !important;
  }
  [data-page="services"] .svc-icon {
    margin-bottom: .5rem !important;
    font-size: 1.3rem !important;
  }
  [data-page="services"] .svc-header {
    margin-bottom: 1.2rem !important;
  }

  /* ── 6. HOME — no scroll, even spacing, bigger feel ── */
  [data-page="home"] #hero {
    min-height: calc(100svh - 58px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  [data-page="home"] .hero-head {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.4rem !important;
    text-align: center;
  }
  [data-page="home"] .hero-left {
    gap: 0.4rem !important;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(2.4rem, 10.5vw, 3.8rem) !important;
  }
  [data-page="home"] .hero-desc-col {
    padding-top: 0.2rem !important;
    padding-bottom: 0 !important;
    gap: 0.5rem !important;
  }
  [data-page="home"] .hero-actions {
    gap: 0.5rem !important;
  }
  [data-page="home"] .hero-stats-col {
    padding: 0.3rem 0 0 !important;
  }
  [data-page="home"] .b2-sub {
    margin-top: 0.15rem !important;
  }
  /* ── 7. FOOTER — smaller, less padding ── */
  footer {
    padding: 0.9rem 5vw !important;
    gap: 0.6rem !important;
    min-height: 0 !important;
  }
  .foot-brand {
    font-size: .65rem !important;
  }
  .foot-links {
    gap: 0.8rem !important;
  }
  .foot-links a {
    font-size: .62rem !important;
  }
  .foot-badges {
    gap: .4rem !important;
  }
  .foot-badge {
    font-size: .58rem !important;
    padding: .2rem .5rem !important;
  }
  .page-nav {
    padding: 0.5rem 5vw !important;
  }
  .page-nav-btn {
    padding: .4rem 1rem !important;
    font-size: .68rem !important;
  }
}

@media(max-width:480px) {
  /* Footer even more compact */
  footer {
    padding: 0.75rem 5vw !important;
    gap: 0.5rem !important;
  }
  [data-page="home"] .hero-head {
    padding-top: 0.8rem !important;
    gap: 0.3rem !important;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(2.2rem, 11vw, 3.2rem) !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 3 — Full multi-page mobile fix
═══════════════════════════════════════════ */

/* ── 1. NAV "Solicită ofertă" button — fix size, proper font ── */
.nav-cta-btn {
  padding: .55rem 1.1rem !important;
  font-size: .72rem !important;
  line-height: 1.2;
  white-space: nowrap !important;
}
.nav-cta-btn span {
  font-size: .72rem !important;
}

/* ── 2. LEGAL — remove top gap, fix nav position ── */
/* Legal page has no fixed nav, the lgl-nav IS the top bar */
[data-page="legal"] body,
html:not([data-page]) body {
  padding-top: 0 !important;
}
.lgl-nav {
  padding: .9rem 5vw !important;
}
/* Tabs bar — no extra gap */
.lgl-tabs {
  padding-top: .4rem !important;
  padding-bottom: .4rem !important;
}

/* ── 3. FOOTER — restore to normal size (un-do over-compact from patch 2) ── */
@media(max-width:900px) {
  footer {
    padding: 1.2rem 5vw !important;
    gap: .9rem !important;
    min-height: 0 !important;
  }
  .foot-brand {
    font-size: .7rem !important;
    letter-spacing: .12em;
  }
  .foot-links {
    gap: 1rem !important;
  }
  .foot-links a {
    font-size: .68rem !important;
  }
  .foot-badges {
    gap: .5rem !important;
  }
  .foot-badge {
    font-size: .62rem !important;
    padding: .25rem .6rem !important;
  }

  /* ── 4. PAGE NAV buttons — bigger ── */
  .page-nav {
    padding: .65rem 5vw !important;
  }
  .page-nav-btn {
    padding: .55rem 1.3rem !important;
    font-size: .74rem !important;
  }

  /* ── 5. HOME — no scroll on mobile, everything visible ── */
  [data-page="home"] body {
    overflow: hidden !important;
    height: 100svh !important;
    height: 100vh !important;
  }
  [data-page="home"] #hero {
    flex: 1 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  [data-page="home"] .hero-head {
    flex: 1;
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important;
    gap: 0.2rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center;
  }
  [data-page="home"] .hero-left {
    gap: 0.2rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(2.1rem, 10vw, 3.5rem) !important;
    line-height: 1 !important;
  }
  [data-page="home"] .hero-eyebrow {
    font-size: .58rem !important;
    margin-bottom: .1rem !important;
  }
  [data-page="home"] .hero-desc {
    font-size: .8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
  }
  [data-page="home"] .hero-desc-col {
    padding-top: 0.2rem !important;
    padding-bottom: 0 !important;
    gap: 0.35rem !important;
    align-items: center;
  }
  [data-page="home"] .hero-actions {
    gap: 0.45rem !important;
    margin-top: 0 !important;
  }
  [data-page="home"] .btn-fill,
  [data-page="home"] .btn-ghost {
    padding: .7rem 1.6rem !important;
    font-size: .8rem !important;
  }
  [data-page="home"] .hero-stats-col {
    padding: 0.25rem 0 0 !important;
    margin-top: 0 !important;
  }
  .b2-sub {
    margin-top: 0.5rem !important; /* more space below orb — "Acoperire completă" doesn't overlap */
    font-size: .58rem !important;
  }
  /* Marquee — pull up, less space above it */
  [data-page="home"] .marquee-wrap {
    margin-top: 0 !important;
  }

  /* ── 6. ABOUT — ROI maxim pill centered, Contactează-ne text centered ── */
  [data-page="about"] .about-pills {
    justify-content: center !important;
    text-align: center;
  }
  [data-page="about"] .btn-fill,
  [data-page="about"] .about-right .btn-fill {
    justify-content: center !important;
    text-align: center;
    display: flex !important;
  }

  /* ── 7. SERVICES — bigger header text, smaller cards ── */
  [data-page="services"] .svc-h2 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  [data-page="services"] .svc-card {
    padding: 1rem 1.1rem 1.2rem !important;
  }
  [data-page="services"] .svc-title {
    font-size: 1.15rem !important;
    margin-bottom: .4rem !important;
  }
  [data-page="services"] .svc-desc {
    font-size: .82rem !important;
    margin-bottom: .8rem !important;
  }
  [data-page="services"] .svc-num {
    margin-bottom: .4rem !important;
  }
  [data-page="services"] .svc-icon {
    margin-bottom: .3rem !important;
    font-size: 1.2rem !important;
  }
  [data-page="services"] .svc-header {
    margin-bottom: 1rem !important;
  }
  [data-page="services"] .svc-sub {
    font-size: .88rem !important;
  }

  /* ── 8. PROCESS — push steps to left, reduce left padding ── */
  [data-page="process"] .proc-step {
    padding-left: 0.8rem !important;
    padding-right: 1rem !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
  [data-page="process"] .proc-dot {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0.6rem !important;
    font-size: .9rem !important;
  }
  [data-page="process"] .proc-steps {
    padding-left: 0 !important;
  }
  [data-page="process"] #process {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  /* ── 9. HORECA — intro text section pushed down slightly ── */
  [data-page="horeca"] .horeca-intro {
    padding-top: 1.5rem !important;
    margin-top: 1rem !important;
  }
  [data-page="horeca"] #horeca {
    padding-top: 0.5rem !important;
  }

  /* ── 10. LEGAL — fix header top gap on mobile ── */
  .lgl-nav {
    padding: .75rem 5vw !important;
  }
  .lgl-tabs {
    padding: .35rem 5vw !important;
  }
  .lgl-page {
    padding-top: 2rem !important;
  }
  .lgl-page-hero {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

@media(max-width:480px) {
  /* ── Home no-scroll tight fit ── */
  [data-page="home"] .hero-head {
    padding-top: 0.3rem !important;
    gap: 0.15rem !important;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(1.9rem, 10.5vw, 3rem) !important;
  }
  [data-page="home"] .b2-sub {
    margin-top: 0.4rem !important;
  }

  /* Page nav even smaller screen */
  .page-nav-btn {
    padding: .5rem 1.1rem !important;
    font-size: .7rem !important;
  }
  
  /* Footer on very small screens */
  footer {
    padding: 1rem 5vw !important;
  }
}

/* ── Legal page: no main fixed nav, so no body padding-top needed ── */
@media(max-width:900px) {
  html[data-page="legal"] body {
    padding-top: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  html[data-page="legal"] section {
    flex: none !important;
    height: auto !important;
  }
}
@media(max-width:480px) {
  html[data-page="legal"] body {
    padding-top: 0 !important;
  }
}

/* ── Home page: contain scroll so nothing overflows below marquee ── */
@media(max-width:900px) {
  html[data-page="home"] {
    overflow: hidden !important;
    height: 100% !important;
  }
  html[data-page="home"] body {
    overflow: hidden !important;
    height: 100svh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Hero takes all available space */
  [data-page="home"] #hero {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Marquee snaps to hero bottom */
  [data-page="home"] .marquee-wrap {
    flex-shrink: 0 !important;
  }
  /* page-nav and footer hidden on home mobile — no room */
  [data-page="home"] .page-nav,
  [data-page="home"] footer {
    display: none !important;
  }
}

/* ── About: center pills and CTA button text ── */
@media(max-width:900px) {
  .about-pills {
    justify-content: center !important;
  }
  .about-right .btn-fill {
    width: 100%;
    justify-content: center !important;
  }
  /* Process: less horizontal padding so numbers/text sit more left */
  [data-page="process"] .proc-step {
    padding-left: 0.6rem !important;
    padding-right: 0.8rem !important;
  }
  [data-page="process"] #process {
    padding-left: 3vw !important;
    padding-right: 3vw !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 4 — Home mobile: smaller, spacious, centered, orb contained
═══════════════════════════════════════════ */
@media(max-width:900px) {

  /* Top padding so content starts below the nav bar */
  [data-page="home"] .hero-head {
    padding-top: 1rem !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  /* Title — smaller so everything breathes */
  [data-page="home"] .hero-title {
    font-size: clamp(1.7rem, 8.5vw, 2.8rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 0 !important;
  }

  /* Eyebrow tag — smaller */
  [data-page="home"] .hero-eyebrow {
    font-size: .55rem !important;
    gap: .5rem !important;
    margin-bottom: 0.15rem !important;
  }

  /* Description text — smaller, tighter */
  [data-page="home"] .hero-desc {
    font-size: .76rem !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    margin-bottom: 0 !important;
  }

  /* CTA buttons — slimmer */
  [data-page="home"] .btn-fill,
  [data-page="home"] .btn-ghost {
    padding: .6rem 1.4rem !important;
    font-size: .76rem !important;
  }

  /* Gap between buttons */
  [data-page="home"] .hero-actions {
    gap: 0.4rem !important;
  }

  /* ORB — smaller so it doesn't hit the phone edge */
  [data-page="home"] .b2-scene {
    width: clamp(120px, 32vw, 160px) !important;
    height: clamp(120px, 32vw, 160px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(100px, 27vw, 136px) !important;
    height: clamp(100px, 27vw, 136px) !important;
  }
  [data-page="home"] .b2-lbl {
    font-size: clamp(1.3rem, 5.5vw, 2rem) !important;
  }
  [data-page="home"] .b2-orbit-dot {
    width: 65px !important;
    height: 65px !important;
    margin-top: -65px !important;
    margin-left: -65px !important;
  }
  [data-page="home"] .b2-orbit-ring.r1 { inset: -14px !important; }
  [data-page="home"] .b2-orbit-ring.r3 { inset: -12px !important; }
  [data-page="home"] .b2-pulse-ring { inset: -10px !important; }

  /* "Acoperire completă" label */
  [data-page="home"] .b2-sub {
    font-size: .52rem !important;
    letter-spacing: .2em !important;
    margin-top: 0.35rem !important;
  }

  /* Stats col — tighter top gap */
  [data-page="home"] .hero-stats-col {
    padding: 0.2rem 0 0 !important;
  }

  /* Gap between text block and orb block */
  [data-page="home"] .hero-desc-col {
    gap: 0.3rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0 !important;
  }
  [data-page="home"] .hero-left {
    gap: 0.15rem !important;
  }

  /* Marquee — slimmer padding */
  [data-page="home"] .marquee-wrap {
    padding: .55rem 0 !important;
  }
  [data-page="home"] .marquee-item {
    font-size: .82rem !important;
    gap: 1.2rem !important;
    padding: 0 1.2rem !important;
  }
}

@media(max-width:480px) {
  [data-page="home"] .hero-title {
    font-size: clamp(1.55rem, 9vw, 2.4rem) !important;
  }
  [data-page="home"] .b2-scene {
    width: clamp(110px, 30vw, 145px) !important;
    height: clamp(110px, 30vw, 145px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(92px, 25vw, 122px) !important;
    height: clamp(92px, 25vw, 122px) !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 5 — Home mobile: reset to natural scroll, fix everything visible
═══════════════════════════════════════════ */
@media(max-width:900px) {

  /* ── Reset all previous overflow/height locks on home ── */
  html[data-page="home"] {
    overflow: auto !important;
    height: auto !important;
  }
  html[data-page="home"] body {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    display: block !important;
    padding-top: 58px;
  }

  /* Hero: natural height, no clipping */
  [data-page="home"] #hero {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  /* Hero head: column layout, centered, tight but spacious */
  [data-page="home"] .hero-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Title */
  [data-page="home"] .hero-title {
    font-size: clamp(1.7rem, 8.5vw, 2.8rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 0.6rem !important;
  }

  /* Text block */
  [data-page="home"] .hero-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100%;
  }
  [data-page="home"] .hero-desc-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    width: 100%;
  }
  [data-page="home"] .hero-eyebrow {
    font-size: .56rem !important;
    margin-bottom: 0.3rem !important;
  }
  [data-page="home"] .hero-desc {
    font-size: .78rem !important;
    line-height: 1.5 !important;
    max-width: 36ch !important;
    margin-bottom: 0 !important;
  }
  [data-page="home"] .hero-actions {
    gap: 0.45rem !important;
    margin-top: 0.6rem !important;
    align-items: center !important;
    width: 100%;
  }
  [data-page="home"] .btn-fill,
  [data-page="home"] .btn-ghost {
    padding: .65rem 1.6rem !important;
    font-size: .78rem !important;
    width: auto !important;
    min-width: 200px;
  }

  /* Orb — pushed down with top margin, contained width */
  [data-page="home"] .hero-stats-col {
    margin-top: 1.2rem !important;
    padding: 0 !important;
    align-self: center !important;
    overflow: visible !important;
  }
  [data-page="home"] .b2-scene {
    width: clamp(130px, 35vw, 170px) !important;
    height: clamp(130px, 35vw, 170px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(110px, 30vw, 145px) !important;
    height: clamp(110px, 30vw, 145px) !important;
  }
  [data-page="home"] .b2-lbl {
    font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
  }
  [data-page="home"] .b2-orbit-dot {
    width: 70px !important; height: 70px !important;
    margin-top: -70px !important; margin-left: -70px !important;
  }
  [data-page="home"] .b2-orbit-ring.r1 { inset: -15px !important; }
  [data-page="home"] .b2-orbit-ring.r3 { inset: -13px !important; }
  [data-page="home"] .b2-pulse-ring { inset: -10px !important; }
  [data-page="home"] .b2-sub {
    font-size: .54rem !important;
    margin-top: 0.5rem !important;
  }

  /* Marquee — slim, full width, no horizontal overflow */
  [data-page="home"] .marquee-wrap {
    padding: .6rem 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  [data-page="home"] .marquee-item {
    font-size: .82rem !important;
    gap: 1.2rem !important;
    padding: 0 1.2rem !important;
  }

  /* Show footer and page-nav on home mobile */
  [data-page="home"] footer {
    display: flex !important;
    position: relative !important;
    z-index: 1;
  }
  [data-page="home"] .page-nav {
    display: none !important; /* no page-nav on home — was already removed from HTML */
  }
}

@media(max-width:480px) {
  html[data-page="home"] body {
    padding-top: 54px;
  }
  [data-page="home"] .hero-title {
    font-size: clamp(1.55rem, 9vw, 2.4rem) !important;
  }
  [data-page="home"] .hero-head {
    padding-top: 1.5rem !important;
  }
  [data-page="home"] .b2-scene {
    width: clamp(115px, 32vw, 155px) !important;
    height: clamp(115px, 32vw, 155px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(96px, 27vw, 130px) !important;
    height: clamp(96px, 27vw, 130px) !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 6 — Home mobile final polish
═══════════════════════════════════════════ */
@media(max-width:900px) {

  /* ── 1. Buton nav "Solicită ofertă" — dimensiune normala ── */
  .nav-cta-btn {
    padding: .45rem .9rem !important;
    font-size: .68rem !important;
    white-space: nowrap;
  }
  .nav-cta-btn span { font-size: .68rem !important; }

  /* ── 2. Titlu — spațiu de la nav ── */
  [data-page="home"] .hero-head {
    padding-top: 2.5rem !important;
  }

  /* ── 3. Butoane hero — text centrat ── */
  [data-page="home"] .btn-fill,
  [data-page="home"] .btn-ghost {
    justify-content: center !important;
    text-align: center !important;
    width: 80% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-page="home"] .hero-actions {
    align-items: center !important;
    width: 100% !important;
  }

  /* ── 4. Orb B2B/B2C — mai jos față de butoane ── */
  [data-page="home"] .hero-stats-col {
    margin-top: 2rem !important;
  }
  [data-page="home"] .b2-sub {
    margin-top: 0.8rem !important;  /* "Acoperire completă" mai jos */
  }

  /* ── 5. Footer — elimina spatiul gol de sub el ── */
  [data-page="home"] footer {
    padding-bottom: env(safe-area-inset-bottom, 0.8rem) !important;
    margin-bottom: 0 !important;
  }
  html[data-page="home"] body {
    padding-bottom: 0 !important;
  }
  /* Elimina orice pseudo-element sau spatiu extra */
  html[data-page="home"] body::after,
  html[data-page="home"] body::before {
    display: none !important;
  }
}

@media(max-width:480px) {
  [data-page="home"] .hero-head {
    padding-top: 2rem !important;
  }
  [data-page="home"] .hero-stats-col {
    margin-top: 1.6rem !important;
  }
  [data-page="home"] .btn-fill,
  [data-page="home"] .btn-ghost {
    width: 85% !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 7 — Home mobile: footer = nav height, buttons side by side
═══════════════════════════════════════════ */
@media(max-width:900px) {

  /* ── Footer: same padding/size as nav ── */
  [data-page="home"] footer {
    padding: 1rem 4vw !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
  }
  [data-page="home"] .foot-brand {
    font-size: .62rem !important;
    letter-spacing: .12em !important;
    width: 100%;
    text-align: center;
  }
  [data-page="home"] .foot-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.8rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  [data-page="home"] .foot-links a {
    font-size: .6rem !important;
  }
  [data-page="home"] .foot-badges {
    display: flex !important;
    gap: 0.4rem !important;
    justify-content: center !important;
  }
  [data-page="home"] .foot-badge {
    font-size: .58rem !important;
    padding: .2rem .5rem !important;
  }

  /* ── Hero buttons: side by side, smaller, centered, symmetric ── */
  [data-page="home"] .hero-actions {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    flex: 1 !important;
    max-width: 170px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: .6rem 1rem !important;
    font-size: .72rem !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
  }
}

@media(max-width:480px) {
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    max-width: 150px !important;
    padding: .55rem .8rem !important;
    font-size: .68rem !important;
  }
  [data-page="home"] footer {
    padding: 1rem 4vw !important;
  }
}


/* ═══════════════════════════════════════════
   PATCH 8 — Home mobile: FINAL clean no-scroll layout
   Overrides all previous home mobile patches.
   Nav ~58px | Hero flex-fill | Marquee ~36px | Footer ~52px
═══════════════════════════════════════════ */

@media(max-width:900px) {

  /* ── Lock page to exactly one screen ── */
  html[data-page="home"] {
    height: 100dvh !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  html[data-page="home"] body {
    height: 100dvh !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* Nav: fixed, ~58px */
  /* (unchanged — stays fixed at top) */

  /* Hero section: flex-fill between nav and marquee */
  [data-page="home"] #hero {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 58px !important; /* account for fixed nav */
  }

  /* Hero head: distribute space evenly top/bottom */
  [data-page="home"] .hero-head {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0.6rem 5vw !important;
    gap: 0 !important;
  }

  /* Left block (title + desc + buttons) */
  [data-page="home"] .hero-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }

  /* Title */
  [data-page="home"] .hero-title {
    font-size: clamp(1.5rem, 7.5vw, 2.4rem) !important;
    line-height: 1.02 !important;
    margin: 0 !important;
  }

  /* Eyebrow */
  [data-page="home"] .hero-eyebrow {
    font-size: .52rem !important;
    gap: .4rem !important;
    margin: 0 !important;
  }

  /* Desc col */
  [data-page="home"] .hero-desc-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Description text */
  [data-page="home"] .hero-desc {
    font-size: .73rem !important;
    line-height: 1.45 !important;
    max-width: 34ch !important;
    margin: 0 !important;
  }

  /* Buttons: side by side, centered, compact */
  [data-page="home"] .hero-actions {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    margin: 0 !important;
  }
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 160px !important;
    padding: .5rem .9rem !important;
    font-size: .7rem !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  [data-page="home"] .btn-fill svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Orb (stats col) */
  [data-page="home"] .hero-stats-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  [data-page="home"] .b2-center-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }
  [data-page="home"] .b2-scene {
    width: clamp(110px, 28vw, 148px) !important;
    height: clamp(110px, 28vw, 148px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(92px, 23vw, 124px) !important;
    height: clamp(92px, 23vw, 124px) !important;
  }
  [data-page="home"] .b2-lbl {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
  }
  [data-page="home"] .b2-orbit-dot {
    width: 60px !important; height: 60px !important;
    margin-top: -60px !important; margin-left: -60px !important;
  }
  [data-page="home"] .b2-orbit-ring.r1 { inset: -12px !important; }
  [data-page="home"] .b2-orbit-ring.r3 { inset: -10px !important; }
  [data-page="home"] .b2-pulse-ring { inset: -8px !important; }
  [data-page="home"] .b2-sub {
    font-size: .5rem !important;
    letter-spacing: .18em !important;
    margin-top: 0.4rem !important;
  }
  [data-page="home"] .b2-hline { display: none !important; }

  /* Marquee: slim, no overflow */
  [data-page="home"] .marquee-wrap {
    flex-shrink: 0 !important;
    padding: .5rem 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  [data-page="home"] .marquee-item {
    font-size: .75rem !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }

  /* Footer: same height as nav, shown */
  [data-page="home"] footer {
    display: flex !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.55rem 4vw !important;
    gap: 0.3rem !important;
    min-height: 0 !important;
  }
  [data-page="home"] .foot-brand {
    font-size: .58rem !important;
    letter-spacing: .1em !important;
  }
  [data-page="home"] .foot-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 0.9rem !important;
    justify-content: center !important;
  }
  [data-page="home"] .foot-links a { font-size: .56rem !important; }
  [data-page="home"] .foot-badges {
    gap: 0.35rem !important;
    justify-content: center !important;
  }
  [data-page="home"] .foot-badge {
    font-size: .54rem !important;
    padding: .18rem .45rem !important;
  }

  /* Page-nav hidden on home (already removed from HTML) */
  [data-page="home"] .page-nav { display: none !important; }
}

/* ── Smaller phones ── */
@media(max-width:480px) {
  [data-page="home"] #hero { margin-top: 54px !important; }
  [data-page="home"] .hero-title {
    font-size: clamp(1.35rem, 8vw, 2rem) !important;
  }
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    min-width: 115px !important;
    max-width: 145px !important;
    padding: .45rem .75rem !important;
    font-size: .65rem !important;
  }
  [data-page="home"] .b2-scene {
    width: clamp(100px, 26vw, 132px) !important;
    height: clamp(100px, 26vw, 132px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(84px, 22vw, 112px) !important;
    height: clamp(84px, 22vw, 112px) !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 9 — Home mobile FINAL:
   Ierarhie vizuală: titlu mare → text mic →
   butoane → orb mediu cu orbit mic → acoperire jos
   Tot incape pe 1 ecran, centrat, simetric.
═══════════════════════════════════════════ */

/* ── Reactivează animațiile orbit pe mobile ── */
@media(max-width:1024px){
  .b2-orbit-ring,
  .b2-orbit-dot,
  .b2-orbit-dot-2,
  .b2-orbit-dot-3,
  .b2-pulse-ring {
    display: block !important;
  }
}

/* ════ PORTRAIT MOBILE ≤ 900px ════ */
@media(max-width:900px){

  /* ── Layout: coloana unica, flex, space-between ── */
  html[data-page="home"], html[data-page="home"] body {
    height: 100dvh !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  html[data-page="home"] body {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  [data-page="home"] #hero {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 58px !important;
  }
  [data-page="home"] .hero-head {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    text-align: center !important;
    padding: 0.8rem 6vw 0.5rem !important;
    gap: 0 !important;
  }

  /* ── 1. TITLU — cel mai mare element ── */
  [data-page="home"] .hero-title {
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: 1.0 !important;
    margin: 0 0 0.2rem !important;
  }

  /* ── 2. BLOC TEXT — mai mic decât titlul ── */
  [data-page="home"] .hero-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
  }
  [data-page="home"] .hero-desc-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0 !important;
    width: 100% !important;
  }
  [data-page="home"] .hero-eyebrow {
    font-size: .5rem !important;
    gap: .4rem !important;
    margin: 0 0 0.15rem !important;
    justify-content: center !important;
  }
  [data-page="home"] .hero-desc {
    font-size: .72rem !important;
    line-height: 1.45 !important;
    max-width: 32ch !important;
    margin: 0 !important;
    opacity: .85;
  }

  /* ── 3. BUTOANE — sub descriere, cu spatiu decent ── */
  [data-page="home"] .hero-actions {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 0.7rem !important;
    margin-bottom: 0 !important;
  }
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    flex: 0 1 auto !important;
    min-width: 128px !important;
    max-width: 158px !important;
    width: auto !important;
    padding: .52rem 1rem !important;
    font-size: .72rem !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  [data-page="home"] .btn-fill svg {
    width: 12px !important; height: 12px !important;
  }

  /* ── 4. ORB B2B/B2C — mai mic decât butoanele ca distanță,
          orbit rings compacte, centrat ── */
  [data-page="home"] .hero-stats-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    /* orb-ul se pozitioneaza prin space-evenly in hero-head */
  }
  [data-page="home"] .b2-center-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Orb: dimensiune medie — nu prea mare sa incapa tot */
  [data-page="home"] .b2-scene {
    width: clamp(130px, 36vw, 165px) !important;
    height: clamp(130px, 36vw, 165px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(108px, 30vw, 138px) !important;
    height: clamp(108px, 30vw, 138px) !important;
  }
  [data-page="home"] .b2-lbl {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  /* Orbit rings — mai mici, proportionale cu orb-ul compact */
  [data-page="home"] .b2-orbit-dot {
    width: 72px !important; height: 72px !important;
    margin-top: -72px !important; margin-left: -72px !important;
  }
  [data-page="home"] .b2-orbit-dot-2 { opacity: .45 !important; }
  [data-page="home"] .b2-orbit-dot-3 { opacity: .22 !important; }
  [data-page="home"] .b2-orbit-ring.r1 { inset: -14px !important; }
  [data-page="home"] .b2-orbit-ring.r2 { inset:  -6px !important; }
  [data-page="home"] .b2-orbit-ring.r3 { inset: -20px !important; }
  [data-page="home"] .b2-pulse-ring    { inset: -12px !important; }
  [data-page="home"] .b2-hline { display: none !important; }

  /* ── 5. ACOPERIRE COMPLETĂ — mai jos de orb, spatiu clar ── */
  [data-page="home"] .b2-sub {
    font-size: .55rem !important;
    letter-spacing: .2em !important;
    margin-top: 1.1rem !important;  /* spatiu generos intre orb si label */
    opacity: .55 !important;
  }

  /* ── Marquee + Footer ── */
  [data-page="home"] .marquee-wrap {
    flex-shrink: 0 !important;
    padding: .48rem 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  [data-page="home"] .marquee-item {
    font-size: .72rem !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }
  [data-page="home"] footer {
    display: flex !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 4vw !important;
    gap: 0.25rem !important;
  }
  [data-page="home"] .foot-brand    { font-size: .56rem !important; letter-spacing: .1em !important; }
  [data-page="home"] .foot-links    { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0.4rem 0.8rem !important; justify-content: center !important; }
  [data-page="home"] .foot-links a  { font-size: .54rem !important; }
  [data-page="home"] .foot-badges   { gap: 0.3rem !important; justify-content: center !important; }
  [data-page="home"] .foot-badge    { font-size: .52rem !important; padding: .16rem .4rem !important; }
  [data-page="home"] .page-nav      { display: none !important; }
}

/* ════ PHONES ≤ 480px — scaleaza totul si mai mic ════ */
@media(max-width:480px){
  [data-page="home"] #hero { margin-top: 54px !important; }

  /* Titlu putin mai mic pe telefoane inguste */
  [data-page="home"] .hero-title {
    font-size: clamp(1.75rem, 9vw, 2.6rem) !important;
  }

  /* Descriere si mai mica */
  [data-page="home"] .hero-desc {
    font-size: .68rem !important;
    max-width: 30ch !important;
  }

  /* Butoane compact */
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    min-width: 112px !important;
    max-width: 140px !important;
    padding: .46rem .85rem !important;
    font-size: .67rem !important;
  }

  /* Orb si mai mic pe telefoane sub 480px */
  [data-page="home"] .b2-scene {
    width: clamp(112px, 32vw, 145px) !important;
    height: clamp(112px, 32vw, 145px) !important;
  }
  [data-page="home"] .b2-card {
    width: clamp(93px, 26vw, 120px) !important;
    height: clamp(93px, 26vw, 120px) !important;
  }
  [data-page="home"] .b2-lbl {
    font-size: clamp(1.2rem, 5.5vw, 1.75rem) !important;
  }
  [data-page="home"] .b2-orbit-dot {
    width: 58px !important; height: 58px !important;
    margin-top: -58px !important; margin-left: -58px !important;
  }
  [data-page="home"] .b2-orbit-ring.r1 { inset: -11px !important; }
  [data-page="home"] .b2-orbit-ring.r3 { inset: -16px !important; }
  [data-page="home"] .b2-pulse-ring    { inset:  -9px !important; }

  /* Acoperire completă: spatiu mai mic dar tot vizibil */
  [data-page="home"] .b2-sub {
    margin-top: 0.85rem !important;
    font-size: .52rem !important;
  }

  /* Padding hero mai strans pe ecrane mici */
  [data-page="home"] .hero-head {
    padding: 0.5rem 5vw 0.3rem !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 10 — Heartbeat button + orb mai jos
═══════════════════════════════════════════ */

/* ── Heartbeat animation ── */
@keyframes heartbeat {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--o-20); }
  14%  { transform: scale(1.06); box-shadow: 0 0 0 6px var(--o-12); }
  28%  { transform: scale(1);    box-shadow: 0 0 0 10px transparent; }
  42%  { transform: scale(1.04); box-shadow: 0 0 0 0 var(--o-08); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}

.btn-heartbeat {
  animation: heartbeat 2.2s ease-in-out infinite;
  transform-origin: center;
}

.btn-heartbeat:hover {
  animation-play-state: paused;
}

/* ── Orb + Acoperire completă: mai jos pe mobil ── */
@media(max-width:900px){
  [data-page="home"] .hero-stats-col {
    margin-top: 1.8rem !important;
    padding-bottom: 1.2rem !important;
  }
  [data-page="home"] .b2-sub {
    margin-top: 1.4rem !important;
  }
}

@media(max-width:480px){
  [data-page="home"] .hero-stats-col {
    margin-top: 1.4rem !important;
    padding-bottom: 1rem !important;
  }
  [data-page="home"] .b2-sub {
    margin-top: 1.1rem !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 11 — Arrow inline right in btn-ghost,
   remove page-nav bar globally on home
═══════════════════════════════════════════ */

/* Arrow always inline with text, never wraps below */
[data-page="home"] .btn-ghost,
[data-page="home"] .btn-fill {
  white-space: nowrap !important;
}

[data-page="home"] .btn-ghost span,
[data-page="home"] .btn-fill span {
  display: inline !important;
  white-space: nowrap !important;
}

/* Make sure hero-actions row never breaks to column on home mobile */
@media(max-width:900px){
  [data-page="home"] .hero-actions {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
  }
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 50% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 12 — Butoane hero egale ca marime
═══════════════════════════════════════════ */
@media(max-width:900px){
  [data-page="home"] .btn-ghost,
  [data-page="home"] .btn-fill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 13 — Butoane aliniate stanga cu textul
═══════════════════════════════════════════ */
[data-page="home"] .hero-actions,
[data-page="home"] #heroAct {
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Pe mobil pastram aliniere stanga (suprascrie center din patch-urile anterioare) */
@media(max-width:900px){
  [data-page="home"] .hero-actions,
  [data-page="home"] #heroAct {
    justify-content: center !important; /* centrat pe mobil — textul e centrat */
  }
}

/* ═══════════════════════════════════════════
   PATCH 14 — Legal tabs scrollabile pe mobil
═══════════════════════════════════════════ */
.lgl-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity;
  padding-bottom: 4px !important;
}
.lgl-tabs::-webkit-scrollbar { display: none; }
.lgl-tab { scroll-snap-align: start; flex-shrink: 0 !important; }

/* ═══════════════════════════════════════════
   PATCH 15 — Legal tabs swipe fix
   overflow-x:hidden pe parinti bloca scroll-ul
═══════════════════════════════════════════ */

/* Permite overflow orizontal pe containerul legal */
#legal-overlay {
  overflow-x: visible !important;
}

/* Taburile: scroll orizontal functional */
.lgl-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-behavior: smooth;
  /* Padding dreapta ca ultimul tab sa fie vizibil complet */
  padding-right: 5vw !important;
}
.lgl-tabs::-webkit-scrollbar { display: none !important; }
.lgl-tab {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* ═══════════════════════════════════════════
   PATCH 16 — Legal tabs: toate 3 vizibile pe mobil
   Nu mai facem scroll, le micsoram sa incapa
═══════════════════════════════════════════ */
@media(max-width:600px){
  .lgl-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: .4rem 2vw !important;
    gap: .25rem !important;
  }
  .lgl-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: .35rem .3rem !important;
    font-size: .58rem !important;
    letter-spacing: .03em !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media(max-width:400px){
  .lgl-tab {
    font-size: .52rem !important;
    padding: .32rem .2rem !important;
    letter-spacing: .02em !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 17 — Nav drawer: centrat, font mai mic
═══════════════════════════════════════════ */
.nav-drawer {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 1.6rem !important;
  padding: 0 !important;
}

.nav-drawer a {
  font-size: 2rem !important;
  letter-spacing: .12em !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

@media(max-width:480px){
  .nav-drawer a {
    font-size: 1.75rem !important;
  }
  .nav-drawer {
    gap: 1.3rem !important;
  }
}

/* ═══════════════════════════════════════════
   PATCH 18 — Nav drawer: centrat perfect vertical
═══════════════════════════════════════════ */
.nav-drawer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
  padding-top: 80px !important;   /* sub nav bar fix (~62px) + respiro */
  padding-bottom: 2rem !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════
   PATCH FINAL — Services dark + Nav fix + Glisează fix
═══════════════════════════════════════════ */

/* ── 1. NAV — mereu cu background solid, nu transparent ── */
#nav {
  background: #120A00 !important;
  backdrop-filter: none !important;
}
html.theme-blue #nav {
  background: #060E1E !important;
}

/* ── 2. FIX page-nav selector (era sibling ~, acum e descendent) ── */
/* Elimina stilurile light gresite aplicate pe services via ~ selector */
[data-page="about"] ~ .page-nav,
[data-page="services"] ~ .page-nav {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--o-08) !important;
}
[data-page="about"] ~ .page-nav .page-nav-btn,
[data-page="services"] ~ .page-nav .page-nav-btn {
  color: rgba(255,246,238,.5) !important;
  border-color: var(--o-12) !important;
}
/* Stiluri corecte pentru pagini light (about) */
html[data-page="about"] .page-nav {
  background: var(--cream-2) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}
html[data-page="about"] .page-nav .page-nav-btn {
  color: var(--ink-60) !important;
  border-color: rgba(0,0,0,.12) !important;
}
html[data-page="about"] .page-nav .page-nav-btn:hover {
  color: var(--orange-dk) !important;
  border-color: var(--orange-dk) !important;
}
/* Services page-nav — dark like why */
html[data-page="services"] .page-nav {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--o-08) !important;
}
html[data-page="services"] .page-nav .page-nav-btn {
  color: rgba(255,246,238,.5) !important;
  border-color: var(--o-12) !important;
}
html[data-page="services"] .page-nav .page-nav-btn:hover {
  color: var(--cream) !important;
  border-color: var(--orange) !important;
}

/* ── 3. SERVICES DARK — structura identica cu why ── */
#services.svc-dark {
  background: var(--bg-2) !important;
  padding: clamp(5rem,10vh,8rem) 5vw;
  color: var(--cream) !important;
  position: relative;
  overflow: hidden;
}
#services.svc-dark::before {
  display: none !important;
}
.svc-glow {
  position: absolute;
  left: -10%;
  top: 20%;
  width: 40vw;
  height: 40vh;
  border-radius: 50%;
  background: var(--orange);
  opacity: .08;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
#services.svc-dark .svc-header {
  display: block;
  max-width: 48ch;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}
.svc-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.2rem,7vw,5.5rem);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--cream);
  margin: .7rem 0 1.2rem;
}
.svc-h2 span {
  color: var(--orange);
}
#services.svc-dark .svc-sub {
  font-size: .98rem;
  line-height: 1.78;
  color: rgba(255,246,238,.48);
  max-width: 50ch;
}
#services.svc-dark .svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.svc-card-dark {
  padding: 2rem 1.5rem 2.5rem;
  border: 1px solid rgba(255,246,238,.06);
  border-radius: 1rem;
  background: rgba(255,246,238,.02);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-mid) var(--ease-c), border-color var(--dur-mid) var(--ease-c), transform var(--dur-mid) var(--ease-c);
}
.svc-card-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-c);
}
.svc-card-dark:hover {
  background: rgba(255,246,238,.04);
  border-color: rgba(255,246,238,.12);
  transform: translateY(-4px);
}
.svc-card-dark:hover::before {
  opacity: 1;
}
.svc-icon-dark {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background: var(--o-08);
  border: 1px solid var(--o-12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-bottom: 1.4rem;
}
.svc-title-dark {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--cream);
  margin: 0 0 .6rem;
  letter-spacing: .01em;
}
.svc-desc-dark {
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(255,246,238,.48);
  margin: 0 0 1.4rem;
}
.svc-tags-dark {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.svc-tag-dark {
  padding: .28rem .8rem;
  border-radius: 100px;
  border: 1px solid var(--o-20);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255,246,238,.55);
  background: var(--o-03);
}

/* ── 4. FIX Glisează — ascunde bara de scroll hint pe desktop ── */
@media(min-width:901px) {
  .mobile-scroll-hint { display: none !important; }
}

/* ── 5. FIX services mobile scroll hint color — dark bg ── */
html[data-page="services"] .mobile-scroll-hint-text {
  color: rgba(255,246,238,.4) !important;
}
html[data-page="services"] .mobile-scroll-hint-arrow {
  color: rgba(255,246,238,.4) !important;
}

/* ── 6. Nav solid border la scroll ── */
#nav {
  border-bottom: 1px solid rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════
   PATCH FINAL v2 — FIX DEFINITIV Scroll + page-nav + nav bar
═══════════════════════════════════════════ */

/* ── 1. ASCUNDE mobile-scroll-hint PE DESKTOP — DEFINITIV ── */
/* Default: hidden everywhere */
.mobile-scroll-hint {
  display: none !important;
}
/* Afisare DOAR pe mobile, DOAR pe pagini care au scroll orizontal (home) */
@media (max-width: 900px) {
  [data-page="home"] .mobile-scroll-hint {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 0;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
  }
}
/* Pe pagini non-home: scroll hint nu are sens (scroll e vertical) — ascuns mereu */
[data-page="about"] .mobile-scroll-hint,
[data-page="services"] .mobile-scroll-hint,
[data-page="why"] .mobile-scroll-hint,
[data-page="process"] .mobile-scroll-hint,
[data-page="contact"] .mobile-scroll-hint,
[data-page="horeca"] .mobile-scroll-hint {
  display: none !important;
}

/* ── 2. PAGE-NAV — fix pozitionare si vizibilitate ── */
/* page-nav e flex child al body — trebuie sa fie la baza, flex-shrink */
.page-nav {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
}

/* ── 3. NAV BAR — background solid si border vizibil mereu ── */
#nav {
  background: #120A00 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}
html.theme-blue #nav {
  background: #060E1E !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* Cand nav e "stuck" la scroll — shadow mai puternic */
#nav.stuck {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* ── 4. ABOUT page — nav text contrast pe panoul cream ── */
/* Nav e fix deasupra ambelor panouri — textul nav trebuie lizibil pe dark bg (#120A00) */
/* Deja ok cu background solid */


/* ═══════════════════════════════════════════
   DROPDOWN INDUSTRII — nav
═══════════════════════════════════════════ */

/* Allow dropdown to overflow nav bar */
#nav { overflow: visible !important; }
.nav-ul { overflow: visible !important; }

.nav-drop {
  position: relative;
  list-style: none;
}
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: .78rem;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,246,238,.65);
  transition: color var(--dur-fast) var(--ease-c);
  line-height: 1;
  white-space: nowrap;
}
.nav-drop-btn:hover { color: var(--cream); }
.nav-drop-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-c);
}
.nav-drop.open .nav-drop-caret { transform: rotate(180deg); }

/* Hidden by default — MUST override any inherited display */
.nav-drop-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #1c0e00 !important;
  border: 1px solid rgba(255,246,238,.12) !important;
  border-radius: .6rem !important;
  padding: .4rem !important;
  min-width: 155px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
  z-index: 9999 !important;
  flex-direction: column !important;
  gap: 0 !important;
}
/* Show only when .open */
.nav-drop.open .nav-drop-menu {
  display: flex !important;
}
.nav-drop-menu a {
  display: block !important;
  padding: .6rem .9rem !important;
  border-radius: .4rem !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,246,238,.6) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.nav-drop-menu a::after { display: none !important; }
.nav-drop-menu a:hover {
  background: rgba(234,96,16,.15) !important;
  color: #FFF6EE !important;
}
html.theme-blue .nav-drop-menu {
  background: #0a1628 !important;
  border-color: rgba(237,244,255,.12) !important;
}
/* Hide on mobile (uses drawer instead) */
@media (max-width: 900px) {
  .nav-drop { display: none; }
}

/* Drawer submenu (mobile) */
.drawer-sub-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: rgba(255,246,238,.35);
  pointer-events: none;
  margin-top: .4rem;
}
.drawer-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding-left: 0;
}
.drawer-sub a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem !important;
  letter-spacing: .08em;
  color: rgba(255,246,238,.55) !important;
}
.drawer-sub a:hover { color: var(--orange) !important; }


/* Re-apply animation only when startHero has been called (js-ready class added) */
html.js-ready #hero .r {
  opacity: 0;
  transform: translateY(var(--amp));
  filter: blur(4px);
  transition: opacity var(--dur-reveal) var(--ease-c), transform var(--dur-reveal) var(--ease-c), filter var(--dur-reveal) var(--ease-c);
}
html.js-ready #hero .r.vis {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}


/* ════════════════════════════════════════════════
   NUCLEAR VISIBILITY FIX v55
   All .r elements visible by default
   JS animate them only if js-ready is added
════════════════════════════════════════════════ */

/* 1. DEFAULT: toate elementele .r sunt VIZIBILE */
.r {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.r-s {
  opacity: 1 !important;
  transform: none !important;
}
.s-label {
  opacity: 1 !important;
  transform: none !important;
}

/* 2. CU JS: animație fade-in când js-ready e adăugat */
html.js-ready .r {
  opacity: 0 !important;
  transform: translateY(var(--amp, 24px)) !important;
  filter: blur(4px) !important;
  transition: opacity var(--dur-reveal, 0.7s) var(--ease-c, ease), transform var(--dur-reveal, 0.7s) var(--ease-c, ease), filter var(--dur-reveal, 0.7s) var(--ease-c, ease) !important;
}
html.js-ready .r.vis {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}
html.js-ready .r-s {
  opacity: 0 !important;
  transform: scale(0.97) !important;
  transition: opacity var(--dur-reveal, 0.7s) var(--ease-c2, ease), transform var(--dur-reveal, 0.7s) var(--ease-c2, ease) !important;
}
html.js-ready .r-s.vis {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* 3. REMOVE animation fallback (superseded) */

/* ════════════════════════════════════════
   DESKTOP LAYOUT FIX v55
   Ensures hero is always visible
════════════════════════════════════════ */
@media (min-width: 901px) {
  html, body {
    height: 100vh !important;
    overflow: hidden !important;
  }
  body {
    display: flex !important;
    flex-direction: column !important;
  }
  #nav {
    flex-shrink: 0 !important;
  }
  #hero {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hero-head {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  footer {
    flex-shrink: 0 !important;
  }
}

/* ═══════════════════════════════════════════════
   HOMEPAGE LAYOUT — DEFINITIVE FIX v56
   Single source of truth for hero height
═══════════════════════════════════════════════ */

/* Desktop: viewport-locked layout */
@media (min-width: 901px) {
  html[data-page="home"],
  html[data-page="home"] body {
    height: 100vh !important;
    overflow: hidden !important;
  }
  html[data-page="home"] body {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
  }
  html[data-page="home"] #nav {
    flex-shrink: 0 !important;
    height: 58px !important;
  }
  html[data-page="home"] #hero {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important;
  }
  html[data-page="home"] footer {
    flex-shrink: 0 !important;
  }
  html[data-page="home"] .hero-head {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    align-items: center !important;
  }
}

/* Mobile: natural scroll */
@media (max-width: 900px) {
  html[data-page="home"],
  html[data-page="home"] body {
    height: auto !important;
    overflow: visible !important;
  }
  html[data-page="home"] #hero {
    flex: none !important;
    min-height: calc(100svh - 54px) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 54px !important;
  }
}

/* FORCE HERO HEIGHT - HOME ONLY */
@media (min-width:901px){
  html[data-page="home"] body{
    display:block!important;
    height:100vh!important;
    overflow:hidden!important;
    padding-top:0!important;
  }
  html[data-page="home"] #nav{
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;
    height:58px!important;z-index:500!important;
  }
  html[data-page="home"] #hero{
    margin-top:58px!important;
    height:calc(100vh - 58px)!important;
    min-height:calc(100vh - 58px)!important;
    max-height:calc(100vh - 58px)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  html[data-page="home"] .hero-head{
    flex:1!important;
    min-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    align-items:center!important;
  }
}

/* DEFINITIVE HERO FIX - position absolute, nu flex dependent */
@media (min-width:901px){
  html[data-page="home"] body{
    position:relative!important;
    height:100vh!important;
    overflow:hidden!important;
    padding-top:0!important;
    margin:0!important;
  }
  html[data-page="home"] #hero{
    position:absolute!important;
    top:58px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    width:100%!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    margin:0!important;
    flex:none!important;
  }
  html[data-page="home"] .hero-head{
    flex:1!important;
    min-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    align-items:center!important;
    padding-top:0!important;
  }
  html[data-page="home"] footer{
    position:absolute!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    z-index:10!important;
  }
}

/* v60: Non-home pages — padding-top for fixed nav */
@media (min-width:901px){
  html:not([data-page="home"]) body {
    padding-top: 58px !important;
  }
}
@media (max-width:900px){
  html:not([data-page="home"]) body {
    padding-top: 54px !important;
  }
}


/* v63: viewport-locked non-home — see main rules at line ~293 */

/* v63: Homepage hero — spatiu intre butoane si footer */
@media (min-width: 901px) {
  [data-page="home"] .hero-desc-col {
    padding-bottom: 2.5rem !important;
  }
}

/* v63: Belt-and-suspenders — override orice overflow:hidden pe section-urile non-home.
   Specificitate (1,1,0) + !important bate orice #id simplu (1,0,0) cu !important,
   inclusiv inline <style> blocks. Aceasta regula castiga INTOTDEAUNA cascada. */
@media (min-width: 901px) {
  [data-page="services"] #services,
  [data-page="why"] #why,
  [data-page="about"] #about,
  [data-page="process"] #process,
  [data-page="contact"] #contact,
  [data-page="horeca"] #horeca,
  [data-page="auto"] #auto-sh,
  [data-page="legal"] #legal {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}