.is-hidden{ display:none !important; }

/* ---------- [BRAND-FONTS] 2026-10-17 (Rati): brand fonts on every page, self-hosted ----------
   FiraGO (headings and text, Georgian and Latin in one family) and Fira Code (code-like text). SIL Open Font License.
   Files in /fonts/, trimmed to Latin + Georgian (+ lari, arrows, quotes, dashes) with fonttools; masters in the Brand Kit. */
@font-face{ font-family:"FiraGO"; font-weight:400; font-style:normal; font-display:swap; src:url(/fonts/firago-400.woff2) format("woff2"); }
@font-face{ font-family:"FiraGO"; font-weight:500; font-style:normal; font-display:swap; src:url(/fonts/firago-500.woff2) format("woff2"); }
@font-face{ font-family:"FiraGO"; font-weight:600; font-style:normal; font-display:swap; src:url(/fonts/firago-600.woff2) format("woff2"); }
@font-face{ font-family:"FiraGO"; font-weight:700; font-style:normal; font-display:swap; src:url(/fonts/firago-700.woff2) format("woff2"); }
@font-face{ font-family:"FiraGO"; font-weight:800; font-style:normal; font-display:swap; src:url(/fonts/firago-800.woff2) format("woff2"); }
@font-face{ font-family:"FiraGO"; font-weight:900; font-style:normal; font-display:swap; src:url(/fonts/firago-900.woff2) format("woff2"); }
@font-face{ font-family:"FiraGO"; font-weight:400; font-style:italic; font-display:swap; src:url(/fonts/firago-400-italic.woff2) format("woff2"); }
@font-face{ font-family:"Fira Code"; font-weight:400; font-style:normal; font-display:swap; src:url(/fonts/firacode-400.woff2) format("woff2"); }
@font-face{ font-family:"Fira Code"; font-weight:500; font-style:normal; font-display:swap; src:url(/fonts/firacode-500.woff2) format("woff2"); }
@font-face{ font-family:"Fira Code"; font-weight:600; font-style:normal; font-display:swap; src:url(/fonts/firacode-600.woff2) format("woff2"); }

/* ---------- Design tokens ---------- */
:root{
  --bg:#000000;
  --bg-panel:#0b0e14;
  --bg-panel-2:#0f131a;
  --text:#f0f0f0;
  --text-dim:#a1a4a5;
  --text-faint:#888888;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --accent-blue:#00a3ff;
  --accent-purple:#9281f7;
  --accent-green:#6effae;
  --accent-yellow:#ffde26;
  --accent-red:#ff7a72;
  --brand-deep:#27005D;
  --brand-violet:#9400FF;
  --brand-violet-2:#AB38FF;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --font-display:"FiraGO", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"FiraGO", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code:"Fira Code", "FiraGO", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

/* Georgian: FiraGO draws Georgian too, so both languages use the same fonts (2026-10-17) */
html[lang="ka"]{
  --font-display:"FiraGO", system-ui, sans-serif;
  --font-body:"FiraGO", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:clip;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* Anchor-link scroll targets (e.g. #top, #consultation) need to clear the
   sticky header — without this the header overlaps the top of the target. */
[id]{ scroll-margin-top: 90px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  position:relative;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--text);
}

p{ margin:0; color:var(--text-dim); }

a{ color:inherit; text-decoration:none; }

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

.bg-glow{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(750px 550px at 15% 8%, rgba(148,0,255,.16), transparent 62%),
    radial-gradient(650px 480px at 85% 5%, rgba(171,56,255,.14), transparent 62%),
    radial-gradient(900px 650px at 50% 100%, rgba(39,0,93,.20), transparent 70%);
  pointer-events:none;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease, backdrop-filter .2s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--border);
  background:rgba(16,16,22,.72);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:18px;
  font-family:var(--font-body);
  color:var(--text);
  flex-shrink:0;
}
.logo-mark{ display:block; width:auto; }
.logo-mark-header{ height:28px; }
.logo-mark-footer{ height:22px; }

.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
  justify-content:flex-end;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:4px;
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:14px;
  font-family:inherit;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:color .15s ease, background .15s ease, transform .1s ease-out;
}
.nav-link:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-link:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){ .nav-link:active{ transform:none; } }
.chev{ opacity:.6; }

.nav-item{ position:relative; }
.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  background:rgba(18,16,26,.97);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px;
  width:260px;
  opacity:0;
  visibility:hidden;
  transform-origin:top center;
  transform:translateX(-50%) translateY(4px) scale(.96);
  transition:opacity .16s ease, transform .2s cubic-bezier(.16,1,.3,1), visibility .16s;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .dropdown{ transition:opacity .16s ease, visibility .16s; transform:translateX(-50%) !important; }
}
.dropdown-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  transition:background .12s ease;
}
.dropdown-item:hover{ background:rgba(255,255,255,.06); }
.dropdown-item:active{ background:rgba(255,255,255,.1); }
.dropdown-item strong{ font-size:13px; font-weight:500; color:var(--text); }
.dropdown-item span{ font-size:12px; color:var(--text-faint); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.nav-cta{ display:inline-flex; align-items:center; gap:8px; }
.nav-cta-icon{ display:none; flex-shrink:0; }

.lang-switch{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:2px;
  margin-right:2px;
}
.lang-btn{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text-faint);
  background:none;
  border:none;
  padding:6px 11px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lang-btn:hover{ color:var(--text); }
.lang-btn.active{ background:#fff; color:#000; }

.link-btn{ font-size:14px; color:var(--text-dim); padding:8px 10px; }
.link-btn:hover{ color:var(--text); }
.link-btn.small{ font-size:13px; color:var(--text-faint); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease, transform .1s ease-out;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:#fff; color:#000; }
.btn-primary:hover{ opacity:.85; }
.btn-ghost{ background:rgba(255,255,255,.04); border-color:var(--border-strong); color:var(--text); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn-sm{ padding:8px 14px; font-size:13px; }
@media (prefers-reduced-motion: reduce){ .btn:active{ transform:none; } }

.menu-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(380px, 460px) 1fr;
  align-items:center;
  gap:40px;
  padding:37px 32px 60px;
  min-height:560px;
}
.hero.container{ max-width:1320px; }
.hero-copy{ transform:translateX(13%); }
.hero::before{
  content:"";
  position:absolute;
  top:-15%;
  right:-10%;
  width:75%;
  height:145%;
  background:radial-gradient(closest-side, rgba(154,90,220,.26), rgba(39,0,93,.30) 45%, transparent 75%);
  pointer-events:none;
  z-index:-1;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--text-dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-strong);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:28px;
}
.badge:hover{ color:var(--text); background:rgba(255,255,255,.07); }
.badge span{ color:#C9A6FF; }

.hero h1{
  font-size:79px;
  letter-spacing:-0.025em;
  margin-bottom:24px;
}

.hero-sub{
  font-size:18px;
  max-width:480px;
  margin-bottom:36px;
  color:var(--text-dim);
}

.hero-actions{ display:flex; align-items:center; gap:14px; }
.hero-actions-center{ justify-content:center; }
.hero-actions .btn-primary{
  background:linear-gradient(135deg, #2c2c32 0%, #180038 100%);
  color:#fff;
  font-size:14.7px;
  border:1px solid #4a3d63;
}
.hero-actions .btn-primary:hover{ opacity:.9; border-color:#5e4d7d; }
.hero-actions .btn-ghost{
  background:none;
  border-color:transparent;
  color:#b8b8c2;
}
.hero-actions .btn-ghost:hover{ background:none; color:#fff; }

.logo-strip{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:1180px;
  margin:calc(15vh + 20px) auto 0;
  padding:48px 24px 96px;
}
.logo-strip::before{
  content:'';
  position:absolute;
  top:-1px;
  left:50%;
  transform:translateX(-50%);
  width:240px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--brand-violet-2), transparent);
}
.trust-line{
  color:var(--text-faint);
  font-size:15px;
  max-width:480px;
  margin:0 auto 40px;
}
.logo-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:center;
  width:85%;
  gap:8px 16px;
  opacity:.55;
}
@media (min-width:640px){ .logo-row{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px){ .logo-row{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
.logo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:96px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  white-space:nowrap;
}

.logo-row.logo-row-clients{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  width:auto;
  gap:32px 56px;
  opacity:1;
}
.client-logo{
  height:64px;
  width:auto;
  object-fit:contain;
  filter:brightness(0.81);
}
.logo-strip-link.link-arrow{
  margin-top:32px;
  color:var(--text-faint);
}
@media (max-width:640px){
  /* flex-wrap stays "wrap" (the base rule above) as a safety net for any
     unusually narrow device, but the height below is sized so both logos
     fit on one row within the padded content area at normal phone widths
     (~375px+) without needing to wrap or clip past the edges. */
  .logo-row.logo-row-clients{ gap:16px 24px; }
  .client-logo{ height:34px; }
}
@media (max-width:360px){
  .logo-row.logo-row-clients{ gap:12px 16px; }
  .client-logo{ height:28px; }
}

/* Hero globe visual */
.hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  overflow:visible;
}
.globe-canvas{
  display:block;
  width:min(800px, 90vw);
  height:min(800px, 90vw);
  transform:translateX(5%);
  filter:drop-shadow(0 0 80px rgba(39,0,93,.35));
}

.cursor-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}
.cursor-demo-canvas{
  width:min(360px, 70vw);
  height:min(360px, 70vw);
  filter:drop-shadow(0 0 50px rgba(39,0,93,.30));
}

/* ---------- Split sections ---------- */
.split-section{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:64px;
  align-items:center;
  padding:70px 32px;
}
.split-section.reverse{ grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); }
.split-section.reverse .split-copy{ order:2; }
.split-section.reverse .split-visual{ order:1; }
.split-copy, .split-visual{ min-width:0; width:100%; }

.split-copy h2{ font-size:40px; margin-bottom:18px; }
.split-copy p{ font-size:16px; max-width:420px; }
.design-actions{ margin-top:32px; }


.code-actions{ display:flex; gap:8px; margin-top:14px; }

/* Activity panel */
.activity-panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:8px;
}
.activity-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px;
  font-size:14px;
  font-weight:600;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
}
.activity-meta{ margin-left:auto; font-weight:400; font-size:12px; color:var(--text-faint); }
.dot{ width:8px; height:8px; border-radius:50%; }
.dot-green{ background:var(--accent-green); box-shadow:0 0 8px var(--accent-green); }

