/* =========================================================
   Vivid360 v4 — professional, colorful, premium
   Fonts: Inter Tight (display) + Inter (body)
   Multi-accent palette used with intent.
   Dark/light theme support.
   ========================================================= */

:root{
  /* Neutrals — Light */
  --bg:            #ffffff;
  --bg-alt:        #fafaf8;
  --ink:           #0a0a0a;
  --ink-body:      #2a2a2a;
  --ink-muted:     #6d6d6d;
  --ink-secondary: #9a9a9a;
  --border:        #e7e5e1;
  --border-soft:   #efede9;
  --card-bg:       #ffffff;
  --nav-bg:        rgba(255,255,255,0.9);
  --browser-bar:   #f7f6f3;
  --browser-side:  #fbfaf7;
  --tag-gray-bg:   #f0ede8;

  /* Palette */
  --c-emerald: #0d8f88;
  --c-emerald-soft: #d9f0ee;
  --c-amber:   #7c6fe8;
  --c-amber-soft: #e6e3fb;
  --c-cobalt:  #3b2fc9;
  --c-cobalt-soft: #ddd9f9;
  --c-rose:    #2417a3;
  --c-rose-soft: #d8d4f3;
  --c-plum:    #1f8a9f;
  --c-plum-soft: #d6eef3;

  --stone:  #eef0f3;
  --sage:   #e4ecec;
  --slate:  #e7e5f5;
  --clay:   #e9e5f7;
  --bone:   #f3f2f9;

  --accent: var(--c-cobalt);
  --accent-soft: var(--c-cobalt-soft);

  --brand-grad: linear-gradient(90deg, #0d8f88 0%, #7c6fe8 55%, #3b2fc9 100%);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card:  0 20px 60px rgba(10,10,10,0.08);
  --shadow-float: 0 12px 36px rgba(10,10,10,0.10);
  --shadow-mock:  0 40px 80px rgba(0,0,0,0.12);
  --maxw: 1360px;
  --pad-x: clamp(20px, 4vw, 56px);
  --pad-y: clamp(48px, 6.5vw, 92px);
}

/* Dark theme */
[data-theme="dark"]{
  --bg:            #0e0e10;
  --bg-alt:        #161618;
  --ink:           #f0f0f0;
  --ink-body:      #c8c8c8;
  --ink-muted:     #8a8a8a;
  --ink-secondary: #666666;
  --border:        #2a2a2e;
  --border-soft:   #1e1e22;
  --card-bg:       #18181b;
  --nav-bg:        rgba(14,14,16,0.92);
  --browser-bar:   #1c1c1f;
  --browser-side:  #141416;
  --tag-gray-bg:   #28282c;

  --c-emerald-soft: #0d2e2c;
  --c-amber-soft: #1e1a3a;
  --c-cobalt-soft: #181440;
  --c-rose-soft: #160f38;
  --c-plum-soft: #0e2830;

  --stone:  #1a1c20;
  --sage:   #161e1e;
  --slate:  #1a1a28;
  --clay:   #1c1a2a;
  --bone:   #1a1a24;

  --shadow-card:  0 20px 60px rgba(0,0,0,0.3);
  --shadow-float: 0 12px 36px rgba(0,0,0,0.35);
  --shadow-mock:  0 40px 80px rgba(0,0,0,0.4);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ overflow-x:hidden; }
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.65;
  color:var(--ink-body); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
  font-feature-settings:"cv11","ss01","ss03";
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input,select,textarea{ font:inherit; color:inherit; }

/* Typography */
.display{
  font-family:'Inter Tight','Inter',sans-serif;
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:1.02;
  color:var(--ink);
  text-wrap:balance;
}
.display .it{ font-style:italic; font-weight:500; font-family:'Inter Tight',serif; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:0.08em; margin-right:-0.03em; }
.h1{ font-size: clamp(36px, 4.5vw, 64px); }
.h2{ font-size: clamp(30px, 3.5vw, 56px); }
.h3{ font-size: clamp(24px, 2.4vw, 36px); }

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--c-emerald);
  font-family:'Inter',sans-serif;
}
.lede{ font-size:clamp(15px,1.1vw,17px); line-height:1.6; color:var(--ink-muted); max-width:54ch; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }
section{ padding-top:var(--pad-y); padding-bottom:var(--pad-y); }
.section-head{ max-width:720px; margin-bottom:40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:18px; }
.section-head .lede{ margin-top:20px; }

/* Scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:100; pointer-events:none; }
.scroll-progress__bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--c-emerald), var(--c-amber), var(--c-rose), var(--c-cobalt));
  background-size: 300% 100%;
  animation: gradMove 6s linear infinite;
  transition: width .08s linear;
}
@keyframes gradMove{ 0%{background-position:0% 0} 100%{background-position:300% 0} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500;
  transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap; cursor:pointer; will-change:transform;
}
.btn:active{ transform:scale(0.97); }
.btn--primary{
  background:var(--ink); color:var(--bg);
  box-shadow: 0 10px 30px -8px rgba(15,81,50,0.4);
}
.btn--primary:hover{ background:var(--ink-body); box-shadow:0 14px 40px -8px rgba(15,81,50,0.55); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--sm{ padding:9px 18px; font-size:13px; }

/* Shimmering primary */
.btn--primary{ position:relative; overflow:hidden; }
.btn--primary::before{
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform:skewX(-20deg);
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer{ 0%{left:-60%} 70%,100%{left:140%} }

/* Email capture */
.email-capture{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.email-capture input{
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:13px 20px;
  min-width:220px; outline:none; font-size:14px;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  color:var(--ink);
}
.email-capture input::placeholder{ color:var(--ink-secondary); }
.email-capture input:focus{ border-color:var(--c-emerald); background:var(--card-bg); box-shadow:0 0 0 4px var(--c-emerald-soft); }

/* NAV */
.nav{
  position:sticky; top:0; left:0; right:0; z-index:50; height:68px;
  background:var(--nav-bg); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--border); }
.nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav__brand{ display:flex; align-items:center; gap:10px; font-family:'Inter Tight',sans-serif; font-size:18px; font-weight:600; letter-spacing:-0.02em; flex-shrink:0; }
.nav__brand .mark{ width:28px; height:28px; color:var(--c-emerald); }
.nav__wordmark{ height:28px; width:auto; display:block; }
.footer__wordmark{ height:32px; width:auto; display:block; }
.nav__sep{ width:1px; height:20px; background:var(--border); margin:0 4px; }
.nav__links{ display:flex; gap:24px; font-size:13px; color:var(--ink-body); font-weight:500; }
.nav__links a{ position:relative; padding:6px 0; transition:color .2s var(--ease); }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:2px; width:0; height:1.5px; background:var(--c-emerald); transition: width .3s var(--ease); }
.nav__links a:hover{ color:var(--c-emerald); }
.nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* Mobile hamburger */
.nav__hamburger{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:8px; transition:background .2s var(--ease);
}
.nav__hamburger:hover{ background:var(--bg-alt); }
.nav__hamburger svg{ width:22px; height:22px; color:var(--ink); }

@media (max-width:900px){
  .nav__links, .nav__sep{ display:none; }
  .nav__hamburger{ display:flex; }
  .nav__actions .btn--ghost{ display:none; }
}

/* Mobile drawer — full-screen overlay */
.mobile-drawer{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.mobile-drawer.is-open{ transform:translateX(0); }
.mobile-drawer__overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.4);
  z-index:199; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.mobile-drawer__overlay.is-open{ opacity:1; pointer-events:auto; }

