*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#0a0e27;
  --navy-light:#10143a;
  --accent:#4f6df5;
  --accent-light:#7b93ff;
  --accent-glow:rgba(79,109,245,.12);
  --gold:#c9a84c;
  --gold-glow:rgba(201,168,76,.10);
  --teal:#2bbaa0;
  --teal-glow:rgba(43,186,160,.10);
  --rose:#e05c8a;
  --rose-glow:rgba(224,92,138,.10);
  --white:#fff;
  --gray-50:#f8f9fb;
  --gray-100:#f1f2f6;
  --gray-200:#e2e4eb;
  --gray-300:#c9cdda;
  --gray-500:#6b7194;
  --text-primary:#0a0e27;
  --text-secondary:#5a5f82;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);color:var(--text-primary);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* NAV */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.15rem 3rem;display:flex;align-items:center;justify-content:space-between;transition:all .4s;background:transparent}
nav#nav.scrolled{background:rgba(10,14,39,.97);backdrop-filter:blur(20px);padding:.85rem 3rem;box-shadow:0 1px 30px rgba(0,0,0,.15)}
.nav-logo{font-weight:700;font-size:1.1rem;color:var(--white);text-decoration:none;letter-spacing:-.02em}
.nav-logo span{color:var(--accent-light)}
.nav-links{display:flex;align-items:center;gap:2.2rem}
.nav-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:.84rem;font-weight:500;transition:color .3s}
.nav-links a:hover{color:var(--white)}
.nav-cta{background:var(--accent);color:var(--white)!important;padding:.6rem 1.4rem;border-radius:8px;font-weight:600;transition:all .3s!important;box-shadow:0 2px 16px rgba(79,109,245,.3)}
.nav-cta:hover{background:var(--accent-light);transform:translateY(-1px)}

/* HERO */
.hero{min-height:100vh;background:var(--navy);display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-15%;right:-8%;width:65vw;height:65vw;background:radial-gradient(circle,rgba(79,109,245,.06) 0%,transparent 60%);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(79,109,245,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(79,109,245,.02) 1px,transparent 1px);background-size:72px 72px}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:8rem 3rem 5rem}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;background:rgba(79,109,245,.07);border:1px solid rgba(79,109,245,.13);color:var(--accent-light);padding:.45rem 1.1rem;border-radius:100px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2rem;animation:fadeUp .7s ease both}
.hero-eyebrow .dot{width:5px;height:5px;background:var(--accent-light);border-radius:50%;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-family:var(--serif);font-size:clamp(2.6rem,5.2vw,4.4rem);color:var(--white);line-height:1.08;font-weight:400;max-width:780px;margin-bottom:1.6rem;animation:fadeUp .7s ease .1s both}
.hero h1 em{font-style:italic;color:var(--accent-light)}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.45);max-width:500px;line-height:1.7;margin-bottom:2.5rem;animation:fadeUp .7s ease .2s both}
.hero-actions{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;animation:fadeUp .7s ease .3s both}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--white);padding:.95rem 1.9rem;border-radius:10px;font-size:.92rem;font-weight:600;text-decoration:none;transition:all .3s;box-shadow:0 4px 24px rgba(79,109,245,.3);border:none;cursor:pointer;font-family:var(--sans)}
.btn-primary:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 8px 36px rgba(79,109,245,.35)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.55);padding:.95rem 1.4rem;border-radius:10px;font-size:.92rem;font-weight:500;text-decoration:none;transition:all .3s;border:1px solid rgba(255,255,255,.08);background:transparent}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,.2)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* PROOF BAR */
.proof-bar{background:var(--navy-light);border-top:1px solid rgba(255,255,255,.03);padding:2.5rem 3rem}
.proof-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:4rem;flex-wrap:wrap}
.proof-item{text-align:center}
.proof-item .num{font-family:var(--serif);font-size:2rem;color:var(--white);line-height:1}
.proof-item .num span{color:var(--accent-light)}
.proof-item .lbl{color:rgba(255,255,255,.3);font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:.35rem}
.proof-badges{display:flex;align-items:center;gap:1.5rem;margin-left:2rem;padding-left:2rem;border-left:1px solid rgba(255,255,255,.06)}
.proof-badge{color:rgba(255,255,255,.3);font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:.4rem}
.proof-badge svg{width:14px;height:14px;stroke:var(--accent-light);fill:none;stroke-width:1.5;opacity:.5}