.activity-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
}
.activity-row:hover{ background:rgba(255,255,255,.03); }
.avatar{
  width:30px; height:30px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  flex-shrink:0;
  color:#000;
}
.av1{ background:var(--accent-green); }
.av2{ background:var(--accent-blue); color:#fff; }
.av3{ background:var(--accent-purple); color:#fff; }
.av4{ background:var(--accent-yellow); }
.av5{ background:#fff; }
.activity-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.activity-text strong{ font-size:13.5px; }
.activity-text span{ font-size:12.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-text em{ font-style:normal; color:var(--text-dim); }
.activity-tag{
  font-size:11px;
  color:var(--text-faint);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  flex-shrink:0;
}

/* Build-timeline and process sections sit back to back — close the gap
   between them without touching padding on any other split-section. */
#work{ padding-bottom:0; }
#work + .split-section.reverse{ padding-top:0; }

/* These two sections need a visibly bigger particle visual than the default
   0.85/1.15 split-section column allows, so give the pair a wider container
   and shift some of it to the visual column — 1:1.4 keeps the heading on
   its intended two lines instead of wrapping to four, while the visual
   column is still well past the original ~605px baseline. */
#work.container, #work + .split-section.reverse.container{ max-width:1600px; }
#work{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
#work + .split-section.reverse{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }

/* #work's copy column sits flush against the container's left edge and its
   heading/paragraph read as cramped compared to the reverse section's wider
   text column — a bit of left padding and extra heading gap fixes both
   without touching the reverse section (desktop/tablet only; reset below
   960px where everything stacks and centers). */
#work .split-copy{ padding-left:28px; }
#work .split-copy h2{ margin-bottom:24px; }

/* The canvas itself stays big, but a big square canvas centered in the grid
   row makes the ROW itself that tall (CSS Grid sizes a track to its item's
   box, not the shorter text next to it) — that's what was reading as a huge
   empty gap between the two sections. Capping the box's own height and
   leaving default overflow:visible lets the canvas paint past it without
   dragging the row (and the next section) down with it. */
#work .particle-visual, #work + .split-section.reverse .particle-visual{ height:460px; }

/* Particle shapes: same rejection-sampling particle technique as the hero
   sphere and design-pitch cursor visual, wordless — the heading/paragraph
   next to it carries the meaning, the shape is purely atmospheric. */
/* align-items:center (not the flex default of stretch) so a shorter
   .particle-visual box (see the #work-scoped height override above) can't
   stretch the canvas's cross-axis and fight its aspect-ratio. */
.particle-visual{ display:flex; justify-content:center; align-items:center; }
.particle-canvas{
  width:min(840px, 90vw);
  max-width:100%;
  height:auto;
  aspect-ratio:1/1;
  filter:drop-shadow(0 0 60px rgba(39,0,93,.35));
}
/* A 60px blur that reads as a soft glow on an 840px desktop canvas swallows
   the zigzag/notch detail on a ~300px mobile canvas, since the blur radius
   doesn't scale down with it — reduce it so the shape stays legible. */
@media (max-width:640px){
  .particle-canvas{ filter:drop-shadow(0 0 22px rgba(39,0,93,.35)); }
}

.activity-panel.timeline .activity-row{ position:relative; }
.activity-panel.timeline .avatar{ position:relative; z-index:1; }
.activity-panel.timeline .activity-row:not(:last-child) .avatar::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:20px;
  background:var(--border-strong);
}

/* Feature rows (staging / integrations) */
.feature-row{
  display:flex;
  gap:20px;
  padding:36px 32px;
  max-width:640px;
  margin:0 auto;
}
.feature-row.reverse-text{ flex-direction:row; }
.feature-icon{
  width:44px; height:44px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text);
  flex-shrink:0;
}
.feature-text h3{ font-size:22px; margin-bottom:8px; font-family:var(--font-body); font-weight:600; }
.feature-text p{ font-size:15px; margin-bottom:12px; }
.link-arrow{ font-size:14px; color:var(--text); font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.form-note.form-note-cta{ margin-top:24px; text-align:center; }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.project-hero-logo{ height:56px; width:auto; }
.link-arrow span{ display:inline-block; transition:transform .15s ease; }
.link-arrow:hover span{ transform:translateX(3px); }

/* Editor panel */
.editor-panel{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
}
.editor-tabs{ display:flex; gap:6px; margin-bottom:16px; }
.editor-tab{
  font-size:12px; padding:5px 12px; border-radius:6px;
  background:rgba(255,255,255,.06); color:var(--text-dim);
}
.editor-tab.active{ background:#fff; color:#000; }
.editor-title{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border);
}
.editor-title strong{ display:block; font-size:15px; margin-bottom:4px; font-family:var(--font-body); }
.editor-age{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-faint); }
.editor-actions{ display:flex; gap:8px; }
.mini-btn{
  font-family:inherit; font-size:12px; padding:7px 14px; border-radius:6px;
  border:1px solid var(--border-strong); background:transparent; color:var(--text-dim); cursor:pointer;
}
.mini-btn-solid{
  background:linear-gradient(135deg, #9400FF, #AB38FF);
  color:#fff;
  border-color:transparent;
  font-weight:600;
}
.editor-field{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }
.editor-field:last-child{ border-bottom:none; }
.editor-field-label{ display:flex; align-items:center; gap:12px; }
.editor-field label{ font-size:13.5px; color:var(--text); font-weight:500; }
.editor-field-icon{
  width:26px; height:26px;
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.editor-field-icon.icon-violet{ background:rgba(148,0,255,.14); color:var(--brand-violet-2); }
.editor-field-icon.icon-purple{ background:rgba(146,129,247,.14); color:var(--accent-purple); }
.editor-field-icon.icon-green{ background:rgba(110,255,174,.14); color:var(--accent-green); }
.editor-field-icon.icon-yellow{ background:rgba(255,222,38,.14); color:var(--accent-yellow); }
.field-value{ font-size:13.5px; color:var(--text); }
.status-draft{ color:var(--accent-yellow); }
.editor-input-value{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-strong);
  border-radius:6px;
  padding:7px 12px;
}
.editor-logo-value{ display:flex; align-items:center; gap:10px; }

/* Browser mockup: a realistic "screenshot in a browser" frame — real product
   UI rather than an abstract shape, the way competitor agency sites show
   actual dashboards instead of icons. Safari-style chrome (centered pill
   URL bar) rather than Chrome's left-aligned bar. */
.browser-mockup{
  width:100%;
  background:var(--bg-panel);
  border:1px solid var(--border-strong);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.browser-chrome{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:linear-gradient(180deg,#1c1c22,#141418);
  border-bottom:1px solid var(--border);
}
.chrome-dots{ display:flex; gap:7px; }
.chrome-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; opacity:.9; }
.chrome-dot-red{ background:#ff5f57; }
.chrome-dot-yellow{ background:#febc2e; }
.chrome-dot-green{ background:#28c840; }
.chrome-url{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:200px;
  padding:6px 16px;
  border-radius:7px;
  background:rgba(255,255,255,.06);
  color:var(--text-faint);
  font-size:12.5px;
}

/* Portal screen: sidebar + the content-editing panel (reuses .editor-* rules) */
.portal-screen{ display:flex; align-items:stretch; }
.portal-sidebar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:56px;
  flex-shrink:0;
  padding:20px 0;
  background:rgba(255,255,255,.02);
  border-right:1px solid var(--border);
}
.portal-side-icon{
  width:34px; height:34px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint);
}
.portal-side-icon.active{ background:rgba(148,0,255,.16); color:var(--brand-violet-2); }
.portal-main{ flex:1; min-width:0; padding:20px 24px; }
.portal-toolbar{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.portal-toolbar-icons{ display:flex; gap:8px; margin-left:auto; }
.portal-preview{ border-radius:8px; overflow:hidden; }
.portal-preview svg{ display:block; width:100%; height:auto; }

/* Analytics screen: campaign stat chips + a simple trend chart */
.browser-mockup-wide{ max-width:900px; margin:0 auto; }
.analytics-screen{ padding:22px 26px 26px; }
.analytics-stats{ display:flex; gap:14px; margin:18px 0 22px; }
.stat-chip{
  flex:1;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat-chip-value{ font-family:var(--font-display); font-size:24px; color:var(--text); font-variant-numeric:tabular-nums; }
.stat-chip-label{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.analytics-chart{ width:100%; height:140px; display:block; }

/* Cards section (go beyond design) */
.cards-section{ padding:80px 32px; text-align:center; }
.cards-header{ max-width:560px; margin:0 auto 48px; }
.cards-header h2{ font-size:40px; margin-bottom:16px; }
.cards-header p{ font-size:16px; }

.two-cards{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  text-align:left;
}
.card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
}
.card h4{ font-family:var(--font-body); font-weight:600; font-size:18px; margin-bottom:10px; }
.card p{ font-size:14.5px; margin-bottom:14px; }

.work-showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  text-align:left;
}
.work-showcase.work-showcase-single{
  grid-template-columns:minmax(0, 420px);
  justify-content:center;
}
.work-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.work-thumb{
  width:100%;
  aspect-ratio:16/10;
  background:linear-gradient(135deg, var(--brand-deep), var(--brand-violet-2));
}
.work-thumb.work-thumb-photo{
  overflow:hidden;
  background:var(--bg-panel);
}
.work-thumb.work-thumb-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
}
.work-body{ padding:24px; }
.work-tag{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-purple); margin-bottom:8px; }
.work-body h4{ font-family:var(--font-body); font-weight:600; font-size:18px; margin-bottom:10px; }
.work-body p{ font-size:14.5px; color:var(--text-dim); }

@media (max-width:720px){
  .work-showcase{ grid-template-columns:minmax(0,1fr); }
}

a.work-card{ display:block; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
a.work-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); }

.cards-footer{ text-align:center; margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:14px; }

.project-hero-thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--brand-deep), var(--brand-violet-2));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.project-hero-thumb img{ height:64px; width:auto; }

.project-hero-thumb.project-hero-photo{
  padding:0;
  overflow:hidden;
  background:var(--bg-panel);
}
.project-hero-thumb.project-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

.project-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width:720px){
  .project-gallery-grid{ grid-template-columns:minmax(0,1fr); }
}
.project-gallery-item{
  aspect-ratio:16/10;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
}
.project-gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
}

.project-stats-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:56px;
}
.project-stat{
  flex:1;
  min-width:160px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  text-align:center;
}
.project-stat-label{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:10px;
}
.project-stat-value{
  display:block;
  font-family:var(--font-display);
  font-size:24px;
  color:var(--text);
}
@media (max-width:640px){
  .project-stats-row{ flex-direction:column; }
}

.project-story{
  max-width:720px;
  margin:0 auto;
  text-align:left;
}
.project-story-step{
  display:flex;
  gap:20px;
  position:relative;
  padding-bottom:36px;
}
.project-story-step:last-child{ padding-bottom:0; }
.project-story-step:not(:last-child)::before{
  content:'';
  position:absolute;
  left:19px;
  top:44px;
  bottom:0;
  width:1px;
  background:var(--border);
}
.project-story-num{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  background:var(--bg-panel);
  position:relative;
  z-index:1;
}
.project-story-body{ padding-top:6px; }
.project-story-body h4{
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  margin-bottom:8px;
  color:var(--text);
}
.project-story-body p{ margin:0; color:var(--text-dim); font-size:14.5px; line-height:1.6; }

/* Grid section (9 features) */
.grid-section{ padding:90px 32px; text-align:center; }
.grid-section .cards-header{ margin-bottom:56px; }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-align:left;
}
.glow-card{
  position:relative;
  background:#050505;
  padding:32px 28px;
  overflow:hidden;
}
.glow-card::before{
  content:"";
  position:absolute;
  top:-60px; left:-40px;
  width:180px; height:180px;
  border-radius:50%;
  filter:blur(50px);
  opacity:.18;
  pointer-events:none;
}
.glow-blue::before{ background:var(--accent-blue); }
.glow-purple::before{ background:var(--accent-purple); }
.glow-green::before{ background:var(--accent-green); }
.glow-yellow::before{ background:var(--accent-yellow); }
.glow-red::before{ background:var(--accent-red); }
.glow-icon{
  width:44px; height:44px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  position:relative;
}
.glow-icon svg{ width:22px; height:22px; display:block; }
.glow-blue .glow-icon{ background:rgba(0,163,255,.14); color:var(--accent-blue); }
.glow-purple .glow-icon{ background:rgba(146,129,247,.14); color:var(--accent-purple); }
.glow-green .glow-icon{ background:rgba(110,255,174,.14); color:var(--accent-green); }
.glow-yellow .glow-icon{ background:rgba(255,222,38,.14); color:var(--accent-yellow); }
.glow-red .glow-icon{ background:rgba(255,122,114,.14); color:var(--accent-red); }
.glow-card h4{ font-family:var(--font-body); font-weight:600; font-size:16px; margin-bottom:8px; position:relative; }
.glow-card p{ font-size:13.5px; position:relative; }

/* Control section */
.control-section{ text-align:center; padding:90px 32px; max-width:640px; margin:0 auto; }
.control-section h2{ font-size:40px; margin-bottom:16px; }
.control-section p{ font-size:16px; margin-bottom:28px; }
.pill-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pill{
  font-size:13px; color:var(--text-dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-strong);
  padding:8px 16px; border-radius:999px;
}

/* Testimonials marquee */
.testimonials-section{ padding:90px 0; }
.testimonials-section .cards-header{ text-align:center; }
.testimonials-section .cards-header h2{ font-size:40px; margin-bottom:16px; }

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  margin-top:50px;
}
.t-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
}
.t-card p{ font-size:14px; color:var(--text-dim); margin-bottom:18px; }
.t-card .who{ display:flex; flex-direction:column; }
.t-card .who strong{ font-size:13.5px; color:var(--text); }
.t-card .who span{ font-size:12.5px; color:var(--text-faint); }

/* Final CTA */
.final-cta{
  text-align:center;
  padding:130px 32px;
}
.final-cta h2{ font-size:48px; margin-bottom:32px; }

.panel-wrap{ max-width:560px; margin:0 auto; padding:0 32px 90px; }

/* Subpage intro (no hero visual) */
.page-hero{
  text-align:center;
  max-width:720px;
  margin:0 auto;
  padding:64px 32px 8px;
}
.page-hero .badge{ margin-bottom:24px; }
.page-hero h1{ font-size:52px; margin-bottom:20px; }
.page-hero p{ font-size:18px; color:var(--text-dim); }

/* FAQ */
.faq-section{ padding:90px 32px; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  padding:4px 20px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--text-faint); flex-shrink:0; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ padding:0 0 18px; color:var(--text-dim); font-size:14.5px; line-height:1.65; max-width:640px; }