.mobile-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; flex-shrink:0;
}
.mobile-drawer__header img{ height:24px; width:auto; }
.mobile-drawer__close{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.mobile-drawer__close:hover{ background:var(--bg-alt); border-color:var(--ink-secondary); }
.mobile-drawer__close svg{ width:18px; height:18px; }

.mobile-drawer__nav{
  display:flex; flex-direction:column; padding:24px 0; flex:1;
  justify-content:center;
}
.mobile-drawer__nav a{
  display:block; padding:16px 32px;
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(22px, 4vw, 32px); font-weight:500;
  letter-spacing:-0.025em; color:var(--ink-muted);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
  position:relative;
}
.mobile-drawer__nav a::before{
  content:''; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:4px; height:0; border-radius:2px; background:var(--c-emerald);
  transition:height .25s var(--ease);
}
.mobile-drawer__nav a:hover{ color:var(--ink); padding-left:40px; }
.mobile-drawer__nav a:hover::before{ height:24px; }

.mobile-drawer__divider{
  width:40px; height:1px; background:var(--border); margin:8px 32px;
}

.mobile-drawer__footer{
  padding:24px 32px; flex-shrink:0;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-drawer__footer .btn{ width:100%; justify-content:center; }
.mobile-drawer__footer .drawer-social{
  display:flex; gap:16px; margin-top:8px; align-items:center;
}
.mobile-drawer__footer .drawer-social span{
  font-size:12px; color:var(--ink-secondary);
}
.mobile-drawer__footer .drawer-social a{
  color:var(--ink-muted); transition:color .2s var(--ease);
}
.mobile-drawer__footer .drawer-social a:hover{ color:var(--c-emerald); }

/* HERO */
.hero{
  position:relative;
  padding-top:clamp(40px, 5vw, 80px);
  padding-bottom:clamp(60px, 8vw, 120px);
  overflow:hidden;
}
.hero__grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  pointer-events:none; z-index:0;
}
[data-theme="dark"] .hero__grid-bg{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
}
.hero::before{
  content:''; position:absolute;
  top:-100px; right:-100px;
  width:520px; height:520px; border-radius:50%;
  background: conic-gradient(from 0deg,
    var(--c-emerald-soft), var(--c-amber-soft), var(--c-rose-soft),
    var(--c-cobalt-soft), var(--c-plum-soft), var(--c-emerald-soft));
  filter: blur(80px); opacity:0.55;
  animation: orbSpin 24s linear infinite;
  pointer-events:none; z-index:0;
}
@keyframes orbSpin{ to{ transform:rotate(360deg); } }

.hero__layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap:clamp(28px, 4vw, 72px); align-items:center;
}
@media (max-width:1000px){ .hero__layout{ grid-template-columns:1fr; } }

.hero__left{ min-width:0; }
.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  background:var(--c-emerald-soft); color:var(--c-emerald);
  border-radius:var(--r-pill);
  font-size:12px; font-weight:600; margin-bottom:28px;
  font-family:'Inter',sans-serif;
}
.hero__badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-emerald); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
.hero__headline{ margin:0 0 24px; }
.hero__lede{ margin:0 0 36px; }
.hero__cta{ margin-bottom:36px; }
.hero__proof{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-muted); }
.hero__proof strong{ color:var(--ink); font-weight:600; }
.avatars{ display:inline-flex; }
.avatars span{ width:30px; height:30px; border-radius:50%; border:2px solid var(--card-bg); display:inline-block; margin-left:-10px; }
.avatars span:first-child{ margin-left:0; }

.hero__right{ position:relative; perspective:1600px; perspective-origin:50% 50%; min-height:480px; }
.diorama{ position:relative; transform-style:preserve-3d; transform:rotateX(4deg) rotateY(-8deg); transition:transform .4s var(--ease); will-change:transform; }

/* Browser mock */
.browser{ background:var(--card-bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-mock); overflow:hidden; position:relative; }
.browser__bar{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--browser-bar); border-bottom:1px solid var(--border); }
.browser__dots{ display:flex; gap:6px; }
.browser__dots span{ width:11px; height:11px; border-radius:50%; }
.browser__dots span:nth-child(1){ background:#ff5f57; }
.browser__dots span:nth-child(2){ background:#febc2e; }
.browser__dots span:nth-child(3){ background:#28c840; }
.browser__url{
  flex:1; background:var(--card-bg); border:1px solid var(--border);
  border-radius:999px; padding:5px 14px;
  font-size:11px; color:var(--ink-muted); text-align:center;
  max-width:420px; margin:0 auto;
  font-family:'Inter',sans-serif;
}
.browser__body{ display:grid; grid-template-columns: 180px 1fr; min-height:420px; }
.browser__body.full{ grid-template-columns:1fr; }

.db-side{
  border-right:1px solid var(--border); padding:18px 10px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--browser-side); font-size:12px;
}
.db-side .logo{ display:flex; align-items:center; gap:8px; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:15px; padding:4px 8px 16px; color:var(--ink); }
.db-side .logo img{ width:24px; height:24px; object-fit:contain; }
.db-side .label{ font-size:10px; letter-spacing:0.12em; color:var(--ink-secondary); text-transform:uppercase; padding:12px 8px 6px; font-family:'Inter',sans-serif; font-weight:600; }
.db-side a{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px; color:var(--ink-muted); transition:background .2s var(--ease), color .2s var(--ease); }
.db-side a.active{ background:var(--card-bg); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.db-side a .di{ width:14px; height:14px; flex:0 0 14px; color:var(--c-emerald); }

.db-main{ padding:18px; display:flex; flex-direction:column; gap:14px; background:var(--card-bg); }
.db-main .topbar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:4px; }
.db-main .topbar h4{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:18px; margin:0; letter-spacing:-0.02em; }
.db-main .topbar .sub{ font-size:10px; color:var(--ink-muted); margin-top:2px; font-family:'Inter',sans-serif; }
.db-main .topbar .pill{ font-size:10px; padding:4px 10px; background:var(--c-emerald-soft); color:var(--c-emerald); border-radius:999px; font-weight:600; }

.kpi-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.kpi{ padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); position:relative; overflow:hidden; }
.kpi::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--kpi-c, var(--c-emerald)); }
.kpi:nth-child(1){ --kpi-c: var(--c-emerald); }
.kpi:nth-child(2){ --kpi-c: var(--c-amber); }
.kpi:nth-child(3){ --kpi-c: var(--c-cobalt); }
.kpi:nth-child(4){ --kpi-c: var(--c-rose); }
.kpi .lbl{ font-size:10px; color:var(--ink-muted); }
.kpi .val{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:22px; letter-spacing:-0.02em; margin-top:2px; line-height:1.1; color:var(--ink); }
.kpi .delta{ font-size:10px; color:var(--kpi-c, var(--c-emerald)); margin-top:2px; font-weight:600; }
.kpi .delta.neg{ color:#b3322a; }

.db-chart{ border:1px solid var(--border); border-radius:8px; padding:12px; flex:1; min-height:180px; display:flex; flex-direction:column; gap:8px; }
.db-chart .chead{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--ink-muted); }
.db-chart .chead strong{ color:var(--ink); font-weight:600; font-size:12px; }
.db-chart svg{ width:100%; flex:1; }
.chart-path{ stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.is-in .chart-path, .reveal.is-in .chart-path{ animation: dashDraw 2.2s var(--ease) forwards; }
@keyframes dashDraw{ to{ stroke-dashoffset:0; } }

.chart-wrap{ position:relative; flex:1; min-height:0; overflow:hidden; }
.chart-wrap svg{ width:100%; height:100%; display:block; }
.chart-points{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.chart-pt{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto; padding:6px; }
.chart-pt__dot{
  display:block; width:7px; height:7px; border-radius:50%;
  background:#0d8f88; border:2px solid var(--card-bg);
  box-shadow:0 0 0 2px rgba(13,143,136,0.15);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  opacity:0;
}
.is-in .chart-pt__dot{ animation:dotAppear .4s var(--ease) forwards; animation-delay:var(--dot-d, 1.8s); }
@keyframes dotAppear{ to{ opacity:1; } }
.chart-pt:hover .chart-pt__dot{ transform:scale(1.6); box-shadow:0 0 0 4px rgba(13,143,136,0.25); opacity:1; }
.chart-pt__tip{
  position:absolute; bottom:calc(100% + 8px); left:50%; z-index:10;
  transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:#fff;
  padding:6px 10px; border-radius:8px;
  font-size:11px; font-weight:600; font-family:'Inter Tight',sans-serif;
  white-space:nowrap; text-align:center; line-height:1.4;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.chart-pt__tip::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink);
}
.chart-pt__tip small{ display:block; font-weight:400; font-size:9px; opacity:0.6; font-family:'Inter',sans-serif; }
.chart-pt:hover .chart-pt__tip{ opacity:1; transform:translateX(-50%) translateY(0); }

.db-table{ border:1px solid var(--border); border-radius:8px; overflow:hidden; font-size:11px; }
.db-table .tr{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 80px; padding:8px 12px; border-bottom:1px solid var(--border); align-items:center; }
.db-table .tr:last-child{ border-bottom:0; }
.db-table .tr.th{ background:var(--browser-side); color:var(--ink-muted); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; font-family:'Inter',sans-serif; font-weight:600; }
.db-table .tag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; background:var(--c-emerald-soft); color:var(--c-emerald); font-weight:600; }
.db-table .tag.gray{ background:var(--tag-gray-bg); color:var(--ink-muted); }