/* PLATFORM INTRO */
.platform{background:var(--white);padding:7rem 3rem 4rem}
.platform-inner{max-width:1200px;margin:0 auto;text-align:center}
.platform .section-label{display:inline-block;font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.platform h2{font-family:var(--serif);font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.15;max-width:620px;margin:0 auto .8rem}
.platform h2 em{font-style:italic;color:var(--accent)}
.platform p{font-size:1rem;color:var(--text-secondary);max-width:480px;margin:0 auto;line-height:1.65}

/* SEGMENT CARDS */
.segments{padding:2rem 3rem 7rem}
.seg-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.seg-card{border:1px solid var(--gray-200);border-radius:20px;padding:2.8rem 2.2rem;transition:all .4s;cursor:pointer;position:relative;overflow:hidden;background:var(--white);text-decoration:none;color:inherit;display:block}
.seg-card:hover{transform:translateY(-5px);box-shadow:0 16px 56px rgba(10,14,39,.08)}
.seg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transition:transform .4s;transform:scaleX(0);transform-origin:left}
.seg-card:hover::before{transform:scaleX(1)}
.seg-card:nth-child(1)::before{background:var(--accent)}
.seg-card:nth-child(2)::before{background:var(--teal)}
.seg-card:nth-child(3)::before{background:var(--gold)}
.seg-card .seg-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:1.6rem}
.seg-card:nth-child(1) .seg-icon{background:var(--accent-glow)}
.seg-card:nth-child(2) .seg-icon{background:var(--teal-glow)}
.seg-card:nth-child(3) .seg-icon{background:var(--gold-glow)}
.seg-card:nth-child(1) .seg-icon svg{stroke:var(--accent)}
.seg-card:nth-child(2) .seg-icon svg{stroke:var(--teal)}
.seg-card:nth-child(3) .seg-icon svg{stroke:var(--gold)}
.seg-card .seg-icon svg{width:26px;height:26px;fill:none;stroke-width:1.5}
.seg-card h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:.6rem;line-height:1.2}
.seg-card .seg-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1.8rem}
.seg-card .seg-products{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}
.seg-product{padding:.35rem .8rem;border-radius:6px;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.seg-card:nth-child(1) .seg-product{background:var(--accent-glow);color:var(--accent)}
.seg-card:nth-child(2) .seg-product{background:var(--teal-glow);color:var(--teal)}
.seg-card:nth-child(3) .seg-product{background:var(--gold-glow);color:var(--gold)}
.seg-card .seg-link{font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:gap .3s}
.seg-card:nth-child(1) .seg-link{color:var(--accent)}
.seg-card:nth-child(2) .seg-link{color:var(--teal)}
.seg-card:nth-child(3) .seg-link{color:var(--gold)}
.seg-card:hover .seg-link{gap:.7rem}

/* SEGMENT DETAIL PAGES */
.seg-detail{display:none;background:var(--white)}
.seg-detail.active{display:block}
.seg-hero{padding:7rem 3rem 4rem;max-width:1200px;margin:0 auto}
.seg-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;color:var(--text-secondary);cursor:pointer;margin-bottom:2rem;transition:color .3s;background:none;border:none;font-family:var(--sans)}
.seg-back:hover{color:var(--accent)}
.seg-hero h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);line-height:1.1;max-width:650px;margin-bottom:1rem}
.seg-hero h2 em{font-style:italic;color:var(--accent)}
.seg-hero>p{font-size:1.02rem;color:var(--text-secondary);max-width:520px;line-height:1.65}