/* Consultation form */
.consult-section{ padding:90px 32px 130px; }
.consult-wrap{ max-width:640px; margin:0 auto; text-align:center; }
.consult-wrap h2{ font-size:40px; margin-bottom:16px; }
.consult-wrap > p{ font-size:16px; margin-bottom:40px; }
.consult-form{
  text-align:left;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
.consult-form .form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:13px; color:var(--text-dim); }
.form-field input, .form-field select, .form-field textarea{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-strong);
  border-radius:8px;
  padding:11px 12px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
}
.form-field textarea{ resize:vertical; min-height:100px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none;
  border-color:var(--brand-violet-2);
  box-shadow:0 0 0 3px rgba(171,56,255,.35);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible{
  border-color:var(--brand-violet-2);
  box-shadow:0 0 0 3px rgba(171,56,255,.35);
}
.form-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23a1a4a5' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.consult-form .btn{ justify-self:start; margin-top:4px; }
.form-consent{ display:flex; align-items:flex-start; gap:10px; }
.form-consent input[type="checkbox"]{
  flex-shrink:0;
  width:18px; height:18px;
  margin-top:2px;
  accent-color:var(--brand-violet-2);
  cursor:pointer;
}
.form-consent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--brand-violet-2);
  outline-offset:2px;
}
.form-consent label{ font-size:13px; color:var(--text-dim); line-height:1.5; cursor:pointer; min-width:0; flex:1; }
.form-consent label a{ color:var(--text); }
.form-note{ font-size:12.5px; color:var(--text-faint); margin-top:-6px; }
.form-error{ font-size:13px; color:var(--accent-red); margin-top:4px; }
.form-success{
  display:none;
  text-align:center;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:56px 32px;
  position:relative;
  overflow:hidden;
}
.form-success.visible{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  animation:success-in .5s cubic-bezier(.2,.8,.2,1);
}
.form-success::before{
  content:"";
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(148,0,255,.28), transparent 70%);
  pointer-events:none;
}
.form-success .success-icon{
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--brand-violet), var(--brand-violet-2));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 14px 32px rgba(148,0,255,.45);
  color:#fff;
}
.form-success h3{ position:relative; z-index:1; font-family:var(--font-display); font-weight:500; font-size:24px; color:var(--text); margin:0; }
.form-success p{ position:relative; z-index:1; color:var(--text-dim); font-size:15px; max-width:340px; margin:0; }
@keyframes success-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce){ .form-success.visible{ animation:none; } }
.trio-section .form-success{ padding:40px 24px; }
.trio-section .form-success::before{ width:220px; height:220px; top:-100px; }
.trio-section .form-success .success-icon{ width:56px; height:56px; }
.trio-section .form-success h3{ font-size:20px; }
.trio-section .form-success p{ font-size:13.5px; }
.consult-form.hidden{ display:none; }
.consult-form.hidden{ display:none; }

/* Trio section — copy+cursor on the left, consultation form on the right, top-aligned
   so the two headings sit level with each other */
.trio-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:40px;
  align-items:start;
  padding:70px 32px 0;
}
.trio-left{
  display:flex;
  flex-direction:column;
  gap:32px;
  min-width:0;
}
.trio-section .cursor-visual{ overflow:visible; }
.trio-section .cursor-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}
.trio-section .cursor-demo-canvas{
  width:546px;
  height:546px;
  max-width:none;
  transform:translateY(-20%);
}
.trio-section .consult-wrap{
  max-width:none;
  margin:0;
  text-align:left;
}
.trio-section .consult-wrap h2{ font-size:24px; margin-bottom:8px; }
.trio-section .consult-wrap > p{ font-size:13.5px; margin-bottom:20px; }
.trio-section .consult-form{ padding:20px; gap:12px; }
.trio-section .consult-form .form-row{ grid-template-columns:minmax(0,1fr); gap:12px; }
.trio-section .form-field label{ font-size:12px; }
.trio-section .form-field input,
.trio-section .form-field select,
.trio-section .form-field textarea{ font-size:13px; padding:8px 10px; }
.trio-section .form-field textarea{ min-height:64px; }
.trio-section .form-note{ font-size:11.5px; }

/* Footer */
.site-footer{
  padding-top:60px;
  background:#020202;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(4, minmax(0,1fr));
  gap:24px;
  padding-bottom:50px;
}
.footer-brand p{ font-size:13px; margin:16px 0; line-height:1.6; }
.footer-highlight{ font-weight:700; color:#C9A6FF; }
.status-badge{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 6px var(--accent-green); }
.footer-col h5{ font-size:13px; color:var(--text-faint); font-weight:600; margin:0; font-family:var(--font-body); text-transform:uppercase; letter-spacing:.04em; }
.footer-col{ display:flex; flex-direction:column; gap:14px; }
.footer-col a{ font-size:13.5px; color:var(--text-dim); }
.footer-col a:hover{ color:var(--text); }
.footer-col-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:default;
}
.footer-col-links{ display:flex; flex-direction:column; gap:10px; }
.footer-col-chev{ display:none; flex-shrink:0; color:var(--text-faint); transition:transform .2s ease; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 32px;
  font-size:13px;
  color:var(--text-faint);
}
.footer-social{ display:flex; gap:16px; }
.footer-social a:hover{ color:var(--text); }
.footer-legal{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-legal a, .footer-legal button{
  font-family:inherit; font-size:13px; color:var(--text-faint);
  background:none; border:none; padding:0; cursor:pointer;
}
.footer-legal a:hover, .footer-legal button:hover{ color:var(--text); }
@media (max-width:640px){
  .footer-bottom{ flex-direction:column; gap:12px; align-items:flex-start; }

  /* The portal-mockup toolbar (icons + publish button) is too tight for one
     row once the browser-mockup itself is phone-width — wrap it. */
  .portal-main{ padding:16px 14px; }
  .portal-toolbar{ flex-wrap:wrap; row-gap:10px; }
  .portal-toolbar-icons{ order:3; margin-left:0; width:100%; }
  .analytics-stats{ flex-wrap:wrap; }
  .stat-chip{ min-width:calc(50% - 7px); }
  /* Decorative cursor-arrow particle visual — drops out on mobile so the pitch
     text flows straight into the consultation form instead of adding a large
     empty-feeling gap before it. */
  .trio-section .cursor-visual{ display:none; }

  /* Footer: collapse each link group into an accordion so the mobile footer
     reads as four short tappable rows instead of one long scroll of links,
     and drop the tagline paragraph entirely — the logo alone is enough here. */
  .footer-tagline{ display:none; }
  .footer-col-toggle{ width:100%; justify-content:space-between; cursor:pointer; padding:4px 0; }
  .footer-col-chev{ display:block; transform:rotate(-90deg); }
  .footer-col.open .footer-col-chev{ transform:rotate(0deg); }
  .footer-col-links{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .footer-col.open .footer-col-links{ max-height:280px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .trio-section{ grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; }
  .trio-left{ align-items:center; }
  .trio-section .split-copy{ text-align:center; }
  .trio-section .consult-wrap{ text-align:left; max-width:480px; width:100%; }
  .trio-section .cursor-demo-canvas{
    width:min(420px, 80vw);
    height:min(420px, 80vw);
    max-width:100%;
    transform:none;
  }
}

@media (max-width: 960px){
  .main-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(18,16,26,.97);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    backdrop-filter:blur(28px) saturate(160%);
    border-bottom:1px solid var(--border);
    padding:10px 24px 20px;
    gap:2px;
    box-shadow:0 20px 40px rgba(0,0,0,.5);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform-origin:top center;
    transform:translateY(-6px) scale(.98);
    transition:opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .18s;
  }
  .main-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  @media (prefers-reduced-motion: reduce){
    .main-nav{ transition:opacity .18s ease, visibility .18s; transform:none !important; }
  }
  .main-nav.open .nav-item{ width:100%; position:static; }
  .main-nav.open .nav-link{ width:100%; justify-content:space-between; }
  .main-nav.open a.nav-link{ justify-content:flex-start; }
  .main-nav.open .dropdown{
    position:static;
    display:none;
    opacity:1; visibility:visible; transform:none;
    width:100%;
    box-shadow:none;
    border:none;
    background:transparent;
    padding:0 0 6px 12px;
  }
  .main-nav.open .nav-item.expanded .dropdown{ display:block; }
  .main-nav.open .nav-item.expanded > .nav-link .chev{ transform:rotate(180deg); }
  .header-actions .link-btn{ display:none; }
  .lang-btn{ padding:5px 9px; font-size:11px; }
  .menu-toggle{
    display:flex; flex-direction:column; gap:4px;
    background:none; border:none; cursor:pointer; padding:8px;
    transition:transform .1s ease-out;
  }
  .menu-toggle:active{ transform:scale(.9); }
  .menu-toggle span{ width:20px; height:1.5px; background:var(--text); }
  .site-header.scrolled{ border-bottom-color:transparent; }

  .form-field input, .form-field select, .form-field textarea,
  .trio-section .form-field input, .trio-section .form-field select, .trio-section .form-field textarea{
    font-size:16px;
  }

  .hero{ grid-template-columns:minmax(0,1fr); gap:2.5vh; text-align:center; padding:32px 16px 24px; min-height:0; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; transform:none; order:2; width:100%; }
  .hero-copy .badge{ display:none; }
  .hero h1{ font-size:42px; margin-bottom:18px; }
  .hero-sub{ font-size:16px; margin-bottom:28px; }
  .hero-actions{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .hero-actions .btn{ width:100%; padding:11px 24px; font-size:15px; border-radius:10px; }
  .hero-visual{ order:1; margin-top:0; margin-bottom:0; height:260px; overflow:hidden; }
  .globe-canvas{ width:min(800px, 125vw); height:min(800px, 125vw); transform:none; }
  .hero::before{
    top:-8%;
    bottom:auto;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:120%;
    height:65%;
  }

  .split-section{ padding:48px 24px; gap:32px; }
  .split-section, .split-section.reverse{
    grid-template-columns:minmax(0,1fr); text-align:center;
  }
  /* Same single-column stacking as every other split-section — the wider
     1fr/2fr desktop ratio above is ID-scoped so it would otherwise outrank
     this rule even in this media query. */
  #work, #work + .split-section.reverse{ grid-template-columns:minmax(0,1fr); }
  /* The fixed 460px wrapper height only exists to fix a shared-row-height
     problem in the desktop 2-column grid — single column here has no such
     problem, so it just adds dead space around an already-smaller canvas. */
  #work .particle-visual, #work + .split-section.reverse .particle-visual{ height:auto; }
  #work .split-copy{ padding-left:0; }
  .split-copy{ max-width:480px; margin:0 auto; }
  .split-section.reverse .split-copy,
  .split-section.reverse .split-visual{ order:initial; }
  .split-copy p{ max-width:100%; }

  .activity-row{ align-items:flex-start; flex-wrap:wrap; }
  .activity-text{ min-width:0; }
  .activity-text span{ white-space:normal; overflow:visible; text-overflow:clip; }

  .feature-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    padding:24px;
    max-width:420px;
  }
  .feature-row.reverse-text{ flex-direction:column; }

  .grid-section{ padding:56px 24px; }
  .grid-section .cards-header{ margin-bottom:36px; }
  .cards-section{ padding:56px 24px; }
  .cards-header{ margin-bottom:32px; }
  .cards-header h2{ font-size:32px; }
  .control-section{ padding:56px 24px; }
  .control-section h2{ font-size:32px; }
  .faq-section{ padding:56px 24px; }
  .consult-section{ padding:56px 24px 72px; }
  .consult-wrap h2{ font-size:32px; }
  .trio-section{ padding:48px 24px 0; gap:32px; }
  .final-cta{ padding:64px 24px; }
  .final-cta h2{ font-size:36px; margin-bottom:24px; }
  .panel-wrap{ padding:0 24px 56px; }
  .page-hero{ padding:48px 24px 8px; }
  .site-footer{ padding-top:48px; border-top-color:transparent; }
  .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-bottom:36px; }
  .footer-brand{ grid-column:1 / -1; margin-bottom:8px; }
  .footer-bottom{ border-top-color:transparent; }

  .two-cards{ grid-template-columns:minmax(0,1fr); }
  .feature-grid{ grid-template-columns:minmax(0,1fr); }
  .testimonials-grid{ grid-template-columns:minmax(0,1fr); }
  .page-hero h1{ font-size:40px; }
  .consult-form .form-row{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width: 560px){
  .hero h1{ font-size:46px; }
  .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 20px; }
  .final-cta h2{ font-size:32px; }
  .page-hero h1{ font-size:32px; }
  .consult-form{ padding:24px 20px; }
}

@media (max-width: 480px){
  .container{ padding:0 16px; }
  .header-inner{ gap:10px; }
  .header-actions{ gap:6px; }
  .logo-mark-header{ height:24px; }

  .nav-cta{
    position:relative;
    padding:0;
    width:36px;
    height:36px;
    justify-content:center;
    border-radius:999px;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    user-select:none;
    -webkit-user-select:none;
  }
  .nav-cta .btn-label{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .nav-cta-icon{ display:block; width:18px; height:18px; }

  .hero{ padding:28px 14px 20px; }
  .hero h1{ font-size:42px; }
  .split-section{ padding:40px 20px; }
  .feature-row{ padding:20px; }
  .grid-section, .cards-section, .control-section, .faq-section{ padding:44px 20px; }
  .consult-section{ padding:44px 20px 56px; }
  .trio-section{ padding:40px 20px 0; }
  .final-cta{ padding:52px 20px; }
  .page-hero{ padding:40px 20px 8px; }
  .footer-top{ padding-bottom:32px; }
}

/* ---------- Cookie consent banner ---------- */
.consent-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:200;
  max-width:640px;
  margin:0 auto;
  background:var(--bg-panel);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  transform:translateY(calc(100% + 32px));
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.consent-banner.open{ transform:translateY(0); opacity:1; }
.consent-banner p{ margin:0 0 14px; font-size:13.5px; color:var(--text-dim); line-height:1.55; }
.consent-banner a{ color:var(--text); text-decoration:underline; }
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.consent-actions .btn{ padding:9px 16px; font-size:13px; }
@media (prefers-reduced-motion: reduce){
  .consent-banner{ transition:none; }
}

/* ---------- Legal pages (privacy / terms / cookies) ---------- */
.legal-content{
  max-width:760px;
  margin:0 auto;
  padding:8px 32px 80px;
}
.legal-content h2{
  font-family:var(--font-body);
  font-size:20px;
  font-weight:700;
  margin:40px 0 14px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--text-dim); font-size:15px; line-height:1.7; margin:0 0 16px; }
.legal-content ul{ color:var(--text-dim); font-size:15px; line-height:1.7; margin:0 0 16px; padding-left:22px; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--accent-purple); text-decoration:underline; }
.legal-content strong{ color:var(--text); }
@media (max-width:640px){
  .legal-content{ padding:8px 20px 56px; }
}