.float-card{ position:absolute; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-float); padding:12px 14px; font-size:11px; }
.float-card.fc1{ top:-24px; right:-28px; transform:translateZ(60px); width:200px; border-left:3px solid var(--c-amber); }
.float-card.fc2{ bottom:-30px; left:-20px; transform:translateZ(40px); width:220px; border-left:3px solid var(--c-cobalt); }
.fc1 .lbl{ font-size:10px; color:var(--ink-muted); font-family:'Inter',sans-serif; }
.fc1 .val{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:22px; letter-spacing:-0.02em; color:var(--ink); }
.fc1 .delta{ color:var(--c-amber); font-size:11px; font-weight:600; margin-top:2px; }
.fc2 .tt{ font-weight:600; color:var(--ink); margin-bottom:4px; }
.fc2 .mt{ color:var(--ink-muted); font-size:10px; }
.fc2 .av{ display:inline-block; width:22px; height:22px; border-radius:50%; background:var(--c-cobalt-soft); margin-right:6px; vertical-align:middle; }

/* Editorial */
.editorial__grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap:clamp(32px, 6vw, 96px); align-items:start; }
.editorial__body p{ margin:0 0 18px; color:var(--ink-body); }
.editorial__body p:last-child{ color:var(--ink-muted); margin:0; }
@media (max-width:900px){ .editorial__grid{ grid-template-columns:1fr; } }

/* Bento */
.bento{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap:16px; }
.bento .span-2{ grid-column: span 2; }
@media (max-width:1000px){ .bento{ grid-template-columns:repeat(2,1fr); } .bento .span-2{ grid-column:span 2; } }
@media (max-width:600px){ .bento{ grid-template-columns:1fr; } .bento .span-2{ grid-column:span 1; } }

.feature-card{
  display:flex; flex-direction:column; padding:28px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card-bg); position:relative;
  transform-style: preserve-3d;
  transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
  overflow:hidden;
}
.feature-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), var(--hc, rgba(15,81,50,0.06)), transparent 40%);
  opacity:0; transition: opacity .3s var(--ease);
}
.feature-card:hover::after{ opacity:1; }
.feature-card:hover{ border-color:var(--hc-border, var(--c-emerald)); transform:translateZ(20px); box-shadow:0 14px 40px -8px var(--hc-shadow, rgba(15,81,50,0.20)); }
.feature-card .icon{
  width:46px; height:46px; flex:0 0 46px; border-radius:14px;
  background:var(--icon-grad, linear-gradient(135deg, #667eea, #764ba2));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; position:relative; overflow:hidden;
  box-shadow: 0 8px 24px -2px var(--icon-glow, rgba(102,126,234,0.45)), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s;
}
.feature-card .icon::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.06) 100%);
  border:1px solid rgba(255,255,255,0.18); border-radius:14px;
}
.feature-card .icon::after{
  content:''; position:absolute; top:3px; left:6px; right:6px; height:18px;
  border-radius:12px 12px 50% 50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 100%);
}
.feature-card:hover .icon{ transform:scale(1.08); }
.feature-card .icon svg{ width:22px; height:22px; position:relative; z-index:2; stroke:white; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.2)); color:white; }
.feature-card h3{ font-family:'Inter Tight',sans-serif; font-size:17px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em; color:var(--ink); }
.feature-card p{ font-size:14px; line-height:1.6; color:var(--ink-muted); margin:0; }
.feature-card.big{ padding:36px; }
.feature-card.big h3{ font-size:22px; }
.feature-card.big .icon{ width:56px; height:56px; flex:0 0 56px; border-radius:16px; }
.feature-card.big .icon svg{ width:26px; height:26px; }
.feature-card.c-emerald{ --hc:rgba(15,81,50,0.08); --hc-border:var(--c-emerald); --hc-shadow:rgba(15,81,50,0.22); --hc-c:var(--c-emerald); --hc-soft:var(--c-emerald-soft); }
.feature-card.c-amber  { --hc:rgba(194,87,10,0.08); --hc-border:var(--c-amber); --hc-shadow:rgba(194,87,10,0.22); --hc-c:var(--c-amber); --hc-soft:var(--c-amber-soft); }
.feature-card.c-cobalt { --hc:rgba(30,58,138,0.08); --hc-border:var(--c-cobalt); --hc-shadow:rgba(30,58,138,0.22); --hc-c:var(--c-cobalt); --hc-soft:var(--c-cobalt-soft); }
.feature-card.c-rose   { --hc:rgba(168,51,91,0.08); --hc-border:var(--c-rose); --hc-shadow:rgba(168,51,91,0.22); --hc-c:var(--c-rose); --hc-soft:var(--c-rose-soft); }
.feature-card.c-plum   { --hc:rgba(107,33,168,0.08); --hc-border:var(--c-plum); --hc-shadow:rgba(107,33,168,0.22); --hc-c:var(--c-plum); --hc-soft:var(--c-plum-soft); }

.feature-card .link{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:20px; font-size:13px; font-weight:600; color:var(--hc-c, var(--c-emerald)); }
.feature-card .link .arr{ transition: transform .25s var(--ease); display:inline-block; }
.feature-card:hover .link .arr{ transform:translateX(4px); }

.mini-mock{ margin-top:20px; flex:1; border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--bg-alt); display:flex; flex-direction:column; gap:6px; min-height:120px; }
.mini-mock .mm-head{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-muted); font-family:'Inter',sans-serif; }
.mini-mock .mm-val{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:28px; letter-spacing:-0.02em; color:var(--ink); }
.mini-mock svg{ width:100%; flex:1; }