/* PRODUCT ROWS in segment detail */
.prod-section{padding:0 3rem 5rem}
.prod-section .prod-inner{max-width:1200px;margin:0 auto}
.prod-row{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding:3.5rem 0;border-top:1px solid var(--gray-200)}
.prod-row:last-child{border-bottom:1px solid var(--gray-200)}
.prod-row.reverse{direction:rtl}
.prod-row.reverse>*{direction:ltr}
.prod-info .prod-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:6px;margin-bottom:1rem}
.prod-tag.blue{background:var(--accent-glow);color:var(--accent)}
.prod-tag.gold{background:var(--gold-glow);color:var(--gold)}
.prod-tag.teal{background:var(--teal-glow);color:var(--teal)}
.prod-tag.rose{background:var(--rose-glow);color:var(--rose)}
.prod-info h3{font-family:var(--serif);font-size:1.8rem;line-height:1.15;margin-bottom:.7rem}
.prod-info h3 em{font-style:italic}
.prod-info .prod-problem{font-size:.9rem;color:var(--text-secondary);line-height:1.65;margin-bottom:1.3rem}
.prod-outcomes{display:flex;flex-direction:column;gap:.6rem}
.prod-outcome{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;color:var(--text-primary);font-weight:500;line-height:1.5}
.prod-outcome .arrow{color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px}
.prod-visual{background:var(--gray-50);border-radius:18px;padding:2.5rem;min-height:280px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-200)}
.pv-stat{text-align:center}
.pv-stat .big{font-family:var(--serif);font-size:3.2rem;line-height:1}
.pv-stat .big.blue{color:var(--accent)}
.pv-stat .big.gold{color:var(--gold)}
.pv-stat .big.teal{color:var(--teal)}
.pv-stat .big.rose{color:var(--rose)}
.pv-stat .sub{font-size:.82rem;color:var(--text-secondary);margin-top:.4rem;font-weight:500}
.pv-stat-row{display:flex;gap:2.5rem}
.pv-stat-row .pv-stat .big{font-size:2rem}
.pv-divider{width:1px;background:var(--gray-200);align-self:stretch}

/* SEG CTA */
.seg-cta{padding:4rem 3rem 5rem}
.seg-cta-inner{max-width:800px;margin:0 auto;text-align:center;background:var(--navy);border-radius:20px;padding:4rem 3rem;position:relative;overflow:hidden}
.seg-cta-inner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(79,109,245,.08),transparent 70%);pointer-events:none}
.seg-cta-inner h3{font-family:var(--serif);font-size:2rem;color:var(--white);margin-bottom:.7rem;position:relative;z-index:1}
.seg-cta-inner h3 em{font-style:italic;color:var(--accent-light)}
.seg-cta-inner p{color:rgba(255,255,255,.4);font-size:.92rem;margin-bottom:2rem;position:relative;z-index:1;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.6}
.seg-cta-inner .btn-primary{position:relative;z-index:1}

/* HOME CTA */
.home-cta{background:var(--navy);padding:7rem 3rem;text-align:center;position:relative;overflow:hidden}
.home-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(79,109,245,.1),transparent 70%)}
.home-cta h2{font-family:var(--serif);font-size:clamp(2rem,3.8vw,3rem);color:var(--white);max-width:600px;margin:0 auto 1rem;position:relative;z-index:1}
.home-cta h2 em{font-style:italic;color:var(--accent-light)}
.home-cta p{color:rgba(255,255,255,.38);max-width:420px;margin:0 auto 2.2rem;font-size:.92rem;line-height:1.6;position:relative;z-index:1}
.home-cta .btn-primary{position:relative;z-index:1;font-size:1rem;padding:1.05rem 2.3rem}
.cta-note{color:rgba(255,255,255,.2);font-size:.75rem;margin-top:1.3rem;position:relative;z-index:1}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(10,14,39,.85);backdrop-filter:blur(8px);z-index:2000;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:20px;padding:2.8rem;max-width:500px;width:92%;position:relative;animation:modalIn .4s ease forwards}
@keyframes modalIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:1.1rem;right:1.1rem;width:34px;height:34px;border-radius:50%;border:1px solid var(--gray-200);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;color:var(--gray-500);font-size:1rem}
.modal-close:hover{background:var(--gray-100);color:var(--text-primary)}
.modal h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:.35rem}
.modal .modal-sub{color:var(--text-secondary);font-size:.85rem;margin-bottom:1.8rem;line-height:1.5}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.75rem;font-weight:600;color:var(--text-primary);margin-bottom:.3rem}
.form-group input,.form-group select{width:100%;padding:.72rem .9rem;border:1px solid var(--gray-200);border-radius:9px;font-size:.86rem;font-family:var(--sans);color:var(--text-primary);transition:border-color .3s;background:var(--white)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-group select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7194' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form-submit{width:100%;padding:.85rem;background:var(--accent);color:var(--white);border:none;border-radius:9px;font-size:.9rem;font-weight:600;font-family:var(--sans);cursor:pointer;transition:all .3s;margin-top:.4rem;box-shadow:0 2px 16px rgba(79,109,245,.3)}
.form-submit:hover{background:var(--accent-light);transform:translateY(-1px)}
.form-note{text-align:center;font-size:.72rem;color:var(--gray-500);margin-top:.9rem}

/* FOOTER */
footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.04);padding:3rem 3rem 1.8rem}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap;gap:2rem}
.footer-brand{color:var(--white);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.footer-brand span{color:var(--accent-light)}
.footer-brand p{color:rgba(255,255,255,.22);font-size:.78rem;font-weight:400;margin-top:.4rem;max-width:260px;line-height:1.5}
.footer-social{display:flex;gap:.6rem;margin-top:1rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);transition:color .3s,border-color .3s,background .3s}
.footer-social a:hover{color:var(--white);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.footer-cols{display:flex;gap:3.5rem}
.footer-col h4{color:rgba(255,255,255,.3);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem}
.footer-col a{display:block;color:rgba(255,255,255,.45);font-size:.8rem;text-decoration:none;margin-bottom:.5rem;transition:color .3s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.04);padding-top:1.3rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem}
.footer-bottom span{color:rgba(255,255,255,.16);font-size:.73rem}