/* Service pages (Webcare, Google SEO): scope panels, comparison table, factor grid */
.page-hero .pill-row{ margin-top:28px; }
.page-note, .page-hero .page-note{ font-size:13px; color:var(--text-faint); margin-top:16px; }
.final-cta .page-note{ margin-top:20px; }
.scope-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  max-width:880px;
  margin:0 auto;
  text-align:left;
}
.scope-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
}
.scope-card h3{ font-family:var(--font-body); font-weight:600; font-size:18px; margin-bottom:16px; }
.scope-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.scope-card li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.6; color:var(--text-dim); }
.scope-card li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:12px; height:7px;
  border-left:2px solid var(--accent-green); border-bottom:2px solid var(--accent-green);
  transform:rotate(-45deg);
}
.scope-card.is-extra li::before{
  width:10px; height:0; border-left:0; border-bottom:2px solid var(--text-faint);
  transform:none; top:.8em;
}
.scope-card a, .feature-text a, .faq-item p a, .page-note a{ color:var(--accent-purple); text-decoration:underline; text-underline-offset:3px; }

.compare-wrap{ max-width:880px; margin:0 auto; text-align:left; }
.compare-table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  font-size:14.5px;
}
.compare-table th, .compare-table td{ padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); }
.compare-table thead th{ font-weight:600; color:var(--text); background:var(--bg-panel-2); font-size:14px; }
.compare-table tbody th{ font-weight:500; color:var(--text); width:34%; }
.compare-table td{ color:var(--text-dim); line-height:1.55; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{ border-bottom:0; }

.factor-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  max-width:760px;
  margin:0 auto;
  text-align:left;
}
.factor-item{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 22px; }
.factor-item h4{ font-family:var(--font-body); font-weight:600; font-size:15.5px; margin-bottom:6px; }
.factor-item p{ font-size:13.5px; line-height:1.6; }