/* Integrations */
.integrations{ padding:48px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); background:var(--bg-alt); }
.integrations .lbl{ text-align:center; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:28px; font-family:'Inter',sans-serif; font-weight:600; }
.logo-marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track{ display:flex; gap:60px; width:max-content; animation: logomarq 42s linear infinite; }
.logo-marquee:hover .logo-marquee__track{ animation-play-state:paused; }
@keyframes logomarq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo-chip{ display:inline-flex; align-items:center; gap:10px; font-family:'Inter Tight',sans-serif; font-weight:600; font-size:20px; color:var(--ink-body); letter-spacing:-0.02em; white-space:nowrap; opacity:.55; transition:opacity .25s var(--ease), color .25s var(--ease); }
.logo-chip:hover{ opacity:1; color:var(--ink); }
.logo-chip svg{ width:22px; height:22px; }
.logo-chip:nth-child(1) svg{ color:var(--c-cobalt); }
.logo-chip:nth-child(2) svg{ color:var(--c-amber); }
.logo-chip:nth-child(3) svg{ color:var(--c-emerald); }
.logo-chip:nth-child(4) svg{ color:var(--c-rose); }
.logo-chip:nth-child(5) svg{ color:var(--c-plum); }
.logo-chip:nth-child(6) svg{ color:var(--c-amber); }
.logo-chip:nth-child(7) svg{ color:var(--c-cobalt); }
.logo-chip:nth-child(8) svg{ color:var(--c-emerald); }

/* Automation flow */
.flow{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .flow{ grid-template-columns:1fr; } }
.flow__connector{ position:absolute; top:90px; left:10%; right:10%; height:2px; z-index:0; pointer-events:none; }
@media (max-width:900px){ .flow__connector{ display:none; } }
.flow__connector svg{ width:100%; height:24px; display:block; overflow:visible; }
.flow__connector .dotpath{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3 6; fill:none; opacity:0.35; }
.flow__connector .pulse{ fill:var(--c-emerald); filter:drop-shadow(0 0 6px var(--c-emerald)); }

.flow-card{ position:relative; z-index:1; padding:26px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card-bg); display:flex; flex-direction:column; min-height:260px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.flow-card:hover{ transform:translateY(-6px); box-shadow: 0 20px 50px -12px var(--fc-shadow, rgba(15,81,50,0.25)); }
.flow-card.c-emerald{ background: linear-gradient(180deg, var(--c-emerald-soft) 0%, var(--card-bg) 100%); --fc-shadow:rgba(15,81,50,0.25); }
.flow-card.c-amber  { background: linear-gradient(180deg, var(--c-amber-soft) 0%, var(--card-bg) 100%); --fc-shadow:rgba(194,87,10,0.25); }
.flow-card.c-cobalt { background: linear-gradient(180deg, var(--c-cobalt-soft) 0%, var(--card-bg) 100%); --fc-shadow:rgba(30,58,138,0.25); }
.flow-card.c-rose   { background: linear-gradient(180deg, var(--c-rose-soft) 0%, var(--card-bg) 100%); --fc-shadow:rgba(168,51,91,0.25); }

.cube-wrap{ width:56px; height:56px; perspective:400px; margin-bottom:20px; }
.cube{ width:100%; height:100%; position:relative; transform-style:preserve-3d; animation: cubeSpin 14s linear infinite; }
@keyframes cubeSpin{ from{ transform:rotateX(-20deg) rotateY(0deg); } to{ transform:rotateX(-20deg) rotateY(360deg); } }
.cube .face{ position:absolute; inset:0; background:rgba(255,255,255,0.96); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; backface-visibility:visible; }
[data-theme="dark"] .cube .face{ background:rgba(30,30,34,0.96); }
.cube .face svg{ width:22px; height:22px; }
.cube .front{ transform: translateZ(28px); }
.cube .back { transform: rotateY(180deg) translateZ(28px); }
.cube .right{ transform: rotateY(90deg)  translateZ(28px); }
.cube .left { transform: rotateY(-90deg) translateZ(28px); }
.cube .top  { transform: rotateX(90deg)  translateZ(28px); }
.cube .bot  { transform: rotateX(-90deg) translateZ(28px); }
.flow-card.c-emerald .cube .face svg{ color:var(--c-emerald); }
.flow-card.c-amber   .cube .face svg{ color:var(--c-amber); }
.flow-card.c-cobalt  .cube .face svg{ color:var(--c-cobalt); }
.flow-card.c-rose    .cube .face svg{ color:var(--c-rose); }

.flow-card .num{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:8px; font-family:'Inter',sans-serif; font-weight:600; }
.flow-card.c-emerald .num{ color:var(--c-emerald); }
.flow-card.c-amber   .num{ color:var(--c-amber); }
.flow-card.c-cobalt  .num{ color:var(--c-cobalt); }
.flow-card.c-rose    .num{ color:var(--c-rose); }
.flow-card .ttl{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:22px; letter-spacing:-0.025em; line-height:1.1; margin:0 0 10px; color:var(--ink); }
.flow-card .bod{ font-size:13px; color:var(--ink-muted); line-height:1.55; margin:0; }

/* 360 view tabs */
.tabs-wrap{ display:flex; justify-content:center; margin-bottom:40px; }
.liquid-tabs{ position:relative; display:inline-flex; padding:5px; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-pill); }
.liquid-tabs .lt{ position:relative; z-index:1; padding:9px 22px; font-size:13px; font-weight:600; color:var(--ink-muted); border-radius:var(--r-pill); transition:color .3s var(--ease); }
.liquid-tabs .lt.is-active{ color:#fff; }
.liquid-tabs .pill-bg{ position:absolute; top:5px; left:5px; height:calc(100% - 10px); background:var(--ink); border-radius:var(--r-pill); box-shadow:0 4px 12px rgba(15,81,50,0.25); transition: transform .4s var(--ease), width .4s var(--ease); z-index:0; }

.panels{ position:relative; }
.panel{ display:grid; grid-template-columns:1fr 1fr; gap:20px; opacity:0; visibility:hidden; position:absolute; top:0; left:0; right:0; transition: opacity .3s var(--ease); }
.panel.is-active{ opacity:1; visibility:visible; position:relative; }
@media (max-width:900px){ .panel{ grid-template-columns:1fr; } }

/* Solutions */
.sol-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .sol-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sol-grid{ grid-template-columns:1fr; } }

/* Projects masonry */
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.filter button{ padding:9px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:500; border:1px solid var(--border); color:var(--ink-body); background:var(--card-bg); transition: all .25s var(--ease); }
.filter button:hover{ border-color:var(--c-emerald); color:var(--c-emerald); }
.filter button.is-active{ background:var(--c-emerald); color:#fff; border-color:var(--c-emerald); box-shadow:0 6px 18px -6px rgba(15,81,50,0.5); }

.masonry{ column-count:3; column-gap:16px; }
@media (max-width:1000px){ .masonry{ column-count:2; } }
@media (max-width:600px){ .masonry{ column-count:1; } }

.project{ break-inside:avoid; display:flex; flex-direction:column; margin-bottom:16px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--card-bg); transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease); }
.project:hover{ border-color:var(--c-emerald); transform:translateY(-4px); box-shadow:0 16px 40px -12px rgba(15,81,50,0.25); }
.project.is-hidden{ display:none; }
.project__media{ position:relative; padding:18px; background:var(--bg-alt); border-bottom:1px solid var(--border); }
.project__media .tag{ position:absolute; top:14px; right:14px; background:var(--card-bg); color:var(--c-emerald); padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid var(--c-emerald-soft); }
.project:nth-child(3n+1) .project__media{ min-height:200px; }
.project:nth-child(3n+2) .project__media{ min-height:260px; }
.project:nth-child(3n)   .project__media{ min-height:180px; }