/* MOBILE NAV — hamburger toggle + slide-down panel.
   .nav-menu-toggle is display:none by default; the @media(max-width:768px)
   block below flips it to inline-flex and hides .nav-links instead. */
.nav-menu-toggle{display:none;background:transparent;border:0;cursor:pointer;padding:.55rem;margin-left:auto;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-menu-toggle span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
nav#nav.mobile-nav--open .nav-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav#nav.mobile-nav--open .nav-menu-toggle span:nth-child(2){opacity:0}
nav#nav.mobile-nav--open .nav-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* max-height uses 100dvh (dynamic viewport height) so the panel
   resizes correctly when Android/iOS browser chrome (URL bar) shows
   or hides. 100vh on those browsers refers to the largest possible
   viewport, which pushes content below the fold once the URL bar
   appears. 100dvh tracks the actual visible area. */
.nav-mobile-panel{position:fixed;top:0;left:0;right:0;background:rgba(10,14,39,.98);backdrop-filter:blur(20px);padding:5.5rem 1.5rem 2rem;display:none;flex-direction:column;gap:1.25rem;max-height:100vh;max-height:100dvh;overflow-y:auto;border-bottom:1px solid rgba(255,255,255,.05);box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:999}
nav#nav.mobile-nav--open .nav-mobile-panel{display:flex}

.nav-mobile-cta{display:block;background:var(--accent);color:var(--white);text-align:center;padding:.95rem;border-radius:10px;font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 2px 16px rgba(79,109,245,.35);transition:background .25s}
.nav-mobile-cta:hover{background:var(--accent-light)}

.nav-mobile-section{display:flex;flex-direction:column;gap:.25rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.06)}
.nav-mobile-section h4{color:rgba(255,255,255,.32);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.nav-mobile-link{display:block;color:rgba(255,255,255,.78);text-decoration:none;font-size:1rem;font-weight:500;padding:.55rem 0;transition:color .2s}
.nav-mobile-link:hover{color:var(--white)}

.nav-mobile-lang-select{width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--white);font-family:var(--sans);font-size:.95rem;padding:.7rem 2.4rem .7rem .85rem;border-radius:10px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
.nav-mobile-lang-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.2)}
.nav-mobile-lang-select option{background:var(--navy);color:var(--white)}

/* RESPONSIVE */
@media(max-width:1024px){
  .seg-grid{grid-template-columns:1fr}
  .prod-row,.prod-row.reverse{grid-template-columns:1fr;direction:ltr}
  .proof-inner{gap:2rem}
  .proof-badges{margin-left:0;padding-left:0;border-left:none}
}
@media(max-width:768px){
  nav#nav{padding:1rem 1.25rem}
  nav#nav.scrolled{padding:.75rem 1.25rem}
  /* Replace the desktop nav-links cluster (dropdowns + lang + CTA) with a
     hamburger toggle. Without this, Android phones can't fit logo + 3
     dropdown buttons + CTA on one row, which pushes the CTA off-screen. */
  .nav-links{display:none}
  .nav-menu-toggle{display:inline-flex}
  .hero-content{padding:6.5rem 1.25rem 4rem}
  .platform,.segments,.prod-section,.seg-hero{padding-left:1.25rem;padding-right:1.25rem}
  .seg-cta,.home-cta{padding-left:1.25rem;padding-right:1.25rem}
  .form-row{grid-template-columns:1fr}
  .footer-cols{gap:2rem}
  .footer-top{flex-direction:column}
  .pv-stat-row{flex-direction:column;gap:1.5rem}
  .pv-divider{width:100%;height:1px}
}