@media (max-width:720px){
  .scope-grid, .factor-grid{ grid-template-columns:minmax(0,1fr); }
  .scope-card{ padding:22px; }
  .compare-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td{ display:block; width:100%; }
  .compare-table tbody th{ width:100%; padding:16px 18px 4px; border-bottom:0; }
  .compare-table td{ padding:6px 18px; border-bottom:0; }
  .compare-table td::before{ content:attr(data-label); display:block; font-size:12px; color:var(--text-faint); margin-bottom:2px; }
  .compare-table tbody tr{ border-bottom:1px solid var(--border); padding-bottom:12px; }
  .compare-table tbody tr:last-child{ border-bottom:0; }
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.scope-grid.scope-grid-single{ grid-template-columns:minmax(0,1fr); max-width:640px; }
.grid-section.grid-section-tight{ padding-bottom:0; }
.cards-header.cards-header-flush{ margin-bottom:0; }
.faq-section .cards-header{ text-align:center; }
.link-card{ display:inline-flex; margin-top:16px; }
.page-hero .project-visit{ margin-top:28px; }
.glow-card .card-price{ font-weight:600; color:var(--text); font-size:15px; margin-bottom:10px; }
.glow-card .link-arrow{ position:relative; margin-top:16px; }

/* ---------- Price calculator (/price-calculator) ---------- */
[hidden]{ display:none !important; }
.calc-section{ --calc-accent:#70FBD2; --calc-warn:#ffd27a; padding:56px 32px 40px; }
.calc-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.calc-form{ min-width:0; }
.calc-group{ border:0; padding:0; margin:0 0 40px; min-width:0; }
.calc-group legend{ font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.3; padding:0; margin-bottom:14px; color:var(--text); }
.calc-group legend + .calc-hint{ margin-top:-8px; }
.calc-hint{ color:var(--text-dim); font-size:13.5px; margin:0 0 14px; }
.calc-hint.calc-hint-sub{ margin:14px 0 8px; }
.calc-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:10px; }
.calc-opt{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-content:start; padding:14px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--bg-panel); cursor:pointer; min-width:0; transition:border-color .15s ease, background .15s ease; }
.calc-opt:hover{ border-color:var(--text-faint); }
.calc-opt input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.calc-opt:has(input:checked){ border-color:var(--calc-accent); box-shadow:0 0 0 1px var(--calc-accent); background:var(--bg-panel-2); }
.calc-opt:has(input:focus-visible){ outline:2px solid var(--calc-accent); outline-offset:2px; }
.calc-opt:has(input:disabled){ opacity:.55; cursor:default; }
.calc-opt .t{ font-weight:600; color:var(--text); min-width:0; font-size:15px; }
.calc-opt .d{ grid-column:1; color:var(--text-dim); font-size:13px; min-width:0; }
.calc-opt .p{ grid-row:1; grid-column:2; font-size:13px; color:var(--calc-accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-opt .p.q{ color:var(--text-dim); }
.calc-note{ margin:12px 0 0; padding:12px 14px; border-left:3px solid var(--calc-accent); background:var(--bg-panel); color:var(--text-dim); font-size:13.5px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.calc-range{ display:flex; align-items:center; gap:16px; padding:14px; border:1px solid var(--border-strong); background:var(--bg-panel); border-radius:var(--radius-md); }
.calc-range input[type=range]{ flex:1; min-width:0; accent-color:var(--calc-accent); }
.calc-range input[type=range]:focus-visible{ outline:2px solid var(--calc-accent); outline-offset:4px; }
.calc-range-val{ white-space:nowrap; font-family:var(--font-display); font-size:26px; font-weight:500; min-width:5.5ch; text-align:right; font-variant-numeric:lining-nums tabular-nums; color:var(--text); }
.calc-stack{ display:grid; gap:10px; }
.calc-stepper{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--bg-panel); justify-content:space-between; }
.calc-stepper .lbl{ min-width:0; }
.calc-stepper .lbl b{ display:block; font-weight:600; color:var(--text); font-size:15px; }
.calc-stepper .lbl span{ color:var(--text-dim); font-size:13px; }
.calc-stepper .ctl{ display:flex; align-items:center; gap:10px; }
.calc-stepper button{ width:36px; height:36px; border:1px solid var(--border-strong); background:var(--bg-panel-2); color:var(--text); border-radius:8px; font-size:18px; cursor:pointer; }
.calc-stepper button:hover{ border-color:var(--calc-accent); }
.calc-stepper button:focus-visible{ outline:2px solid var(--calc-accent); outline-offset:2px; }
.calc-stepper output{ min-width:2ch; text-align:center; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }

.calc-panel{ background:linear-gradient(165deg, #2b0a68 0%, #160c2d 72%); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.calc-label{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.calc-price{ font-family:var(--font-display); font-weight:500; font-size:clamp(36px, 8vw, 46px); line-height:1.05; font-variant-numeric:lining-nums tabular-nums; color:var(--text); }
.calc-price small{ font-size:.42em; color:var(--text-dim); font-weight:500; }
.calc-price.calc-price-quote{ font-size:clamp(28px, 6vw, 36px); }
.calc-fine.calc-fine-lg{ font-size:14px; }
.calc-bar .bv.bv-quote{ font-size:18px; }
.calc-free{ display:inline-flex; align-self:flex-start; background:var(--calc-accent); color:#08050f; font-weight:600; font-size:13px; padding:4px 10px; border-radius:4px; }
.calc-lines{ display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none; font-size:14px; color:var(--text); }
.calc-lines li{ display:flex; justify-content:space-between; gap:12px; }
.calc-lines li > span:first-child{ min-width:0; }
.calc-lines .amt{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-lines .neg{ color:var(--calc-accent); }
.calc-lines .sub{ display:block; color:var(--text-dim); font-size:12.5px; }
.calc-quote{ padding:12px 14px; border:1px dashed var(--calc-warn); color:var(--calc-warn); font-size:13.5px; border-radius:var(--radius-sm); }
.calc-quote ul{ margin:6px 0 0; padding-left:18px; }
.calc-fine{ color:var(--text-dim); font-size:12.5px; }
.calc-after{ margin-top:24px; display:grid; gap:10px; }
.calc-after h2{ font-size:28px; font-weight:500; line-height:1.3; }
.calc-after .calc-hint{ margin:0; }
.calc-card{ border:1px solid var(--border-strong); background:var(--bg-panel); padding:14px; border-radius:var(--radius-md); display:grid; gap:2px; }
.calc-card b{ font-weight:600; color:var(--text); }
.calc-card .pr{ color:var(--calc-accent); font-variant-numeric:tabular-nums; font-weight:500; }
.calc-card p{ font-size:13.5px; }
.calc-lead{ padding-top:24px; }
.calc-lead .consult-wrap{ max-width:560px; }
.calc-lead .consult-wrap > p{ margin-bottom:28px; }
.calc-bar{ position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--bg-panel-2); border-top:1px solid var(--border-strong); }
.calc-bar .bl{ font-size:12px; color:var(--text-dim); }
.calc-bar .bv{ white-space:nowrap; font-family:var(--font-display); font-size:21px; font-weight:500; font-variant-numeric:lining-nums tabular-nums; line-height:1.1; color:var(--text); }
.calc-bar .btn{ white-space:normal; text-align:center; padding:9px 14px; font-size:13px; line-height:1.3; }
.calc-page .site-footer{ padding-bottom:84px; }
.price-teaser{ --calc-accent:#70FBD2; padding:80px 32px; display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; }
.pt-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.pt-copy h2{ font-size:40px; line-height:1.2; }
.pt-copy p{ font-size:16px; max-width:46ch; }
.pt-copy .page-note{ margin-top:0; }
.pt-card{ background:linear-gradient(165deg, #2b0a68 0%, #160c2d 72%); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.pt-card .calc-group{ margin:0; }
.pt-card .calc-group legend{ font-size:20px; margin-bottom:10px; }
.pt-card .calc-opts{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.pt-result{ display:flex; flex-direction:column; gap:8px; }
@media (min-width:960px){
  .price-teaser{ grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:64px; }
  .calc-layout{ grid-template-columns:minmax(0,1fr) 390px; align-items:start; gap:48px; }
  .calc-side{ position:sticky; top:96px; }
  .calc-bar{ display:none; }
  .calc-page .site-footer{ padding-bottom:0; }
}
@media (max-width:640px){
  .calc-section{ padding:32px 16px 24px; }
  .calc-group legend, .calc-after h2{ font-size:24px; }
  .price-teaser{ padding:48px 16px; gap:28px; }
  .pt-copy h2{ font-size:30px; }
  .pt-card{ padding:18px; }
}
@media (prefers-reduced-motion: reduce){ .calc-opt{ transition:none; } }

/* ===== [REV-A] Homepage: "ready in 2-3 weeks" + "customer experience" sections.
   Visuals 20% smaller, more space between sections. To undo: delete this block. ===== */
#work .particle-visual, #work + .split-section.reverse .particle-visual{ height:368px; }
#work .particle-canvas, #work + .split-section.reverse .particle-canvas{ width:min(672px, 72vw); }
#work, #work + .split-section.reverse{ padding-top:96px; padding-bottom:96px; }
@media (max-width:960px){
  #work .particle-visual, #work + .split-section.reverse .particle-visual{ height:auto; }
  #work, #work + .split-section.reverse{ padding-top:64px; padding-bottom:64px; }
}
/* ===== [/REV-A] ===== */

/* ===== [REV-B] Homepage "trusted by" logo strip, mobile redesign: compact, two equal logo tiles,
   full-width pill link. To undo: delete this block. ===== */
@media (max-width:640px){
  .logo-strip{ margin-top:40px; padding:32px 16px 56px; }
  .trust-line{ font-size:13px; letter-spacing:.04em; margin-bottom:20px; }
  .logo-row.logo-row-clients{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; width:100%; max-width:420px; }
  .client-logo{ width:100%; height:80px; padding:18px 14px; box-sizing:border-box; object-fit:contain; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius-md); }
  .logo-strip-link.link-arrow{ margin-top:20px; width:100%; max-width:420px; justify-content:center; min-height:44px; padding:10px 20px; border:1px solid var(--border-strong); border-radius:999px; color:var(--text-dim); }
}
/* ===== [/REV-B] ===== */

/* ===== [REV-C] Mobile/touch targets: header menu button, language switch, footer links and legal
   links get a 44px tap area (were 22-29px). Visual look is unchanged. To undo: delete this block. ===== */
@media (max-width:960px){
  .menu-toggle{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .lang-btn{ min-height:36px; padding:8px 12px; }
  .footer-col-links{ gap:0; }
  .footer-col.open .footer-col-links{ max-height:340px; }
  .footer-col-toggle{ min-height:44px; }
  .footer-col-links a{ display:flex; align-items:center; min-height:44px; }
  .footer-legal{ gap:0 16px; }
  .footer-legal a, .footer-legal button{ display:inline-flex; align-items:center; min-height:44px; }
}
/* ===== [/REV-C] ===== */

/* ===== [REV-D] Loading feedback: top progress bar + busy state on the pressed link/button
   (driven by startLoading/stopLoading in script.js). To undo: delete this block and the
   "Loading feedback" block in script.js. ===== */
.load-bar{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:1000; transform:scaleX(0); transform-origin:left center; opacity:0; pointer-events:none; background:linear-gradient(90deg, #9400FF, #AB38FF, #70FBD2); box-shadow:0 0 10px rgba(148,0,255,.6); }
.load-bar.is-active{ opacity:1; animation:load-grow 10s cubic-bezier(.1,.6,.2,1) forwards; }
@keyframes load-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(.92); } }
.is-loading{ cursor:progress; pointer-events:none; opacity:.7; }
.btn.is-loading::before{ content:''; flex-shrink:0; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:load-spin .7s linear infinite; }
@keyframes load-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .load-bar.is-active{ animation:none; transform:scaleX(.7); }
  .btn.is-loading::before{ animation:none; border-right-color:currentColor; border-bottom-color:transparent; }
}
/* ===== [/REV-D] ===== */

/* ===== [REV-E] Heading outline + Georgian leading: the homepage form title is an h3, Georgian script gets looser leading
   on wrapped headings (English keeps 1.08). To undo: delete this block and turn the form title back into an h2. ===== */
.trio-section .consult-wrap h3{ font-size:24px; margin-bottom:8px; }
html[lang="ka"] h1{ line-height:1.15; }
html[lang="ka"] h2, html[lang="ka"] h3{ line-height:1.2; }
/* ===== [/REV-E] ===== */

/* ===== [REV-F] Honour transparency and contrast preferences. To undo: delete this block. ===== */
@media (prefers-reduced-transparency: reduce){
  .site-header.scrolled, .dropdown{ background:#0c0b12; -webkit-backdrop-filter:none; backdrop-filter:none; }
  @media (max-width:960px){ .main-nav{ background:#0c0b12; -webkit-backdrop-filter:none; backdrop-filter:none; } }
}
@media (prefers-contrast: more){
  :root{ --border:rgba(255,255,255,.28); --border-strong:rgba(255,255,255,.5); --text-dim:#d0d3d4; --text-faint:#b8b8b8; }
  .site-header.scrolled, .dropdown{ background:#0c0b12; -webkit-backdrop-filter:none; backdrop-filter:none; }
  @media (max-width:960px){ .main-nav{ background:#0c0b12; -webkit-backdrop-filter:none; backdrop-filter:none; } }
}
/* ===== [/REV-F] ===== */

/* ===== [REV-G] Hero sphere on the GPU renderer: the canvas no longer needs the heavy CSS blur
   (an 80px drop-shadow that the browser had to re-blur every frame, a common cause of flicker and
   stutter on Safari / Apple Silicon). A fixed soft glow behind the canvas replaces it. Only applies
   when the WebGL renderer is active (script.js adds .sphere-gl); the canvas-2D fallback keeps the
   original look. To undo: delete this block. ===== */
.hero-visual{ position:relative; }
.hero-visual.has-sphere-gl::before{
  content:''; position:absolute; left:50%; top:50%; width:min(540px, 80vw); height:min(540px, 80vw);
  transform:translate(-50%,-50%) translateX(5%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(39,0,93,.20) 0%, rgba(39,0,93,.13) 40%, rgba(39,0,93,.05) 64%, rgba(39,0,93,0) 76%);
}
.globe-canvas.sphere-gl{ filter:none; position:relative; }
/* ===== [/REV-G] ===== */

/* ===== [HOME-V2] Homepage redesign (2026-10-14). Applies only to <body class="home-v2"> (index.html, en/index.html).
   One focal object (the sphere), flat black, hairline glass panels, no glow, mint only as a small accent.
   To undo: delete this block and restore the two index files from git. ===== */
.home-v2, .site-v2{
  --hx-panel:#08090c;
  --hx-line:rgba(255,255,255,.075);
  --hx-line-strong:rgba(255,255,255,.14);
  --hx-edge:inset 0 1px 0 rgba(255,255,255,.07);
  --hx-mint:#6effae;
  --hx-r-xl:28px;
  --hx-r-lg:20px;
  --hx-space:clamp(96px, 11vw, 152px);
  --calc-accent:#6effae;
}
.home-v2 .container, .site-v2 .container{ max-width:1200px; padding-left:clamp(16px, 4vw, 32px); padding-right:clamp(16px, 4vw, 32px); }

/* type */
.hx-eyebrow{ font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--hx-mint); margin:0 0 18px; }
.hx-title{ font-size:clamp(52px, 7.6vw, 108px); line-height:1.0; letter-spacing:-0.035em; margin:0 0 28px; }
.hx-h2{ font-size:clamp(32px, 4.2vw, 54px); line-height:1.06; letter-spacing:-0.028em; }
.hx-sub{ font-size:clamp(16px, 1.35vw, 18px); line-height:1.6; color:var(--text-dim); max-width:52ch; margin-top:18px; }
.hx-lead{ font-size:clamp(19px, 1.8vw, 24px); line-height:1.55; color:var(--text-dim); max-width:36ch; margin:0 0 40px; }
html[lang="ka"] .hx-title{ line-height:1.12; letter-spacing:-0.01em; font-size:clamp(46px, 6.4vw, 92px); }
html[lang="ka"] .hx-h2{ line-height:1.2; letter-spacing:-0.005em; font-size:clamp(28px, 3.6vw, 46px); }
html[lang="ka"] .hx-lead{ max-width:40ch; }

/* buttons */
.hx-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; }
.hx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border-radius:999px; font-family:var(--font-body); font-size:15px; font-weight:500; line-height:1; border:1px solid transparent; cursor:pointer; transition:background-color .2s ease, opacity .2s ease, transform .1s ease-out; }
.hx-btn:active{ transform:scale(.97); }
.hx-btn-primary{ background:#fff; color:#000; }
.hx-btn-primary:hover{ background:#e6e6e6; }
.hx-btn-light{ background:rgba(255,255,255,.08); color:var(--text); border-color:var(--hx-line-strong); }
.hx-btn-light:hover{ background:rgba(255,255,255,.13); }
.hx-btn-quiet{ padding:0; min-height:44px; color:var(--text); background:none; }
.hx-btn-quiet:hover{ color:#fff; }
.hx-arrow{ display:inline-block; transition:transform .2s ease; }
.hx-btn-quiet:hover .hx-arrow, .hx-link:hover .hx-arrow, a:hover > .hx-case-copy .hx-arrow, .hx-service:hover .hx-arrow{ transform:translateX(3px); }
.hx-link{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; color:var(--text); }

/* hero */
.hx-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:24px; min-height:min(calc(100svh - 64px), 820px); padding-top:24px; padding-bottom:24px; }
.hx-hero-copy{ position:relative; z-index:1; }
.hx-hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-width:0; height:min(640px, 52vw); }
/* the sphere canvas keeps its original size, transform and filter (Rati 2026-10-14: never change the sphere) */
.hx-hero-visual .globe-canvas{ position:relative; flex-shrink:0; }
/* [HERO-POINTER] 2026-10-17 (Rati): the homepage hero shows the SEMMA pointer (logo v2) written in the page's own code
   characters, raining in on every visit, exactly like the /_drafts/cursor-logo test: home-motion.js [FX-PORTRAIT] colours
   the characters inside this box from /brand/pointer-mint.png. --fx-fade: no fade-out; --fx-bright: full mint. */
.hx-pointer{ height:min(80%, 472px); aspect-ratio:4 / 5;   /* 20% smaller than first placed (Rati, 2026-10-17: too big) */
   max-width:100%; --fx-fade:.99; --fx-bright:1.15; }
/* desktop: moved 15% of the hero's right column to the right (Rati, 2026-10-17); phones and tablets keep it centred above the text */
@media (min-width:961px){ .hx-pointer{ position:relative; left:15%; } }
/* The sphere's scroll break-up runs until the element with id "work" nears the fold. This invisible
   marker sits where the old layout's "work" section began (~55vh into this section), so the sphere
   breaks up over the same scroll distance as before. The sphere code itself is unchanged. */
#why{ position:relative; }
.home-v2 #work.hx-shatter-mark{ position:absolute; left:0; top:55vh; width:1px; height:0; margin:0; padding:0; overflow:hidden; pointer-events:none; }

/* clients: two glass logo tiles under a centred label */
.hx-clients{ padding-top:clamp(56px, 7vw, 88px); text-align:center; }
.hx-clients-label{ font-size:14px; color:var(--text-faint); margin:0 0 24px; }
.hx-clients-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.hx-client{
  position:relative; display:flex; align-items:center; justify-content:center; min-height:150px; padding:28px 32px;
  border:1px solid var(--hx-line); border-radius:var(--hx-r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 50%), var(--hx-panel);
  box-shadow:var(--hx-edge); color:inherit;
  transition:border-color .3s ease, translate .4s cubic-bezier(.2,.7,.2,1);
}
.hx-client-logo{ height:52px; width:auto; max-width:100%; object-fit:contain; opacity:.9; transition:opacity .3s ease; }
a.hx-client:hover{ border-color:var(--hx-line-strong); translate:0 -3px; }
a.hx-client:hover .hx-client-logo{ opacity:1; }
.hx-client-go{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--hx-line-strong); color:var(--text-faint); transition:color .3s ease, background-color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.hx-client-go svg{ width:15px; height:15px; }
a.hx-client:hover .hx-client-go{ color:#000; background:#fff; border-color:#fff; transform:rotate(0deg) scale(1.06); }
.hx-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:640px){
  .hx-clients-grid{ gap:10px; }
  .hx-client{ min-height:96px; padding:18px 14px; }
  .hx-client-logo{ height:30px; }
  .hx-client-go{ top:8px; right:8px; width:26px; height:26px; }
  .hx-client-go svg{ width:12px; height:12px; }
}
@media (prefers-reduced-motion: reduce){ a.hx-client:hover{ translate:none; } }

/* sections */
.hx-section{ padding-top:var(--hx-space); }
.hx-section-last{ padding-bottom:var(--hx-space); }
.hx-head{ max-width:900px; margin-bottom:clamp(40px, 5vw, 64px); }
.hx-head-split{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; }
.hx-head-split > div{ max-width:700px; }

/* panels: flat dark glass, specular top edge, hairline border */
.hx-tile, .hx-calc, .hx-contact, .hx-case, .hx-services{
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)), var(--hx-panel);
  border:1px solid var(--hx-line);
  border-radius:var(--hx-r-xl);
  box-shadow:var(--hx-edge);
}

/* bento */
.hx-bento{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
.hx-tile{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:clamp(28px, 3vw, 44px); min-height:460px; }
.hx-tile-speed{ grid-column:span 5; }
.hx-tile-ux{ grid-column:span 7; }
.hx-tile-portal{ grid-column:span 12; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:clamp(32px, 5vw, 72px); min-height:0; }
.hx-tile-copy h3{ font-size:clamp(22px, 2.1vw, 28px); line-height:1.18; letter-spacing:-0.015em; margin-bottom:14px; max-width:22ch; }
html[lang="ka"] .hx-tile-copy h3{ line-height:1.32; letter-spacing:0; }
.hx-tile-copy p{ font-size:15.5px; line-height:1.6; max-width:46ch; }

/* speed tile: typographic number + 3-segment track */
.hx-speed-num{ margin:0 0 22px; font-family:var(--font-display); font-size:clamp(88px, 10vw, 140px); line-height:.9; letter-spacing:-0.045em; color:var(--text); font-variant-numeric:lining-nums; display:flex; align-items:baseline; gap:14px; }
html[lang="en"] .hx-speed-num{ font-family:var(--font-display); }
.hx-speed-num span{ font-family:var(--font-body); font-size:17px; letter-spacing:0; color:var(--text-dim); }
.hx-track{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.hx-track span{ position:relative; height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.hx-track span::after{ content:''; position:absolute; inset:0; background:var(--hx-mint); transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.hx-track span:nth-child(2)::after{ transition-delay:.55s; }
.hx-track span:nth-child(3)::after{ transition-delay:1.1s; background:rgba(110,255,174,.45); }
.is-in .hx-track span::after, html:not(.reveal-ready) .hx-track span::after{ transform:scaleX(1); }

/* UX tile: two real screenshots, layered */
.hx-stack{ position:relative; height:280px; margin:0 calc(clamp(28px, 3vw, 44px) * -1) calc(clamp(28px, 3vw, 44px) * -1) 0; }
.hx-stack .hx-frame{ position:absolute; width:78%; }
.hx-stack-back{ right:-6%; top:0; filter:brightness(.45) saturate(.6); }
.hx-stack-front{ left:0; top:56px; box-shadow:0 30px 60px -20px rgba(0,0,0,.9); }

/* browser frame (neutral, no traffic-light colors) */
.hx-frame{ border-radius:14px; overflow:hidden; background:#0d0f14; border:1px solid var(--hx-line-strong); box-shadow:var(--hx-edge); }
.hx-frame img{ display:block; width:100%; height:auto; }
.hx-frame-bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--hx-line); background:#111319; }
.hx-frame-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); }
.hx-frame-url{ margin:0 auto; transform:translateX(-14px); font-size:11.5px; color:var(--text-faint); letter-spacing:.01em; }

/* portal mockup */
.hx-portal-body{ display:flex; min-height:300px; }
.hx-portal-side{ display:flex; flex-direction:column; gap:10px; padding:16px 12px; border-right:1px solid var(--hx-line); }
.hx-portal-side b{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.05); }
.hx-portal-side b.on{ background:rgba(148,0,255,.35); }
.hx-portal-main{ flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.hx-portal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hx-portal-publish{ font-family:var(--font-body); font-size:12px; font-weight:600; color:#000; background:var(--hx-mint); padding:7px 14px; border-radius:999px; }
.hx-portal-hero{ display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:12px; background:linear-gradient(135deg, #2a0866, #14002f); }
.hx-skel{ display:block; height:8px; border-radius:4px; background:rgba(255,255,255,.14); }
.hx-skel.light{ height:12px; background:rgba(255,255,255,.85); }
.hx-skel.w40{ width:40%; } .hx-skel.w60{ width:60%; }
.hx-skel.pill{ width:84px; height:22px; border-radius:999px; background:#fff; margin-top:6px; }
.hx-portal-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.hx-portal-cards span{ height:70px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--hx-line); }

/* case study */
.hx-case{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:center; gap:clamp(28px, 4vw, 56px); padding:clamp(24px, 3vw, 40px); color:inherit; transition:border-color .25s ease; }
.hx-case:hover{ border-color:var(--hx-line-strong); }
.hx-case-copy{ padding:8px 0 8px clamp(0px, 1vw, 12px); }
.hx-case-tag{ display:block; font-size:13px; color:var(--text-faint); margin-bottom:14px; }
.hx-case-copy h3{ font-size:clamp(28px, 3vw, 40px); letter-spacing:-0.02em; margin-bottom:14px; }
.hx-case-copy p{ font-size:15.5px; margin-bottom:28px; max-width:34ch; }

/* calculator */
.hx-calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); align-items:center; gap:clamp(32px, 5vw, 80px); padding:clamp(28px, 4.5vw, 64px); }
.hx-calc-copy .hx-btn{ margin-top:32px; }
.home-v2 .pt-card.hx-calc-card{ background:rgba(255,255,255,.025); border:1px solid var(--hx-line); border-radius:var(--hx-r-lg); padding:24px; gap:22px; box-shadow:none; }
.home-v2 .hx-calc-card .calc-group legend{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--text-faint); margin-bottom:10px; }
.home-v2 .hx-calc-card .calc-range, .home-v2 .hx-calc-card .calc-opt{ background:rgba(0,0,0,.35); border-color:var(--hx-line-strong); border-radius:12px; }
.home-v2 .hx-calc-card .calc-opt .t{ font-size:14px; font-weight:500; }
.home-v2 .hx-calc-card .pt-result{ padding-top:20px; border-top:1px solid var(--hx-line); }
.home-v2 .hx-calc-card .calc-label{ font-size:13px; letter-spacing:0; text-transform:none; color:var(--text-faint); }

/* services: one panel, three columns split by hairlines */
.hx-services{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); overflow:hidden; }
.hx-service{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(28px, 3vw, 40px); color:inherit; transition:background-color .25s ease; }
.hx-service + .hx-service{ border-left:1px solid var(--hx-line); }
.hx-service:hover{ background:rgba(255,255,255,.025); }
.hx-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--hx-line-strong); color:var(--hx-mint); margin-bottom:32px; }
.hx-icon svg{ width:20px; height:20px; }
.hx-service h3{ font-family:var(--font-body); font-size:17px; font-weight:600; letter-spacing:-0.005em; margin-bottom:6px; }
.hx-price{ font-family:var(--font-display); font-size:clamp(26px, 2.4vw, 32px); line-height:1.15; color:var(--text); letter-spacing:-0.02em; margin:0 0 16px; }
.hx-service p:not(.hx-price){ font-size:14.5px; line-height:1.6; margin-bottom:28px; flex:1; }

/* contact */
.hx-contact .hx-h2, .hx-calc .hx-h2{ font-size:clamp(30px, 3.4vw, 44px); }
html[lang="ka"] .hx-contact .hx-h2, html[lang="ka"] .hx-calc .hx-h2{ font-size:clamp(26px, 2.9vw, 38px); }
.hx-contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(32px, 5vw, 80px); padding:clamp(28px, 4.5vw, 64px); }
.hx-points{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:12px; }
.hx-points li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--text); }
.hx-points li::before{ content:''; position:absolute; left:2px; top:.42em; width:12px; height:7px; border-left:1.6px solid var(--hx-mint); border-bottom:1.6px solid var(--hx-mint); transform:rotate(-45deg); }
.home-v2 .consult-wrap.hx-form{ max-width:none; margin:0; text-align:left; }
.home-v2 .hx-form h3{ font-family:var(--font-body); font-size:17px; font-weight:600; margin-bottom:20px; }
.home-v2 .hx-form .consult-form{ background:none; border:0; padding:0; box-shadow:none; }
.home-v2 .hx-form .form-field input, .home-v2 .hx-form .form-field select, .home-v2 .hx-form .form-field textarea{ background:rgba(0,0,0,.4); border:1px solid var(--hx-line-strong); border-radius:12px; min-height:46px; }
.home-v2 .hx-form .form-field input:focus, .home-v2 .hx-form .form-field select:focus, .home-v2 .hx-form .form-field textarea:focus{ border-color:rgba(255,255,255,.4); box-shadow:none; }
.home-v2 .hx-form .form-field select{ padding-right:36px; text-overflow:ellipsis; }
.home-v2 .hx-form .consult-form .hx-btn{ justify-self:start; margin-top:6px; padding:0 28px; border-radius:999px; }
.home-v2 .form-success::before{ content:none; }
.home-v2 .form-success .success-icon{ background:none; border:1px solid var(--hx-mint); color:var(--hx-mint); box-shadow:none; }

/* scroll reveal (script.js adds .reveal-ready on <html>; without JS everything is visible) */
.reveal-ready .reveal{ opacity:0; translate:0 28px; transition:opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1); }
.reveal-ready .reveal.is-in{ opacity:1; translate:0 0; }
.reveal-ready .hx-bento .reveal:nth-child(2){ transition-delay:.08s; }

/* tablet */
@media (max-width:960px){
  .hx-hero{ grid-template-columns:minmax(0,1fr); min-height:0; gap:0; padding-top:8px; text-align:left; }
  .hx-hero-visual{ order:-1; height:min(340px, 78vw); overflow:hidden; margin:0 calc(clamp(16px, 4vw, 32px) * -1); }
  .hx-lead{ margin-bottom:32px; }
  .hx-tile-speed, .hx-tile-ux{ grid-column:span 12; }
  .hx-tile{ min-height:0; }
  .hx-tile-portal{ grid-template-columns:minmax(0,1fr); }
  .hx-stack{ height:min(340px, 52vw); }
  .hx-case{ grid-template-columns:minmax(0,1fr); }
  .hx-case-media{ order:-1; }
  .hx-calc{ grid-template-columns:minmax(0,1fr); }
  .hx-services{ grid-template-columns:minmax(0,1fr); }
  .hx-service + .hx-service{ border-left:0; border-top:1px solid var(--hx-line); }
  .hx-contact{ grid-template-columns:minmax(0,1fr); }
}

/* phone */
@media (max-width:640px){
  .home-v2, .site-v2{ --hx-r-xl:22px; --hx-space:88px; }
  .hx-actions{ flex-direction:column; align-items:stretch; gap:8px; }
  .hx-actions .hx-btn{ width:100%; }
  .hx-btn-quiet{ justify-content:center; }
  .hx-tile{ padding:24px; gap:32px; }
  .hx-stack{ margin-right:-24px; margin-bottom:-24px; height:62vw; }
  .hx-stack .hx-frame{ width:86%; }
  .hx-stack-front{ top:34px; }
  .hx-frame-bar{ height:24px; }
  .hx-portal-body{ min-height:220px; }
  .hx-portal-side{ display:none; }
  .hx-portal-cards span{ height:48px; }
  .hx-case{ padding:16px 16px 24px; }
  .hx-case-copy{ padding:0 8px; }
  .hx-calc, .hx-contact{ padding:24px; }
  .home-v2 .pt-card.hx-calc-card{ padding:18px; }
  .home-v2 .hx-calc-card .calc-price{ font-size:clamp(28px, 8.4vw, 40px); white-space:nowrap; }
  .hx-calc-copy .hx-btn{ width:100%; }
  .home-v2 .hx-form .consult-form .hx-btn{ width:100%; justify-self:stretch; }
}

@media (prefers-reduced-motion: reduce){
  .reveal-ready .reveal{ opacity:1; translate:none; transition:none; }
  .hx-track span::after{ transition:none; transform:scaleX(1); }
  .hx-btn:active{ transform:none; }
}
@media (prefers-reduced-transparency: reduce){
  .hx-tile, .hx-calc, .hx-contact, .hx-case, .hx-services{ background:#0b0e14; }
}
@media (prefers-contrast: more){
  .home-v2{ --hx-line:rgba(255,255,255,.3); --hx-line-strong:rgba(255,255,255,.5); }
}

/* ---- [HOME-V2] motion layer (driven by home-motion.js; everything is static without it) ---- */
/* hero entrance: lines rise out of a mask, then lead and buttons follow */
.hx-title .ln{ display:block; overflow:hidden; overflow:visible clip; padding:.06em 0 .1em; margin:-.06em 0 -.1em; } /* clip only vertically: wide words must not be cut at the sides */
.hx-title .ln > span{ display:inline-block; }
.motion-ok .hx-title .ln > span{ animation:hx-rise 1.1s cubic-bezier(.16,.84,.24,1) both; }
.motion-ok .hx-title .ln:nth-child(2) > span{ animation-delay:.1s; }
.motion-ok .hx-hero-copy .hx-eyebrow, .motion-ok .hx-lead, .motion-ok .hx-actions{ animation:hx-fade 1s cubic-bezier(.2,.7,.2,1) both; }
.motion-ok .hx-lead{ animation-delay:.35s; }
.motion-ok .hx-actions{ animation-delay:.5s; }
@keyframes hx-rise{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes hx-fade{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }

/* magnetic button */
.hx-magnetic{ translate:var(--mx, 0) var(--my, 0); }

/* 3D pointer tilt (spring-driven, so no CSS transition on transform) */
[data-tilt]{ transform:perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change:transform; }

/* UX tile: screenshots stand in 3D space and separate as the tile scrolls in (--p 0..1) */
.hx-stack{ perspective:1500px; perspective-origin:30% 0; }
.hx-stack .hx-frame{ transform-origin:0 0; transition:none; }
.hx-stack-back{ transform:rotateY(-18deg) rotateX(8deg) translate3d(calc((1 - var(--p, 1)) * -60px), 0, -90px); }
.hx-stack-front{ transform:rotateY(-18deg) rotateX(8deg) translate3d(0, calc((1 - var(--p, 1)) * 70px), calc(var(--p, 1) * 30px)); }

/* case study: the screen starts laid back and stands up as it scrolls into view */
.hx-case-media{ perspective:1800px; }
.hx-case-media .hx-frame{ transform-origin:50% 100%; transform:rotateX(calc((1 - var(--p, 1)) * 32deg)) scale(calc(.9 + var(--p, 1) * .1)); box-shadow:var(--hx-edge), 0 40px 80px -30px rgba(0,0,0,.9); }

/* touch devices: same 3D moves, played once as a timed transition (no per-frame scroll work; see home-motion.js) */
.touch-3d [data-scroll3d] .hx-frame{ will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:transform 1.1s cubic-bezier(.16,.84,.24,1); }
.touch-3d .hx-case-media .hx-frame{ transform:rotateX(26deg) scale(.92); }
.touch-3d .hx-case-media.is-up .hx-frame{ transform:none; }
.touch-3d .hx-stack-back{ transform:rotateY(-12deg) rotateX(6deg) translate3d(-40px, 0, -60px); }
.touch-3d .hx-stack-front{ transform:rotateY(-12deg) rotateX(6deg) translate3d(0, 50px, 0); }
.touch-3d .hx-stack.is-up .hx-stack-back{ transform:rotateY(-12deg) rotateX(6deg) translate3d(0, 0, -60px); }
.touch-3d .hx-stack.is-up .hx-stack-front{ transform:rotateY(-12deg) rotateX(6deg) translate3d(0, 0, 20px); }

/* portal mockup: edit -> publish -> saved, looping while on screen */
.hx-portal-main{ position:relative; }
.hx-edit{ position:relative; transform-origin:left; }
.hx-edit::after{ content:''; position:absolute; right:-6px; top:-3px; bottom:-3px; width:2px; border-radius:2px; background:var(--hx-mint); opacity:0; }
.hx-saved{ position:absolute; right:20px; top:58px; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--hx-mint); color:var(--hx-mint); opacity:0; scale:.6; }
.hx-saved svg{ width:14px; height:14px; }
.hx-portal-cards span:first-child{ transition:border-color .3s ease; }
.is-live .hx-edit{ animation:hx-type 6s cubic-bezier(.4,0,.2,1) infinite; }
.is-live .hx-edit::after{ animation:hx-caret 6s steps(1) infinite; }
.is-live .hx-portal-publish{ animation:hx-press 6s cubic-bezier(.2,.7,.2,1) infinite; }
.is-live .hx-saved{ animation:hx-saved 6s cubic-bezier(.2,.7,.2,1) infinite; }
.is-live .hx-portal-cards span:first-child{ animation:hx-card 6s ease infinite; }
@keyframes hx-type{ 0%,10%{ width:60%; } 24%{ width:14%; } 30%{ width:14%; } 48%,100%{ width:74%; } }
@keyframes hx-caret{ 0%,8%{ opacity:0; } 10%,16%{ opacity:1; } 18%,22%{ opacity:0; } 24%,50%{ opacity:1; } 52%,100%{ opacity:0; } }
@keyframes hx-press{ 0%,54%{ scale:1; } 57%{ scale:.9; } 61%,100%{ scale:1; } }
@keyframes hx-saved{ 0%,58%{ opacity:0; scale:.6; } 63%{ opacity:1; scale:1.08; } 66%,90%{ opacity:1; scale:1; } 96%,100%{ opacity:0; scale:.9; } }
@keyframes hx-card{ 0%,58%{ border-color:var(--hx-line); } 64%,90%{ border-color:rgba(110,255,174,.5); } 100%{ border-color:var(--hx-line); } }

/* service icons: small lift on hover */
.hx-icon{ transition:translate .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.hx-service:hover .hx-icon{ translate:0 -3px; border-color:rgba(110,255,174,.45); }

@media (max-width:960px){
  .hx-stack-back, .hx-stack-front{ transform:rotateY(-12deg) rotateX(6deg); }
  .hx-stack-front{ transform:rotateY(-12deg) rotateX(6deg) translateZ(20px); }
}
@media (prefers-reduced-motion: reduce){
  [data-tilt], .hx-case-media .hx-frame{ transform:none; }
  .hx-stack-back, .hx-stack-front{ transform:none; }
  .hx-magnetic{ translate:none; }
}
/* ===== [/HOME-V2] ===== */

/* ===== [NAV-FIT] 2026-10-14: between the mobile menu (960px) and ~1180px the desktop menu wrapped
   ("ხშირი კითხვები" on two lines). Keep each item on one line and tighten spacing in that range.
   To undo: delete this block. ===== */
@media (min-width:961px){ .nav-link{ white-space:nowrap; } }
@media (min-width:961px) and (max-width:1180px){
  .header-inner{ gap:14px; }
  .main-nav{ gap:0; }
  .nav-link{ padding:8px 8px; font-size:13px; }
  .header-actions{ gap:8px; }
  .nav-cta{ padding-left:12px; padding-right:12px; font-size:12.5px; }
}
/* narrowest desktop range: the request button becomes the same round calendar icon used on phones */
@media (min-width:961px) and (max-width:1060px){
  .nav-cta{ padding:0; width:38px; height:38px; justify-content:center; border-radius:999px; }
  .nav-cta .btn-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .nav-cta-icon{ display:block; width:18px; height:18px; }
}
/* ===== [/NAV-FIT] ===== */

/* ===== [FX-CONTRAST] 2026-10-14: less grey. Off = remove "fx-contrast" from <body class> on the homepage. ===== */
.home-v2.fx-contrast, .site-v2.fx-contrast{
  --text-dim:#c3c5ca;          /* body copy: was #a1a4a5 */
  --text-faint:#9a9da3;
  --hx-panel:#040406;          /* panels closer to black */
  --hx-line:rgba(255,255,255,.1);
  --hx-line-strong:rgba(255,255,255,.18);
  --hx-edge:inset 0 1px 0 rgba(255,255,255,.1);
}
.fx-contrast .hx-tile, .fx-contrast .hx-calc, .fx-contrast .hx-contact, .fx-contrast .hx-case, .fx-contrast .hx-services{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--hx-panel);
}
.fx-contrast .hx-tile-copy h3, .fx-contrast .hx-service h3{ color:#fff; }
/* violet, used deliberately: the project tag ("2–3" stays white, Rati 2026-10-14) */
.fx-contrast .hx-case-tag{ color:#c9a6ff; }
/* ===== [/FX-CONTRAST] ===== */

/* ===== [FX-DUST] + [FX-TINT] 2026-10-14 (layers are created by home-motion.js only when the body class is present) ===== */
.fx-dust-layer, .fx-tint-layer{ position:fixed; inset:0; pointer-events:none; }
.fx-dust-layer{ z-index:-1; width:100vw; height:100vh; }
.fx-tint-layer{ z-index:-2; background:#27005D; opacity:0; }
/* desktop: the violet fade continues under the footer; phones and tablets: the footer keeps its own black background (Rati 2026-10-14) */
@media (min-width:961px){ .fx-tint .site-footer{ background:transparent; } }
/* ===== [/FX-DUST] [/FX-TINT] ===== */


/* ===== [SITE-V2] 2026-10-15: inner pages in the homepage style. Applies only to <body class="site-v2 ...">.
   Restyles the shared building blocks (page header, cards, feature rows, FAQ, tables, forms, calculator,
   project page, legal text, final CTA). To undo on a page: remove "site-v2" from its <body class>. ===== */
.site-v2 .bg-glow{ display:none; }
.site-v2 main{ padding-bottom:var(--hx-space); }
.site-v2 main > section{ text-align:left; }

/* page header: left-aligned, big type, eyebrow instead of a pill badge */
.site-v2 .page-hero{ max-width:1200px; text-align:left; padding-top:clamp(64px, 9vw, 128px); padding-bottom:clamp(40px, 5vw, 64px); position:relative; }
/* hairline under page heroes removed (Rati, 2026-10-18: no section dividing lines) */
.site-v2 .page-hero .badge{ background:none; border:0; padding:0; border-radius:0; margin:0 0 18px; font-size:13px; font-weight:500; color:var(--hx-mint); }
.site-v2 .page-hero .badge span{ color:var(--hx-mint); }
.site-v2 .page-hero h1{ font-size:clamp(38px, 5.4vw, 72px); line-height:1.02; letter-spacing:-0.032em; margin:0 0 24px; max-width:16ch; }
html[lang="ka"] .site-v2 .page-hero h1{ font-size:clamp(32px, 4.6vw, 62px); line-height:1.16; letter-spacing:-0.005em; max-width:20ch; }
.site-v2 .page-hero > p{ font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--text-dim); max-width:56ch; }
.site-v2 .page-hero .pill-row, .site-v2 .hero-actions-center{ justify-content:flex-start; }
.site-v2 .pill{ background:none; border:1px solid var(--hx-line-strong); color:var(--text-dim); border-radius:999px; }

/* page header text centred on inner pages (Rati 2026-10-15); the rest of each page stays left-aligned */
.site-v2 .page-hero{ text-align:center; }
.site-v2 .page-hero h1, .site-v2 .page-hero > p{ margin-left:auto; margin-right:auto; }
.site-v2 .page-hero .pill-row, .site-v2 .page-hero .hero-actions, .site-v2 .page-hero .hero-actions-center{ justify-content:center; }

/* sections: one rhythm, left-aligned headers */
.site-v2 .grid-section, .site-v2 .cards-section, .site-v2 .faq-section, .site-v2 .consult-section, .site-v2 .control-section{ padding-top:var(--hx-space); padding-bottom:0; text-align:left; }
.site-v2 .control-section{ max-width:1200px; }
.site-v2 .cards-header{ max-width:900px; margin:0 0 clamp(36px, 5vw, 56px); text-align:left; }
.site-v2 .cards-header h2, .site-v2 .control-section h2, .site-v2 .consult-wrap h2{ font-size:clamp(30px, 4vw, 52px); line-height:1.06; letter-spacing:-0.028em; margin-bottom:16px; }
html[lang="ka"] .site-v2 .cards-header h2, html[lang="ka"] .site-v2 .control-section h2, html[lang="ka"] .site-v2 .consult-wrap h2{ font-size:clamp(26px, 3.4vw, 44px); line-height:1.2; letter-spacing:-0.005em; }
.site-v2 .cards-header p, .site-v2 .control-section > p{ font-size:clamp(16px, 1.35vw, 18px); line-height:1.6; max-width:60ch; }
.site-v2 .grid-section-tight{ padding-bottom:0; }
.site-v2 .cards-header-flush{ margin-bottom:8px; }

/* panels: same dark glass as the homepage */
.site-v2 .glow-card, .site-v2 .scope-card, .site-v2 .factor-item, .site-v2 .card, .site-v2 .project-stat,
.site-v2 .work-card, .site-v2 .activity-panel, .site-v2 .calc-panel, .site-v2 .consult-form, .site-v2 .compare-table{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--hx-panel);
  border:1px solid var(--hx-line); border-radius:var(--hx-r-lg); box-shadow:var(--hx-edge);
}

/* card grids */
.site-v2 .feature-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:16px; background:none; border:0; border-radius:0; overflow:visible; }
@media (min-width:700px){ .site-v2 .feature-grid:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); } } /* four cards: 2 x 2, no orphan */
.site-v2 .glow-card{ padding:clamp(26px, 3vw, 36px); overflow:hidden; }
.site-v2 .glow-card::before{ content:none; }
.site-v2 .glow-icon, .site-v2 .feature-icon{ width:40px; height:40px; border-radius:12px; background:none !important; border:1px solid var(--hx-line-strong); color:var(--hx-mint) !important; margin-bottom:28px; }
.site-v2 .glow-icon svg, .site-v2 .feature-icon svg{ width:20px; height:20px; }
.site-v2 .glow-card h4{ font-size:17px; line-height:1.35; color:#fff; margin-bottom:8px; }
.site-v2 .cards-header p a, .site-v2 .project-story-body a{ color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }
.site-v2 .glow-card p{ font-size:14.5px; line-height:1.6; }
.site-v2 .glow-card .card-price{ font-family:var(--font-display); font-size:clamp(24px, 2.2vw, 30px); font-weight:400; color:var(--text); margin:0 0 12px; }
.site-v2 .scope-grid, .site-v2 .factor-grid{ max-width:none; margin:0; gap:16px; }
.site-v2 .scope-grid.scope-grid-single{ max-width:760px; }
.site-v2 .scope-card{ padding:clamp(26px, 3vw, 36px); }
.site-v2 .scope-card h3{ color:#fff; }
.site-v2 .scope-card li::before{ color:var(--hx-mint); }
.site-v2 .factor-item{ padding:24px 26px; }
.site-v2 .factor-item h4{ color:#fff; }
.site-v2 .scope-card a, .site-v2 .feature-text a, .site-v2 .faq-item p a, .site-v2 .page-note a, .site-v2 .legal-content a{ color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }

/* feature rows become one clean list: icon | text, divided by hairlines */
.site-v2 .feature-row{ display:grid; grid-template-columns:56px minmax(0, 1fr); gap:28px; max-width:1200px; padding-top:36px; padding-bottom:36px; align-items:start; }   /* no divider line above (Rati, 2026-10-18) */
.site-v2 :not(.feature-row):not(.grid-section-tight) + .feature-row{ margin-top:var(--hx-space); }
.site-v2 .grid-section-tight + .feature-row{ margin-top:24px; }
.site-v2 .feature-row + :not(.feature-row){ }   /* the divider line that used to be here is removed (Rati, 2026-10-18) */
.site-v2 .feature-row .feature-icon{ margin:2px 0 0; }
.site-v2 .feature-text{ max-width:68ch; }
.site-v2 .feature-text h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px, 2.2vw, 28px); line-height:1.2; letter-spacing:-0.015em; color:#fff; margin-bottom:10px; }
html[lang="ka"] .site-v2 .feature-text h3{ line-height:1.35; letter-spacing:0; }
.site-v2 .feature-text p{ font-size:16px; line-height:1.65; }

/* FAQ: hairline accordion */
.site-v2 .faq-list{ max-width:900px; margin:0; gap:0; }
.site-v2 .faq-item{ background:none; border:0; border-top:1px solid var(--hx-line); border-radius:0; padding:0; }
.site-v2 .faq-item:last-child{ border-bottom:1px solid var(--hx-line); }
.site-v2 .faq-item summary{ padding:24px 0; font-size:17px; font-weight:500; }
.site-v2 .faq-item summary::after{ width:28px; height:28px; border:1px solid var(--hx-line-strong); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.site-v2 .faq-item[open] summary::after{ transform:rotate(180deg); }
.site-v2 .faq-item p{ font-size:15.5px; padding-bottom:24px; max-width:68ch; }

/* comparison table */
.site-v2 .compare-wrap{ max-width:none; }
.site-v2 .compare-table thead th{ background:rgba(255,255,255,.03); }
.site-v2 .compare-table th, .site-v2 .compare-table td{ border-bottom-color:var(--hx-line); padding:18px 22px; }

/* final call to action: a glass panel, heading left, button right */
.site-v2 .final-cta{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:20px 40px;
  max-width:none; margin:var(--hx-space) max(clamp(16px, 4vw, 32px), calc((100% - 1136px) / 2)) 0;
  padding:clamp(32px, 5vw, 64px) !important; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--hx-panel);
  border:1px solid var(--hx-line); border-radius:var(--hx-r-xl); box-shadow:var(--hx-edge);
}
.site-v2 .final-cta > h2{ grid-column:1; margin:0; font-size:clamp(28px, 3.6vw, 46px); line-height:1.08; letter-spacing:-0.025em; }
html[lang="ka"] .site-v2 .final-cta > h2{ font-size:clamp(24px, 3vw, 38px); line-height:1.25; letter-spacing:0; }
.site-v2 .final-cta > .btn, .site-v2 .final-cta > .hero-actions{ grid-column:2; grid-row:1; }
.site-v2 .final-cta > p, .site-v2 .final-cta > .page-note{ grid-column:1 / -1; margin:0; }

/* buttons inside pages: pills like the homepage (header untouched) */
.site-v2 main .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border-radius:999px; font-size:15px; font-weight:500; line-height:1.2; }
.site-v2 main .btn-primary{ background:#fff; color:#000; border-color:transparent; }
.site-v2 main .btn-primary:hover{ background:#e6e6e6; opacity:1; }
.site-v2 main .btn-ghost{ background:rgba(255,255,255,.06); border:1px solid var(--hx-line-strong); }

/* forms (support page, calculator lead) like the homepage form */
.site-v2 .consult-wrap{ max-width:760px; margin:0; text-align:left; }
.site-v2 .consult-form{ padding:clamp(24px, 3.5vw, 40px); }
.site-v2 .form-field input, .site-v2 .form-field select, .site-v2 .form-field textarea{ background:rgba(0,0,0,.4); border:1px solid var(--hx-line-strong); border-radius:12px; min-height:46px; }
.site-v2 .form-field input:focus, .site-v2 .form-field select:focus, .site-v2 .form-field textarea:focus{ border-color:rgba(255,255,255,.4); box-shadow:none; }
.site-v2 .form-field select{ padding-right:36px; text-overflow:ellipsis; }
.site-v2 .consult-form .btn{ justify-self:start; }
.site-v2 .form-success::before{ content:none; }
.site-v2 .form-success .success-icon{ background:none; border:1px solid var(--hx-mint); color:var(--hx-mint); box-shadow:none; }

/* legal pages: one readable column */
.site-v2 .legal-content{ max-width:1200px; padding-top:clamp(40px, 5vw, 64px); padding-bottom:0; }
.site-v2 .legal-content > *{ max-width:72ch; }
.site-v2 .legal-content h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px, 2.2vw, 28px); letter-spacing:-0.01em; color:#fff; margin:48px 0 14px; }
.site-v2 .legal-content p, .site-v2 .legal-content ul{ font-size:16px; line-height:1.75; }

/* project + work pages */
.site-v2 .project-stats-row{ gap:16px; }
.site-v2 .project-stat{ text-align:left; padding:24px 26px; }
.site-v2 .project-stat-label{ letter-spacing:0; text-transform:none; font-size:13px; font-weight:500; }
.site-v2 .project-stat-value{ font-size:clamp(24px, 2.4vw, 32px); }
.site-v2 .project-gallery-item, .site-v2 .project-hero-thumb{ border:1px solid var(--hx-line-strong); border-radius:14px; box-shadow:var(--hx-edge); }
.site-v2 .project-story{ max-width:900px; margin:0; }
.site-v2 .work-showcase{ text-align:left; }
.site-v2 a.work-card:hover{ border-color:var(--hx-line-strong); }
.site-v2 .work-tag{ color:#c9a6ff; letter-spacing:0; text-transform:none; font-weight:500; font-size:13px; }
.site-v2 .cards-footer{ align-items:flex-start; }

/* process timeline: in the page grid, steps as quiet numbered circles (no traffic-light colours) */
.site-v2 .panel-wrap{ max-width:1200px; margin:var(--hx-space) auto 0; padding:0 clamp(16px, 4vw, 32px); }
.site-v2 .activity-panel{ max-width:760px; padding:8px 8px 4px; }
.site-v2 .avatar{ background:none !important; border:1px solid var(--hx-line-strong); color:#fff !important; }
.site-v2 .activity-row:first-of-type .avatar, .site-v2 .av1{ border-color:var(--hx-mint); color:var(--hx-mint) !important; }
.site-v2 .activity-tag{ background:none; border:1px solid var(--hx-line); color:var(--text-faint); }
.site-v2 .dot-green{ box-shadow:none; }
.site-v2 .activity-text span{ white-space:normal; overflow:visible; text-overflow:clip; } /* step text wraps instead of being cut off with "…" */

/* "our work": the single project as a wide case card (screenshot left, text right) like the homepage */
.site-v2 .work-showcase.work-showcase-single{ grid-template-columns:minmax(0, 1fr); justify-content:stretch; }
.site-v2 .work-showcase-single .work-card{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:center; }
.site-v2 .work-showcase-single .work-thumb{ height:100%; min-height:320px; aspect-ratio:auto; }
.site-v2 .work-showcase-single .work-thumb img{ height:100%; object-fit:cover; object-position:top; }
.site-v2 .work-showcase-single .work-body{ padding:clamp(24px, 4vw, 48px); }
.site-v2 .work-showcase-single .work-body h4{ font-family:var(--font-display); font-weight:400; font-size:clamp(28px, 3vw, 40px); letter-spacing:-0.02em; margin-bottom:12px; }
@media (max-width:960px){ .site-v2 .work-showcase-single .work-card{ grid-template-columns:minmax(0, 1fr); } .site-v2 .work-showcase-single .work-thumb{ min-height:0; aspect-ratio:16/10; } }

/* price calculator: glass instead of the violet gradient, brand mint instead of the retired aqua */
.site-v2 .calc-section, .site-v2 .price-teaser{ --calc-accent:#6effae; }
.site-v2 .calc-section{ padding-top:clamp(40px, 5vw, 64px); }
.site-v2 .calc-opt, .site-v2 .calc-range, .site-v2 .calc-stepper, .site-v2 .calc-card{ background:rgba(0,0,0,.35); border-color:var(--hx-line-strong); border-radius:12px; }
.site-v2 .calc-group legend{ font-size:clamp(22px, 2.2vw, 28px); }
.site-v2 .calc-label{ letter-spacing:0; text-transform:none; font-size:13px; color:var(--text-faint); }
.site-v2 .calc-bar{ background:rgba(4,4,6,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top-color:var(--hx-line-strong); }
.site-v2 .calc-bar .btn{ border-radius:999px; }

/* phone */
@media (max-width:640px){
  .site-v2 .page-hero{ padding-top:48px; }
  .site-v2 .feature-row{ grid-template-columns:minmax(0, 1fr); gap:16px; padding-top:28px; padding-bottom:28px; }
  .site-v2 .final-cta{ grid-template-columns:minmax(0, 1fr); }
  .site-v2 .final-cta > .btn, .site-v2 .final-cta > .hero-actions{ grid-column:1; grid-row:auto; width:100%; }
  .site-v2 main .btn{ width:100%; }
  .site-v2 .header-actions .btn, .site-v2 .calc-bar .btn{ width:auto; }
  .site-v2 .faq-item summary{ font-size:16px; padding:20px 0; }
}
/* ===== [/SITE-V2] ===== */

/* ===== [CALC-CTA] 2026-10-15: "estimate your price in 5 minutes" card in the homepage contact section. Delete this block and the .hx-calc-cta links in both index files to remove it. ===== */
.hx-calc-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:32px; padding:20px 22px; border:1px solid var(--hx-line-strong); border-radius:var(--hx-r-lg); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%), var(--hx-panel); box-shadow:var(--hx-edge); color:inherit; transition:border-color .3s ease, translate .4s cubic-bezier(.2,.7,.2,1); }
.hx-calc-cta:hover{ border-color:rgba(255,255,255,.34); translate:0 -2px; }
.hx-calc-cta-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.hx-calc-cta-text strong{ font-size:16px; font-weight:600; line-height:1.4; color:#fff; }
.hx-calc-cta-text span{ font-size:14px; line-height:1.55; color:var(--text-dim); }
.hx-calc-cta-go{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--hx-line-strong); color:var(--hx-mint); transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.hx-calc-cta-go svg{ width:18px; height:18px; }
.hx-calc-cta:hover .hx-calc-cta-go{ background:#fff; color:#000; border-color:#fff; }
@media (prefers-reduced-motion: reduce){ .hx-calc-cta:hover{ translate:none; } }
/* ===== [/CALC-CTA] ===== */

/* ===== [CALC-SEND] 2026-10-15: the lead form is the last step of the calculator, not a separate section.
   Desktop: options, then the form, in the left column; the sticky price panel stays beside both.
   Phone: options, price panel, form. ===== */
.calc-send{ padding:clamp(22px, 3vw, 32px); border:1px solid var(--hx-line-strong, rgba(255,255,255,.16)); border-radius:var(--hx-r-lg, 20px); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--hx-panel, #08090c); box-shadow:var(--hx-edge, inset 0 1px 0 rgba(255,255,255,.07)); scroll-margin-top:96px; }
.calc-send h3{ font-family:var(--font-display); font-size:clamp(24px, 3vw, 30px); font-weight:400; line-height:1.2; letter-spacing:-0.015em; color:#fff; margin:0 0 10px; }
html[lang="ka"] .calc-send h3{ line-height:1.35; letter-spacing:0; }
.calc-send > p{ font-size:15px; line-height:1.6; color:var(--text-dim); margin:0 0 22px; max-width:60ch; }
.site-v2 .calc-send .consult-form{ background:none; border:0; box-shadow:none; padding:0; gap:16px; }
.calc-send .form-success{ padding:8px 0 0; }
.site-v2 main .calc-panel-cta{ display:none; } /* phones use the bottom bar instead */
.calc-after-wide{ max-width:none; margin-top:var(--hx-space, 96px); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:14px 16px; }
.calc-after-wide h2, .calc-after-wide .calc-hint{ grid-column:1 / -1; }
@media (min-width:960px){
  .calc-layout{ grid-template-columns:minmax(0,1fr) 390px; grid-template-areas:"form side" "send side"; gap:32px 48px; align-items:start; }
  .calc-form{ grid-area:form; }
  .calc-side{ grid-area:side; position:sticky; top:96px; }
  .calc-send{ grid-area:send; }
  .site-v2 main .calc-panel-cta{ display:inline-flex; align-self:stretch; width:100%; }
}
@media (max-width:420px){ .calc-send .form-row{ grid-template-columns:minmax(0,1fr); } .calc-send{ padding:20px 18px 22px; } }
/* ===== [/CALC-SEND] ===== */

/* ===== [FX-TEXT] 2026-10-16: the random-character background layer (created by home-motion.js when the body has the class "fx-text"). Off = remove the class. ===== */
.fx-text-layer{ position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
.fx-text-layer.is-ready{ opacity:1; }
.fx-portrait-flow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }   /* [FX-IOS] the photo on touch screens */
.hx-pointer{ position:relative; }
@media (prefers-reduced-motion: reduce){ .fx-text-layer{ transition:none; } }
@media (prefers-contrast: more){ .fx-text-layer{ display:none; } }
/* the footer has no background of its own: the text field and the page colour stay the same all the way down (Rati 2026-10-16) */
/* the footer is frosted glass, like the header once the page is scrolled (Rati 2026-10-16) */
.fx-text .site-footer{ background:rgba(16,16,22,.72); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); }
@media (prefers-reduced-transparency: reduce){ .fx-text .site-footer{ background:#0c0b12; -webkit-backdrop-filter:none; backdrop-filter:none; } }
/* ===== [/FX-TEXT] ===== */

/* ---------- [BRAND-FONTS] headings and code-like text (2026-10-17, Rati: the portfolio page's type on every page) ----------
   Headings in heavy FiraGO at the font's normal letter spacing (Rati: tighter spacing looked too close); small labels in
   Fira Code. Placed last so it wins over the older serif heading rules. */
h1, h2, .hx-title, .hx-h2{ font-family:var(--font-display); font-weight:800 !important; letter-spacing:0 !important; }
h3, h4{ font-family:var(--font-display); font-weight:700 !important; letter-spacing:0 !important; }
.hx-eyebrow, .site-v2 .page-hero .badge, .dev-stack-label, .pill{ font-family:var(--font-code); letter-spacing:.02em; }