.project__body{ padding:18px; }
.project__body h3{ font-family:'Inter Tight',sans-serif; font-size:16px; font-weight:600; margin:0 0 6px; letter-spacing:-0.015em; color:var(--ink); }
.project__body p{ color:var(--ink-muted); font-size:13px; margin:0; line-height:1.55; }

.mini-dash{ background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.mini-dash .mh{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-muted); font-family:'Inter',sans-serif; }
.mini-dash .mh strong{ color:var(--ink); font-weight:600; font-size:11px; font-family:'Inter',sans-serif; }
.mini-dash .mv{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:28px; letter-spacing:-0.025em; color:var(--ink); }
.mini-dash .mv .up{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; color:var(--c-emerald); margin-left:6px; }
.mini-dash svg{ width:100%; height:60px; }

/* Stats */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; padding:64px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
@media (max-width:900px){ .stats{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:500px){ .stats{ grid-template-columns:1fr; } }
.stat{ text-align:left; position:relative; padding-left:16px; }
.stat::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:2px; background:var(--st-c, var(--c-emerald)); border-radius:2px; }
.stat:nth-child(1){ --st-c:var(--c-emerald); }
.stat:nth-child(2){ --st-c:var(--c-amber); }
.stat:nth-child(3){ --st-c:var(--c-cobalt); }
.stat:nth-child(4){ --st-c:var(--c-rose); }
.stat .n{ font-family:'Inter Tight',sans-serif; font-weight:500; font-size:clamp(48px,6vw,76px); line-height:1; letter-spacing:-0.035em; color:var(--ink); display:block; }
.stat .n .u{ font-size:0.55em; color:var(--st-c, var(--ink-muted)); margin-left:4px; font-weight:600; }
.stat .lbl{ font-size:13px; color:var(--ink-muted); margin-top:8px; display:block; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ border:1px solid var(--border); border-radius:var(--r-md); padding:36px; background:var(--card-bg); box-shadow:0 20px 60px -20px rgba(15,81,50,0.15); position:relative; z-index:2; overflow:visible; }
.contact-card h3{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:clamp(24px,2vw,30px); line-height:1.1; letter-spacing:-0.025em; margin:0 0 8px; color:var(--ink); }
.contact-card .sub{ color:var(--ink-muted); font-size:14px; margin:0 0 24px; }
.contact-card form{ display:flex; flex-direction:column; gap:14px; }

.field{ position:relative; }
.field input{ width:100%; padding:20px 14px 8px; background:var(--card-bg); border:1px solid var(--border); border-radius:10px; outline:none; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); font-size:14px; color:var(--ink); }
.field label{ position:absolute; left:14px; top:16px; font-size:14px; color:var(--ink-muted); transition: all .25s var(--ease); pointer-events:none; }
.field input:focus{ border-color:var(--c-emerald); box-shadow:0 0 0 4px var(--c-emerald-soft); }
.field input:focus + label, .field input:not(:placeholder-shown) + label{ top:6px; font-size:10px; color:var(--c-emerald); letter-spacing:0.08em; text-transform:uppercase; font-family:'Inter',sans-serif; font-weight:600; }

.contact-lead ul{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:0; }
.contact-lead ul li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--border-soft); font-size:14px; }
.contact-lead ul li:last-child{ border-bottom:0; }
.contact-lead ul li .dot{ width:8px; height:8px; border-radius:50%; margin-top:8px; flex:0 0 8px; }
.contact-lead ul li:nth-child(1) .dot{ background:var(--c-emerald); box-shadow:0 0 0 4px var(--c-emerald-soft); }
.contact-lead ul li:nth-child(2) .dot{ background:var(--c-amber); box-shadow:0 0 0 4px var(--c-amber-soft); }
.contact-lead ul li:nth-child(3) .dot{ background:var(--c-cobalt); box-shadow:0 0 0 4px var(--c-cobalt-soft); }
.contact-lead ul li strong{ color:var(--ink); font-weight:600; display:block; margin-bottom:2px; }
.contact-lead ul li span.d{ color:var(--ink-muted); font-size:13px; }

.submit-btn{ position:relative; justify-content:center; min-width:160px; }
.submit-btn .sp{ display:none; width:14px; height:14px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation: spin 0.9s linear infinite; }
.submit-btn.loading .tx{ opacity:0; } .submit-btn.loading .sp{ display:inline-block; }
.submit-btn.done{ background:var(--c-emerald); }
.submit-btn.done .tx{ opacity:1; } .submit-btn.done .sp{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Final CTA */
.final{ position:relative; padding-top:clamp(80px,12vw,160px); padding-bottom:clamp(80px,12vw,160px); overflow:hidden; background:var(--bg-alt); }
.final::before{ content:''; position:absolute; inset:-50% -10% auto; height:120%; background:conic-gradient(from 0deg, var(--c-emerald-soft), var(--c-amber-soft), var(--c-rose-soft), var(--c-cobalt-soft), var(--c-plum-soft), var(--c-emerald-soft)); filter:blur(100px); opacity:0.55; animation: orbSpin 30s linear infinite; pointer-events:none; }
.final__inner{ position:relative; z-index:3; max-width:640px; margin:0 auto; text-align:center; }
.final__mark{ width:88px; height:88px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 14px 28px rgba(59,47,201,0.35)); animation: markFloat 6s ease-in-out infinite; }
.final__mark img{ width:100%; height:auto; }
@keyframes markFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-8px) rotate(-3deg); } }
.final__lede{ margin:20px auto 32px; }
.final__cta{ margin-bottom:24px; }