/* COOKIE BANNER */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;
  width: 90%;
  background: var(--navy);
  padding: 1.5rem;
  border-radius: 16px;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  display: none;
  flex-direction: column;
  gap: 1.2rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.cookie-banner--visible {
  display: flex;
}
.cookie-banner__text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}
.cookie-banner__text a {
  color: var(--accent-light);
  text-decoration: none;
}
.cookie-banner__text a:hover {
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cookie-btn {
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--sans);
  transition: all 0.2s;
}
.cookie-btn--accept {
  background: var(--accent);
  color: white;
}
.cookie-btn--accept:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}
.cookie-btn--customize, .cookie-btn--reject {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
}
.cookie-btn--customize:hover, .cookie-btn--reject:hover {
  color: white;
  border-color: rgba(255,255,255,0.3);
}

.cookie-banner--customizing { gap: 1.25rem; }
.cookie-banner__details { display: flex; flex-direction: column; gap: .75rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
/* HTML `hidden` attribute defaults to display:none, but the class rule above
   overrode it. Restore the expected hide/show behaviour for both the details
   panel (toggled by the Customize / Cancel buttons) and the ack message
   (shown only after the user actually saves). */
.cookie-banner__details[hidden] { display: none; }
.cookie-pref { display: flex; flex-direction: column; gap: .65rem; }
.cookie-pref__row { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .8rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.cookie-pref__row:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.cookie-pref__row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.cookie-pref__row input[type="checkbox"]:disabled { cursor: default; opacity: .55; }
.cookie-pref__row > div { flex: 1; min-width: 0; }
.cookie-pref__name { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 2px; }
.cookie-pref__row small { font-size: .76rem; color: rgba(255,255,255,.55); line-height: 1.45; display: block; }

.cookie-banner__ack { font-size: .85rem; color: var(--teal); padding: .65rem .9rem; background: rgba(43,186,160,.12); border: 1px solid rgba(43,186,160,.25); border-radius: 9px; display: inline-flex; align-items: center; gap: .5rem; }
.cookie-banner__ack[hidden] { display: none; }
.cookie-banner__ack::before { content: "✓"; font-weight: 700; }
.cookie-banner--ack .cookie-banner__main,
.cookie-banner--ack .cookie-banner__details { opacity: .35; pointer-events: none; transition: opacity .2s; }
.cookie-banner { transition: opacity .25s ease, transform .25s ease; }
.cookie-banner--visible:not(.cookie-banner--ack) { opacity: 1; transform: translateX(-50%); }

/* PRODUCT / SOLUTION DETAIL PAGES (mirrors reference-design/1pos.html) */
.p-hero{min-height:78vh;background:var(--navy);display:flex;align-items:center;position:relative;overflow:hidden}
.p-hero::before{content:'';position:absolute;top:-15%;right:-8%;width:65vw;height:65vw;background:radial-gradient(circle,rgba(224,92,138,.06) 0%,transparent 60%);pointer-events:none}
.p-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(79,109,245,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(79,109,245,.02) 1px,transparent 1px);background-size:72px 72px}
.p-hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:8rem 3rem 5rem;width:100%}
.p-hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;background:rgba(224,92,138,.08);border:1px solid rgba(224,92,138,.18);color:var(--rose);padding:.45rem 1.1rem;border-radius:100px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2rem;animation:fadeUp .7s ease both}
.p-hero-eyebrow .dot{width:5px;height:5px;background:var(--rose);border-radius:50%;animation:pulse 2s ease infinite}
.p-hero h1{font-family:var(--serif);font-size:clamp(2.6rem,5.2vw,4.4rem);color:var(--white);line-height:1.08;font-weight:400;max-width:880px;margin-bottom:1.6rem;animation:fadeUp .7s ease .1s both}
.p-hero h1 em{font-style:italic;color:var(--rose)}
.p-hero-sub{font-size:1.1rem;color:rgba(255,255,255,.5);max-width:540px;line-height:1.7;margin-bottom:2.5rem;animation:fadeUp .7s ease .2s both}
.p-hero-actions{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;animation:fadeUp .7s ease .3s both}