.shapes{ position:absolute; inset:0; perspective:1200px; perspective-origin:50% 50%; pointer-events:none; z-index:1; }
.shape{ position:absolute; transform-style:preserve-3d; }
.cube3d{ width:100px; height:100px; }
.cube3d .f{ position:absolute; inset:0; border-radius:14px; border:1px solid var(--border); }
.cube3d .f.front{ transform:translateZ(50px); background:linear-gradient(135deg, var(--c-emerald-soft), var(--card-bg)); }
.cube3d .f.back { transform:rotateY(180deg) translateZ(50px); background:linear-gradient(135deg, var(--c-amber-soft), var(--card-bg)); }
.cube3d .f.right{ transform:rotateY(90deg)  translateZ(50px); background:linear-gradient(135deg, var(--c-rose-soft), var(--card-bg)); }
.cube3d .f.left { transform:rotateY(-90deg) translateZ(50px); background:linear-gradient(135deg, var(--c-cobalt-soft), var(--card-bg)); }
.cube3d .f.top  { transform:rotateX(90deg)  translateZ(50px); background:linear-gradient(135deg, var(--c-plum-soft), var(--card-bg)); }
.cube3d .f.bot  { transform:rotateX(-90deg) translateZ(50px); background:linear-gradient(135deg, var(--stone), var(--card-bg)); }
.sphere3d{ width:110px; height:110px; border-radius:50%; background: radial-gradient(circle at 30% 25%, var(--card-bg), var(--c-amber-soft) 50%, #e6bfa0 100%); box-shadow: inset -10px -10px 30px rgba(10,10,10,0.12), 0 30px 60px rgba(194,87,10,0.18); }
.torus3d{ width:140px; height:140px; position:relative; }
.torus3d .ring{ position:absolute; inset:0; border-radius:50%; border:14px solid transparent; border-top-color:var(--c-emerald); border-left-color:var(--c-amber); border-right-color:var(--c-rose); border-bottom-color:var(--c-cobalt); box-shadow:0 20px 40px rgba(10,10,10,0.12); }
.card3d{ width:130px; height:90px; border-radius:14px; background:linear-gradient(135deg, var(--card-bg), var(--c-cobalt-soft)); border:1px solid var(--border); box-shadow:var(--shadow-float); }

.s1{ top:12%; left:6%;  animation: orbit1 14s linear infinite; }
.s2{ top:14%; right:8%; animation: orbit2 18s linear infinite; }
.s3{ bottom:10%; left:10%; animation: orbit3 16s linear infinite; }
.s4{ bottom:12%; right:6%; animation: orbit4 20s linear infinite; }
.s5{ top:48%; left:2%; animation: orbit5 22s linear infinite; }
@keyframes orbit1{ 0%{transform:rotateX(0) rotateY(0) translateY(0)} 50%{transform:rotateX(10deg) rotateY(180deg) translateY(-10px)} 100%{transform:rotateX(0) rotateY(360deg) translateY(0)} }
@keyframes orbit2{ 0%{transform:rotateX(0) rotateY(0) translateY(0)} 50%{transform:rotateX(-10deg) rotateY(180deg) translateY(-14px)} 100%{transform:rotateX(0) rotateY(360deg) translateY(0)} }
@keyframes orbit3{ from{transform:rotateX(60deg) rotateZ(0)} to{transform:rotateX(60deg) rotateZ(360deg)} }
@keyframes orbit4{ from{transform:rotateX(10deg) rotateY(0)} to{transform:rotateX(10deg) rotateY(360deg)} }
@keyframes orbit5{ 0%{transform:translateY(0)} 50%{transform:translateY(-12px)} 100%{transform:translateY(0)} }
@media (max-width:900px){ .s1,.s2,.s3,.s4,.s5{ transform:scale(0.7); } .s5{ display:none; } }

/* Footer */
.footer{ border-top:1px solid var(--border); padding:72px 0 32px; background:var(--card-bg); }
.footer__top{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__top{ grid-template-columns:1fr; } }
.footer__brand{ display:flex; flex-direction:column; gap:14px; max-width:320px; }
.footer__brand .mark{ width:32px; height:32px; color:var(--c-emerald); }
.footer__brand p{ margin:0; color:var(--ink-muted); font-size:13px; }
.footer__col h4{ font-size:13px; font-weight:600; margin:0 0 14px; color:var(--ink); }
.footer__col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.footer__col a{ color:var(--ink-muted); font-size:13px; transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--c-emerald); }

/* Social icon badges */
.footer__col ul.social-list{ display:flex; flex-direction:row; gap:14px; }
.social-icon{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; vertical-align:middle; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.social-icon:hover{ opacity:.7; transform:translateY(-2px); }
.social-icon img{ width:100%; height:100%; object-fit:contain; display:block; filter:brightness(0); }
.social-icon:has(img[alt="YouTube"]){ width:auto; }
.social-icon img[alt="YouTube"]{ width:auto; height:28px; }
[data-theme="dark"] .social-icon img{ filter:brightness(0) invert(1); }

.footer__bottom{ padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; color:var(--ink-muted); font-size:12px; gap:16px; flex-wrap:wrap; }

/* Theme toggle */
.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--bg-alt);
  font-size:12px; color:var(--ink-muted); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover{ border-color:var(--ink-secondary); }
.theme-toggle svg{ width:14px; height:14px; }

/* Cookie banner */
.cookie-banner{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:300; max-width:640px; width:calc(100% - 40px);
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r-md); padding:20px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.18);
  display:flex; align-items:flex-start; gap:16px;
  animation:slideUp .4s var(--ease);
}
.cookie-banner.is-hidden{ display:none; }
@keyframes slideUp{ from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.cookie-banner__text{ flex:1; font-size:13px; color:var(--ink-muted); line-height:1.5; }
.cookie-banner__text a{ color:var(--c-emerald); text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:8px; flex-shrink:0; align-items:center; }
.cookie-banner__actions .btn{ padding:8px 16px; font-size:12px; }

@media (max-width:600px){
  .cookie-banner{ flex-direction:column; gap:12px; bottom:12px; }
  .cookie-banner__actions{ width:100%; }
  .cookie-banner__actions .btn{ flex:1; justify-content:center; }
}

/* Subpage styles */
.page-header{
  padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,64px);
  background:var(--bg-alt); border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-header::before{
  content:''; position:absolute;
  top:-80px; right:-80px;
  width:400px; height:400px; border-radius:50%;
  background: conic-gradient(from 0deg,
    var(--c-emerald-soft), var(--c-amber-soft), var(--c-rose-soft),
    var(--c-cobalt-soft), var(--c-plum-soft), var(--c-emerald-soft));
  filter: blur(80px); opacity:0.4;
  pointer-events:none;
}
.page-header .wrap{ position:relative; z-index:1; }
.page-header h1{ margin:0 0 16px; }
.page-header p{ font-size:clamp(15px,1.1vw,17px); color:var(--ink-muted); max-width:56ch; margin:0; line-height:1.6; }

.page-content{ padding:clamp(40px,5vw,80px) 0; }
.page-content h2{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:clamp(20px,2vw,28px); letter-spacing:-0.02em; margin:0 0 16px; color:var(--ink); }
.page-content h3{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:clamp(16px,1.4vw,20px); margin:0 0 10px; color:var(--ink); }
.page-content p{ color:var(--ink-body); margin:0 0 16px; max-width:72ch; line-height:1.7; }
.page-content ul{ color:var(--ink-body); margin:0 0 16px; padding-left:20px; line-height:1.7; }

.privacy-section{ margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid var(--border-soft); max-width:760px; }
.privacy-section:last-child{ border-bottom:0; }

/* Products grid */
.products-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width:1000px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .products-grid{ grid-template-columns:1fr; } }

.product-card{
  display:flex; flex-direction:column; padding:24px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card-bg);
  transition:border-color .2s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.product-card:hover{ border-color:var(--c-emerald); transform:translateY(-4px); box-shadow:0 12px 32px -8px rgba(15,81,50,0.18); }
.product-card .product-icon{
  width:44px; height:44px; border-radius:14px;
  background:var(--icon-grad, linear-gradient(135deg, #667eea, #764ba2));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; position:relative; overflow:hidden;
  box-shadow:0 8px 24px -2px var(--icon-glow, rgba(102,126,234,0.45)), inset 0 1px 0 rgba(255,255,255,0.2);
}
.product-card .product-icon::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.06) 100%);
  border:1px solid rgba(255,255,255,0.18); border-radius:14px;
}
.product-card .product-icon::after{
  content:''; position:absolute; top:3px; left:5px; right:5px; height:16px;
  border-radius:12px 12px 50% 50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 100%);
}
.product-card .product-icon svg{ width:20px; height:20px; position:relative; z-index:2; stroke:white; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.2)); }
.product-card h3{ font-family:'Inter Tight',sans-serif; font-size:16px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.product-card p{ font-size:13px; color:var(--ink-muted); margin:0; line-height:1.5; }
.product-card .product-status{
  margin-top:auto; padding-top:14px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
}
.product-card .product-status.included{ color:var(--c-emerald); }
.product-card .product-status.addon{ color:var(--c-amber); }

.product-category{ margin-bottom:48px; }
.product-category h2{ margin-bottom:20px; }

/* ==========================================================
   Tools page — professional showcase cards
   ========================================================== */
.tools-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
}
@media (max-width:900px){ .tools-grid{ grid-template-columns:1fr; } }

.tool-card{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:20px;
  background:var(--card-bg); overflow:hidden;
  text-decoration:none; color:inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease);
  position:relative;
}
.tool-card:hover{
  transform: translateY(-6px);
  border-color: var(--c-emerald);
  box-shadow: 0 24px 60px -16px rgba(15,81,50,0.18), 0 8px 24px -8px rgba(0,0,0,0.08);
}

.tool-card__visual{
  position:relative; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--tool-grad-from, #0d8f88) 0%, var(--tool-grad-mid, #7c6fe8) 55%, var(--tool-grad-to, #3b2fc9) 100%);
  display:flex; align-items:center; justify-content:center;
  padding: 32px 36px; overflow:hidden;
  isolation:isolate;
}
.tool-card__visual::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 18%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(100% 80% at 90% 90%, rgba(0,0,0,0.22), transparent 55%);
}
.tool-card__pattern{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  z-index:0;
}
.tool-card__visual-inner{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  max-width:520px;
}
.tool-card__eyebrow{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom:10px;
}
.tool-card__wordmark{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size: clamp(40px, 5.2vw, 64px);
  font-weight:500; letter-spacing:-0.035em; line-height:1;
  color:#fff;
  text-shadow: 0 6px 30px rgba(0,0,0,0.18);
}
.tool-card__tagline{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(255,255,255,0.92);
  margin-top:10px; letter-spacing:-0.005em;
}
.tool-card__tagline em{ font-style:italic; font-weight:500; color:#fff; }

.tool-card__body{
  display:flex; flex-direction:column; gap:14px;
  padding: 28px 32px 32px; flex:1;
}
.tool-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.tool-card__head h3{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:22px; font-weight:600; letter-spacing:-0.02em;
  margin:0; color:var(--ink);
}
.tool-card__price{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
  padding:5px 11px; border-radius:999px;
  background: var(--c-emerald-soft); color: var(--c-emerald);
  border:1px solid transparent;
}
.tool-card__price--free{ background: var(--c-emerald-soft); color: var(--c-emerald); }
.tool-card__body > p{
  font-size:14px; color:var(--ink-muted); margin:0; line-height:1.65;
}
.tool-card__features{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.tool-card__features li{
  font-size:12px; padding:5px 11px; border-radius:999px;
  background:var(--bg-alt); color:var(--ink-body);
  border:1px solid var(--border-soft);
}
.tool-card__cta{
  margin-top:auto; padding-top:6px;
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:14px; font-weight:600; color:var(--c-emerald);
  display:inline-flex; align-items:center; gap:6px;
}
.tool-card__cta .arr{ transition: transform .25s var(--ease); display:inline-block; }
.tool-card:hover .tool-card__cta .arr{ transform: translateX(4px); }

/* Coming-soon teaser variant */
.tool-card--soon{
  cursor:default;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--card-bg) 100%);
  border-style: dashed;
}
.tool-card--soon:hover{ transform:none; border-color: var(--ink-secondary); box-shadow:none; }
.tool-card__soon{
  padding: 48px 36px; display:flex; flex-direction:column; gap:14px;
  align-items:flex-start; height:100%;
}
.tool-card__soon-label{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-muted);
}
.tool-card__soon h3{
  font-family:'Inter Tight','Inter',sans-serif;
  font-size: clamp(28px, 2.4vw, 36px); font-weight:500; letter-spacing:-0.02em;
  margin:0; color:var(--ink);
}
.tool-card__soon p{
  font-size:14px; color:var(--ink-muted); margin:0; max-width:48ch; line-height:1.65;
}
.tool-card__soon-cta{
  margin-top:auto;
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:14px; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
  transition: color .2s, border-color .2s;
}
.tool-card__soon-cta:hover{ color:var(--c-emerald); border-color:var(--c-emerald); }
.tool-card__soon-cta .arr{ transition: transform .25s var(--ease); display:inline-block; }
.tool-card__soon-cta:hover .arr{ transform: translateX(4px); }

/* Active nav state */
.nav__links a.is-active{ color: var(--ink); font-weight:500; }

/* Bundle cards */
.bundles-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
@media (max-width:900px){ .bundles-grid{ grid-template-columns:1fr; } }

.bundle-card{
  display:flex; flex-direction:column; padding:32px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card-bg); position:relative; overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.bundle-card:hover{ border-color:var(--c-emerald); transform:translateY(-4px); box-shadow:0 16px 40px -10px rgba(15,81,50,0.2); }
.bundle-card .bundle-badge{
  position:absolute; top:16px; right:16px;
  padding:4px 12px; border-radius:var(--r-pill);
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
  background:var(--c-emerald); color:#fff;
}
.bundle-card h3{ font-family:'Inter Tight',sans-serif; font-size:22px; font-weight:600; margin:0 0 4px; color:var(--ink); letter-spacing:-0.02em; }
.bundle-card .bundle-desc{ font-size:14px; color:var(--ink-muted); margin:0 0 12px; }
.bundle-card .bundle-price{
  font-family:'Inter Tight',sans-serif; font-size:32px; font-weight:500;
  color:var(--ink); letter-spacing:-0.03em; margin-bottom:20px;
}
.bundle-card .bundle-price span{ font-size:14px; color:var(--ink-muted); font-weight:400; }
.bundle-card .bundle-modules{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.bundle-card .bundle-modules span{
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:500;
  background:var(--bg-alt); border:1px solid var(--border);
  color:var(--ink-muted);
}
.bundle-card .btn{ width:100%; justify-content:center; margin-top:auto; }

/* Addon grid */
.addons-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:900px){ .addons-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){ .addons-grid{ grid-template-columns:1fr; } }
.addon-card{
  padding:20px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card-bg); text-align:center;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.addon-card:hover{ border-color:var(--c-amber); transform:translateY(-2px); }