.bcrumb{position:absolute;top:6rem;left:3rem;font-size:.78rem;color:rgba(255,255,255,.4);z-index:3;display:flex;align-items:center;gap:.55rem;font-weight:500}
.bcrumb a{color:rgba(255,255,255,.4);text-decoration:none;transition:color .3s}
.bcrumb a:hover{color:var(--white)}
.bcrumb .here{color:rgba(255,255,255,.7)}
.bcrumb svg{stroke:rgba(255,255,255,.3);width:11px;height:11px;fill:none;stroke-width:2;flex-shrink:0}

.p-body{padding:4rem 3rem 2rem;max-width:760px;margin:0 auto}
.p-body:first-of-type{padding-top:6rem}
.p-body .lede{font-family:var(--serif);font-size:clamp(1.55rem,2.5vw,2rem);line-height:1.32;color:var(--text-primary);margin-bottom:1.6rem;font-weight:400}
.p-body .lede em{font-style:italic;color:var(--rose)}
.p-body > p{font-size:1.02rem;color:var(--text-secondary);line-height:1.78;margin-bottom:1.3rem}
.p-body > p em{font-style:italic;color:var(--text-primary)}
.p-body h2{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,1.9rem);margin:2.5rem 0 0.8rem;color:var(--text-primary);font-weight:400;line-height:1.2}
.p-body h2 em{font-style:italic;color:var(--rose)}

.p-body-eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.p-body-heading{font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.2rem);line-height:1.18;color:var(--text-primary);margin:0 0 1.4rem;font-weight:400}
.p-body-heading em{font-style:italic;color:var(--rose)}
.p-body-pull{margin:2rem 0;padding:1.4rem 1.6rem;border-left:3px solid var(--accent);background:var(--gray-50);border-radius:0 12px 12px 0;font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--text-primary)}
.p-body-pull em{font-style:italic;color:var(--accent)}

.p-feature{margin:0 0 1rem;padding:1.4rem 1.5rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:14px}
.p-feature:last-child{margin-bottom:0}
.p-feature__title{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.25;margin:0 0 .9rem;color:var(--text-primary);font-weight:400}
.p-feature__title em{font-style:italic;color:var(--rose)}

.p-feature__pain{position:relative;font-size:.86rem;color:var(--text-secondary);line-height:1.55;margin:0 0 .7rem;padding:.15rem 0 .15rem .85rem;border-left:2px solid var(--rose);font-style:italic}
.p-feature__desc{position:relative;font-size:.95rem;color:var(--text-primary);line-height:1.6;margin:0 0 .7rem;padding:.15rem 0 .15rem .85rem;border-left:2px solid var(--accent)}

.p-feature__outcomes{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.35rem}
.p-feature__outcomes li{font-size:.84rem;color:var(--text-primary);line-height:1.5;display:flex;align-items:flex-start;gap:.5rem;opacity:.85}
.p-feature__outcomes .arrow{color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px;font-size:.95rem}

.inline-stat{margin:3rem 0 1rem;padding:2.4rem 1.8rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center}
.inline-stat .cell{position:relative;padding:.5rem .8rem}
.inline-stat .cell + .cell{border-left:1px solid var(--gray-200)}
.inline-stat .big{font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--rose)}
.inline-stat .lbl{font-size:.76rem;color:var(--text-secondary);margin-top:.5rem;font-weight:500;line-height:1.45}

.case-strip{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);padding:5rem 3rem;margin-top:3rem}
.case-inner{max-width:720px;margin:0 auto}
.case-label{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);margin-bottom:1rem}
.case-quote{font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.4;color:var(--text-primary);margin-bottom:1.3rem}
.case-quote em{font-style:italic;color:var(--rose)}
.case-attr{font-size:.85rem;color:var(--text-secondary);font-weight:500}
.case-attr strong{color:var(--text-primary);font-weight:600}

.p-cta{padding:5rem 3rem 6rem}
.p-cta-inner{max-width:720px;margin:0 auto;text-align:center;background:var(--navy);border-radius:20px;padding:4.5rem 3rem;position:relative;overflow:hidden}
.p-cta-inner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(224,92,138,.08),transparent 70%);pointer-events:none}
.p-cta-inner h3{font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--white);margin-bottom:.7rem;position:relative;z-index:1;line-height:1.2;max-width:480px;margin-left:auto;margin-right:auto}
.p-cta-inner h3 em{font-style:italic;color:var(--rose)}
.p-cta-inner p{color:rgba(255,255,255,.4);font-size:.92rem;margin-bottom:2rem;position:relative;z-index:1;max-width:380px;margin-left:auto;margin-right:auto;line-height:1.6}
.p-cta-inner .btn-primary{position:relative;z-index:1}