.addon-card h4{ font-family:'Inter Tight',sans-serif; font-size:14px; font-weight:600; margin:0 0 4px; color:var(--ink); }
.addon-card .addon-price{ font-size:18px; font-weight:600; color:var(--c-amber); margin:0; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reveal-words .word{ display:inline-block; opacity:0; transform:translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: var(--word-delay, 0ms); }
.reveal-words.is-in .word{ opacity:1; transform:translateY(0); }

/* Mobile responsive extras */
@media (max-width:480px){
  .email-capture{ flex-direction:column; width:100%; }
  .email-capture input{ width:100%; min-width:0; }
  .email-capture .btn{ width:100%; justify-content:center; }
  .hero__proof{ flex-wrap:wrap; }
  .kpi-row{ grid-template-columns:1fr 1fr; }
  .browser__body{ grid-template-columns:1fr; }
  .db-side{ display:none; }
  .float-card.fc1{ right:0; top:-16px; width:160px; }
  .float-card.fc2{ left:0; bottom:-20px; width:180px; }
  .hero__right{ min-height:320px; }
  .contact-card{ padding:24px; }
  .stats{ padding:40px 0; }
  .footer__bottom{ flex-direction:column; text-align:center; }
}

@media (max-width:360px){
  .hero__badge{ font-size:11px; padding:6px 10px; }
  .btn{ padding:11px 18px; font-size:13px; }
  .btn--sm{ padding:8px 14px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .reveal, .reveal-words .word{ opacity:1; transform:none; }
  .logo-marquee__track, .cube, .shape, .flow__connector .pulse, .btn--primary::before, .hero::before, .final::before{ animation:none; }
  .chart-path{ stroke-dashoffset:0 !important; animation:none !important; }
  .diorama{ transform:none; }
}

/* Dark mode wordmark */
[data-theme="dark"] .nav__wordmark,
[data-theme="dark"] .footer__wordmark,
[data-theme="dark"] .mobile-drawer__header img{
  filter:brightness(0) invert(1);
}

/* Phone field with country picker */
.phone-field{ position:relative; }
.phone-field__label{
  display:block; font-size:10px; color:var(--c-emerald); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;
  font-family:'Inter',sans-serif;
}
.phone-field__row{
  display:flex; gap:0; border:1px solid var(--border); border-radius:10px;
  overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  background:var(--card-bg);
}
.phone-field__row:focus-within{
  border-color:var(--c-emerald); box-shadow:0 0 0 4px var(--c-emerald-soft);
}
.phone-field__row input{
  flex:1; border:0; padding:14px 14px 14px 0; outline:none;
  font-size:14px; background:transparent; color:var(--ink);
  min-width:0;
}
.phone-field__row input::placeholder{ color:var(--ink-secondary); }
.phone-field.has-error .phone-field__row{ border-color:#d32f2f; }
.phone-field.has-error .phone-field__row:focus-within{ box-shadow:0 0 0 4px rgba(211,47,47,0.12); }

.country-picker{ position:relative; flex-shrink:0; }
.country-picker__trigger{
  display:flex; align-items:center; gap:6px;
  padding:14px 10px 14px 14px; cursor:pointer;
  border-right:1px solid var(--border); background:var(--bg-alt);
  font-size:13px; color:var(--ink); font-weight:500;
  transition:background .2s var(--ease);
  white-space:nowrap;
}
.country-picker__trigger:hover{ background:var(--border-soft); }
.country-picker__flag{ font-size:18px; line-height:1; }
.country-picker__code{ font-size:13px; font-weight:600; color:var(--ink-body); }

/* Country modal overlay */
.country-modal{
  position:fixed; inset:0; z-index:500;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.country-modal.is-open{ display:flex; }
.country-modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.country-modal__panel{
  position:relative; z-index:1;
  width:100%; max-width:440px; max-height:min(580px, 85vh);
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:0 24px 80px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; overflow:hidden;
  animation:modalIn .3s var(--ease);
}
@keyframes modalIn{ from{opacity:0;transform:translateY(16px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.country-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 0; flex-shrink:0;
}
.country-modal__header h3{
  font-family:'Inter Tight',sans-serif; font-size:18px; font-weight:600;
  letter-spacing:-0.02em; margin:0; color:var(--ink);
}
.country-modal__close{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.country-modal__close:hover{ background:var(--bg-alt); border-color:var(--ink-secondary); }
.country-modal__close svg{ width:16px; height:16px; }
.country-modal__search{
  padding:16px 24px; flex-shrink:0;
}
.country-modal__search input{
  width:100%; padding:12px 16px; border:1px solid var(--border);
  border-radius:10px; font-size:14px; outline:none;
  background:var(--bg-alt); color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.country-modal__search input:focus{ border-color:var(--c-emerald); box-shadow:0 0 0 4px var(--c-emerald-soft); }
.country-modal__search input::placeholder{ color:var(--ink-secondary); }
.country-modal__list{
  overflow-y:auto; flex:1; padding:0 16px 16px;
}
.country-modal__item{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:10px; cursor:pointer;
  font-size:14px; color:var(--ink-body);
  transition:background .15s var(--ease);
}
.country-modal__item:hover{ background:var(--bg-alt); }
.country-modal__item.is-selected{ background:var(--c-emerald-soft); color:var(--c-emerald); font-weight:600; }
.country-modal__item-flag{ font-size:22px; line-height:1; flex-shrink:0; }
.country-modal__item-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-modal__item-code{ font-size:13px; color:var(--ink-muted); font-weight:600; flex-shrink:0; }
.country-modal__item.is-selected .country-modal__item-code{ color:var(--c-emerald); }

/* Business autocomplete */
.autocomplete-field{ position:relative; }
.autocomplete-field__label{
  display:block; font-size:10px; color:var(--c-emerald); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;
  font-family:'Inter',sans-serif;
}
.autocomplete-field input{
  width:100%; padding:14px; border:1px solid var(--border);
  border-radius:10px; font-size:14px; outline:none;
  background:var(--card-bg); color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.autocomplete-field input::placeholder{ color:var(--ink-secondary); }
.autocomplete-field input:focus{
  border-color:var(--c-emerald); box-shadow:0 0 0 4px var(--c-emerald-soft);
}
.autocomplete-field.has-error input{ border-color:#d32f2f; }
.autocomplete-field.has-error input:focus{ box-shadow:0 0 0 4px rgba(211,47,47,0.12); }
.autocomplete-field__dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.12);
  max-height:200px; overflow-y:auto; z-index:20;
  display:none; padding:4px;
}
.autocomplete-field__dropdown.is-open{ display:block; }
.autocomplete-field__option{
  padding:10px 12px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--ink-body);
  transition:background .15s var(--ease);
}
.autocomplete-field__option:hover{ background:var(--bg-alt); }
.autocomplete-field__option strong{ color:var(--c-emerald); font-weight:600; }

/* Multi-select dropdown */
.multi-select{
  position:relative;
}
.multi-select__trigger{
  width:100%; padding:14px 14px 10px; min-height:52px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; cursor:pointer;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;
}
.multi-select__trigger::after{
  content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--ink-muted); transition:transform .2s var(--ease);
}
.multi-select.is-open .multi-select__trigger::after{ transform:translateY(-50%) rotate(180deg); }
.multi-select__trigger:hover{ border-color:var(--ink-secondary); }
.multi-select.is-open .multi-select__trigger{ border-color:var(--c-emerald); box-shadow:0 0 0 4px var(--c-emerald-soft); }
.multi-select__placeholder{
  font-size:14px; color:var(--ink-muted); pointer-events:none;
}
.multi-select__tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600;
  background:var(--c-emerald-soft); color:var(--c-emerald);
}
.multi-select__tag button{
  display:flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  font-size:12px; line-height:1; color:var(--c-emerald);
  transition:background .15s var(--ease);
}
.multi-select__tag button:hover{ background:rgba(13,143,136,0.2); }
.multi-select__dropdown{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.12);
  max-height:220px; overflow-y:auto; z-index:10;
  display:none; padding:6px;
}
.multi-select.is-open .multi-select__dropdown{ display:block; }
.multi-select__option{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--ink-body); cursor:pointer;
  transition:background .15s var(--ease);
}
.multi-select__option:hover{ background:var(--bg-alt); }
.multi-select__option.is-selected{ background:var(--c-emerald-soft); color:var(--c-emerald); font-weight:600; }
.multi-select__check{
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.multi-select__option.is-selected .multi-select__check{
  background:var(--c-emerald); border-color:var(--c-emerald);
}
.multi-select__check svg{ width:12px; height:12px; color:#fff; opacity:0; }
.multi-select__option.is-selected .multi-select__check svg{ opacity:1; }
.multi-select__label{ font-size:10px; color:var(--c-emerald); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; position:absolute; top:4px; left:14px; }

/* Form validation */
.field.has-error input,
.multi-select.has-error .multi-select__trigger{ border-color:#d32f2f; }
.field.has-error input:focus{ box-shadow:0 0 0 4px rgba(211,47,47,0.12); }
.field__error{
  font-size:11px; color:#d32f2f; margin-top:4px; display:none;
}
.field.has-error .field__error{ display:block; }
.multi-select.has-error .field__error{ display:block; }

/* Success toast */
.toast{
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(80px);
  z-index:400; padding:16px 28px;
  background:var(--c-emerald); color:#fff;
  border-radius:var(--r-pill); font-size:14px; font-weight:600;
  box-shadow:0 12px 32px rgba(13,143,136,0.35);
  display:flex; align-items:center; gap:10px;
  opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
  pointer-events:none;
}
.toast.is-visible{
  transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto;
}
.toast svg{ width:20px; height:20px; flex-shrink:0; }