@media(max-width:1024px){
  .inline-stat{grid-template-columns:1fr;gap:1.5rem}
  .inline-stat .cell + .cell{border-left:none;border-top:1px solid var(--gray-200);padding-top:1.5rem}
}
@media(max-width:768px){
  .bcrumb{left:1.5rem;top:5rem}
  .p-hero-content{padding:7rem 1.5rem 4rem}
  .p-body,.case-strip,.p-cta{padding-left:1.5rem;padding-right:1.5rem}
}

/* NAV DROPDOWNS (Products / Use Cases / Language) */
.nav-link-simple{color:rgba(255,255,255,.6);text-decoration:none;font-size:.84rem;font-weight:500;transition:color .3s}
.nav-link-simple:hover{color:var(--white)}

.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown__trigger{background:transparent;border:0;padding:.4rem .2rem;color:rgba(255,255,255,.6);font-family:var(--sans);font-size:.84rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:color .3s}
.nav-dropdown__trigger:hover,.nav-dropdown--open .nav-dropdown__trigger{color:var(--white)}

.nav-dropdown__panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:380px;background:var(--white);border:1px solid var(--gray-200);border-radius:14px;padding:.6rem;box-shadow:0 24px 64px rgba(10,14,39,.18),0 4px 16px rgba(10,14,39,.06);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s;z-index:1100}
.nav-dropdown__panel::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-dropdown:hover .nav-dropdown__panel,.nav-dropdown--open .nav-dropdown__panel,.nav-dropdown:focus-within .nav-dropdown__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.nav-dropdown__panel--products,.nav-dropdown__panel--use-cases{min-width:420px}
/* Lang panel anchors to the right edge of its trigger (not viewport).
   Using top:100% + right:0 (instead of left:auto + right:0 on an
   absolutely-positioned-then-translated panel) keeps it predictable
   across viewport widths and prevents the panel from being clipped
   off-screen on narrow desktops. */
.nav-dropdown__panel--lang{min-width:200px;left:auto;right:0;transform:translateY(8px)}
.nav-dropdown:hover .nav-dropdown__panel--lang,.nav-dropdown--open .nav-dropdown__panel--lang,.nav-dropdown:focus-within .nav-dropdown__panel--lang{transform:translateY(0)}

.nav-product{display:flex;align-items:flex-start;gap:.85rem;padding:.85rem;border-radius:10px;color:var(--text-primary);text-decoration:none;transition:background .2s}
.nav-product:hover{background:var(--gray-50)}
.nav-product__icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-product__icon svg{width:20px;height:20px}
.nav-product__body{min-width:0;flex:1}
.nav-product__name{font-weight:700;font-size:.92rem;letter-spacing:-.01em;color:var(--text-primary);margin-bottom:2px}
.nav-product__desc{font-size:.78rem;color:var(--text-secondary);line-height:1.45;margin-bottom:.45rem}
.nav-product__tags{display:flex;flex-wrap:wrap;gap:4px}
.nav-tag{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.nav-tag--accent{background:var(--accent-glow);color:var(--accent)}
.nav-tag--teal{background:var(--teal-glow);color:var(--teal)}
.nav-tag--gold{background:var(--gold-glow);color:var(--gold)}
.nav-tag--rose{background:var(--rose-glow);color:var(--rose)}

.nav-lang-current{font-weight:500}
.nav-dropdown__panel--lang{min-width:200px}

.nav-lang-item{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem .85rem;border-radius:8px;color:var(--text-primary);text-decoration:none;font-size:.92rem;transition:background .2s}
.nav-lang-item:hover{background:var(--gray-50)}
.nav-lang-item--active{background:var(--accent-glow);color:var(--accent);font-weight:600}
.nav-lang-item__name{flex:1;font-weight:600;color:var(--text-primary);font-size:.95rem;line-height:1.2}
.nav-lang-item--active .nav-lang-item__name{color:var(--accent)}
.nav-lang-item__code{font-weight:700;font-size:.68rem;letter-spacing:.08em;color:var(--text-secondary);background:var(--gray-100);padding:2px 7px;border-radius:5px;flex-shrink:0}
.nav-lang-item--active .nav-lang-item__code{color:var(--accent);background:var(--accent-glow)}

@media(max-width:768px){
  .nav-dropdown__panel{position:fixed;top:64px;left:1rem;right:1rem;transform:none;min-width:0;width:auto}
  .nav-dropdown:hover .nav-dropdown__panel,.nav-dropdown--open .nav-dropdown__panel{transform:none}
  .nav-dropdown__panel--lang{right:1rem;left:auto;width:200px}
}

/* ─── RTL SUPPORT ─────────────────────────────────────────────────────
   The HTML root has dir="rtl" when locale=ar. Nav, footer, dropdowns,
   feature-card markers, and arrow SVGs all need to mirror. UI chrome only —
   English content embedded inside RTL text falls through to the bidi algorithm. */
[dir="rtl"] body{text-align:right}
[dir="rtl"] em{font-style:normal}                        /* italic Arabic looks awful — keep emphasis via color */

/* Nav: logo right, links left (visually) so the dropdown still hangs off the same side */
[dir="rtl"] nav{flex-direction:row-reverse}
[dir="rtl"] .nav-links{flex-direction:row-reverse}

/* Dropdown panel keeps centering but flips its tail; the lang panel anchors to the LEFT in RTL */
[dir="rtl"] .nav-dropdown__panel--lang{left:0;right:auto;transform:translateY(8px)}
[dir="rtl"] .nav-dropdown:hover .nav-dropdown__panel--lang,
[dir="rtl"] .nav-dropdown--open .nav-dropdown__panel--lang{transform:translateY(0)}

/* Hero / breadcrumb */
[dir="rtl"] .bcrumb{left:auto;right:3rem;flex-direction:row-reverse}
[dir="rtl"] .bcrumb svg{transform:scaleX(-1)}
[dir="rtl"] .p-hero h1,[dir="rtl"] .p-hero-sub,[dir="rtl"] .p-body-heading,[dir="rtl"] .p-body .lede,[dir="rtl"] .p-body>p{text-align:right}
[dir="rtl"] .hero h1,[dir="rtl"] .hero-sub{text-align:right}

/* CTA and link arrows mirror */
[dir="rtl"] .btn-primary svg,[dir="rtl"] .btn-ghost svg,[dir="rtl"] .seg-link svg,[dir="rtl"] .nav-cta svg{transform:scaleX(-1)}
[dir="rtl"] .p-feature__outcomes .arrow{transform:scaleX(-1);display:inline-block}

/* Feature cards: pain/solution color bars switch sides */
[dir="rtl"] .p-feature__pain{border-left:none;border-right:2px solid var(--rose);padding-left:0;padding-right:.85rem}
[dir="rtl"] .p-feature__desc{border-left:none;border-right:2px solid var(--accent);padding-left:0;padding-right:.85rem}
[dir="rtl"] .p-body-pull{border-left:none;border-right:3px solid var(--accent);border-radius:12px 0 0 12px}
[dir="rtl"] .p-feature__outcomes li{flex-direction:row-reverse;justify-content:flex-end}

/* Segment cards on home */
[dir="rtl"] .seg-card .seg-link{flex-direction:row-reverse}
[dir="rtl"] .home-cta .btn-primary svg{transform:scaleX(-1)}

/* Footer reflows */
[dir="rtl"] .footer-top{flex-direction:row-reverse}
[dir="rtl"] .footer-cols{flex-direction:row-reverse}
[dir="rtl"] .footer-bottom{flex-direction:row-reverse}

/* Stats stay left-to-right because numbers/icons are direction-agnostic, but flip the divider source */
[dir="rtl"] .inline-stat .cell + .cell{border-left:none;border-right:1px solid var(--gray-200)}

/* Modal: keep form rows logical but mirror submit-icon */
[dir="rtl"] .form-submit svg{transform:scaleX(-1)}

/* Cookie banner: actions row reads right-to-left */
[dir="rtl"] .cookie-banner__actions{flex-direction:row-reverse;justify-content:flex-start}

/* Latin-script emphasis (brand names, codes) inside RTL stays LTR via inline dir="ltr" */
[dir="rtl"] .nav-lang-item__code,[dir="rtl"] code{direction:ltr;display:inline-block;unicode-bidi:embed}