/* ============================================================
   56watt — implementation of the "56watt v2" design concept
   Dark, glassy, gradient-accent single-page agency site.
   One stylesheet serves both EN (ltr) and AR (rtl) pages via
   logical properties and the [dir="rtl"] hooks below.
   ============================================================ */

:root{
  --bg:#050507;
  --ink:#EDEDEA;
  --ink-soft:#DCDCD8;
  --ink-mid:#CFCFCB;
  --mut-1:#9B9BA3;
  --mut-2:#8E8E96;
  --mut-3:#7A7A82;
  --mut-4:#6E6E76;
  --mut-5:#5E5E66;
  --mut-6:#4E4E56;
  --violet:#B7A6FF;
  --blue:#8FD0FF;
  --pink:#E0B8FF;
  --paper:#F2F2EF;
  --grad:linear-gradient(95deg,var(--blue),var(--violet));
  --track:-0.03em;      /* heading letter-spacing (EN) */
  --maxw:1500px;
}
[dir="rtl"]{ --track:0 }  /* Arabic never gets negative tracking */

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip; min-height:100vh;
}
a{ color:var(--ink); text-decoration:none; transition:color .2s }
a:hover{ color:var(--violet) }
::selection{ background:var(--violet); color:var(--bg) }
h1,h2,h3,p{ margin:0 }
button{ font-family:inherit }

@keyframes drift{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-24px)} }
@keyframes pulseGlow{ 0%,100%{opacity:.45} 50%{opacity:.9} }

/* ---------- shared bits ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto }
.label{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:18px }
.h2{ font-size:clamp(38px,4vw,64px); font-weight:600; line-height:1.08; letter-spacing:var(--track); text-wrap:balance }
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:var(--violet); -webkit-text-fill-color:transparent;
  width:fit-content;
}
.pill{ border-radius:100px }
.btn-solid{
  background:var(--paper); color:var(--bg); font-weight:700;
  border-radius:100px; transition:background .2s;
}
.btn-solid:hover{ background:#FFFFFF; color:var(--bg) }
.btn-line{
  border:1px solid rgba(255,255,255,.14); color:var(--ink); font-weight:500;
  border-radius:100px; transition:border-color .2s;
}
.btn-line:hover{ border-color:var(--violet); color:var(--ink) }
/* mirrored glyph arrows (→ ↗) flip direction on the RTL page */
.mirror{ display:inline-block }
[dir="rtl"] .mirror{ transform:scaleX(-1) }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:76px;
  background:rgba(5,5,7,.55);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.logo{ font-size:21px; font-weight:700; letter-spacing:-.02em }
.logo b{ color:var(--violet); font-weight:inherit }
.nav-links{ display:flex; align-items:center; gap:36px; font-size:14px }
.nav-links a{ color:var(--mut-2) }
.nav-links a:hover{ color:var(--violet) }
.nav-actions{ display:flex; align-items:center; gap:10px }
.lang-btn{
  border:1px solid rgba(255,255,255,.14); color:var(--ink);
  font-size:13px; font-weight:600; padding:9px 18px; border-radius:100px;
  transition:border-color .2s,color .2s; cursor:pointer; background:none;
}
.lang-btn:hover{ border-color:var(--violet); color:var(--violet) }
.nav-cta{
  background:var(--paper); color:var(--bg); font-size:13px; font-weight:700;
  padding:10px 22px; border-radius:100px; transition:background .2s;
}
.nav-cta:hover{ background:#FFFFFF; color:var(--bg) }

/* ---------- hero ---------- */
.hero{ position:relative; padding:220px 7vw 140px; max-width:var(--maxw); margin:0 auto }
.orb{ position:absolute; border-radius:50%; pointer-events:none }
.orb--1{
  top:-120px; inset-inline-start:-220px; width:800px; height:800px;
  background:radial-gradient(circle,rgba(120,190,255,.07),transparent 62%);
  animation:drift 14s ease-in-out infinite;
}
.orb--2{
  top:180px; inset-inline-end:-260px; width:700px; height:700px;
  background:radial-gradient(circle,rgba(167,139,250,.08),transparent 62%);
  animation:drift 18s ease-in-out infinite reverse;
}
.hero-inner{ position:relative; display:flex; flex-direction:column; gap:36px; max-width:1050px }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--mut-2);
  border:1px solid rgba(255,255,255,.09); border-radius:100px; padding:9px 18px; width:fit-content;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--violet); display:inline-block; animation:pulseGlow 3s infinite }
.hero h1{
  font-size:clamp(52px,6.2vw,102px); line-height:1.02; font-weight:600;
  letter-spacing:var(--track); text-wrap:balance;
}
.hero-accent{
  background:linear-gradient(95deg,#8FD0FF 5%,#B7A6FF 60%,#E0B8FF 95%);
  -webkit-background-clip:text; background-clip:text;
  color:var(--violet); -webkit-text-fill-color:transparent;
}
.hero-sub{ font-size:19px; line-height:1.7; color:var(--mut-1); max-width:640px; text-wrap:pretty }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px }
.hero-ctas .btn-solid{ font-size:15px; padding:17px 34px }
.hero-ctas .btn-line{ font-size:15px; padding:17px 34px }

/* connected-system strip */
.sys-strip{
  position:relative; margin-top:110px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
  border-radius:24px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:36px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap;
}
.sys-node{ display:flex; align-items:center; gap:8px; flex:1; min-width:150px }
.sys-node-txt{ flex:1; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center }
.sys-tag{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-4) }
.sys-label{ font-size:16px; font-weight:600; color:var(--ink-soft) }
.sys-arrow{ color:#5A5A62; font-size:15px }
.trust{ display:flex; gap:36px; flex-wrap:wrap; margin-top:28px; justify-content:center }
.trust div{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--mut-2) }
.trust .dot{ width:5px; height:5px; background:var(--blue); animation:none }

/* ---------- credentials strip ---------- */
.cred{ border-top:1px solid rgba(255,255,255,.05); padding:56px 7vw }
.cred-inner{ display:flex; flex-direction:column; gap:26px }
.cred-label{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut-4); text-align:center }
.cred-names{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px 52px }
.cred-names span{ font-size:15.5px; font-weight:500; letter-spacing:.05em; color:var(--mut-5); white-space:nowrap }

/* ---------- problem ---------- */
.problem{ padding:190px 7vw 170px; max-width:var(--maxw); margin:0 auto }
.problem .h2{ margin-bottom:100px; max-width:980px; line-height:1.1 }
.problem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px }
.col-label{
  border-top:1px solid rgba(255,255,255,.12); padding-top:26px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut-4); margin-bottom:34px;
}
.col-label--good{ border-top-color:var(--violet); color:var(--violet) }
.problem-list{ display:flex; flex-direction:column; gap:20px }
.problem-list--bad div{
  font-size:17px; color:var(--mut-3); line-height:1.55;
  text-decoration:line-through; text-decoration-color:rgba(255,255,255,.18); text-decoration-thickness:1px;
}
.problem-list--good div{ font-size:17px; color:var(--ink-soft); line-height:1.55 }

/* ---------- services ---------- */
.services{ padding:170px 7vw; border-top:1px solid rgba(255,255,255,.05) }
.services-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:90px }
.svc-row{
  display:grid; grid-template-columns:90px 1.1fr 1.3fr 50px; gap:32px; align-items:baseline;
  padding:44px 8px; border-top:1px solid rgba(255,255,255,.08); transition:background .25s;
}
.svc-row:hover{ background:rgba(255,255,255,.02) }
.svc-num{ font-size:14px; color:var(--mut-4); font-weight:500 }
.svc-title{ font-size:clamp(22px,1.8vw,30px); font-weight:600; line-height:1.2 }
.svc-desc{ font-size:15.5px; color:var(--mut-1); line-height:1.65; text-wrap:pretty }
.svc-arrow{ font-size:20px; color:var(--violet); text-align:end }

/* ---------- AI ---------- */
.ai{
  position:relative; padding:210px 7vw; overflow:hidden;
  background:linear-gradient(180deg,#050507 0%,#0A0A14 45%,#050507 100%);
}
.ai-glow{
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  width:1100px; height:750px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(143,208,255,.08),rgba(167,139,250,.05) 45%,transparent 68%);
  pointer-events:none; animation:pulseGlow 9s ease-in-out infinite;
}
.ai-inner{ position:relative }
.ai-head{ text-align:center; margin-bottom:110px; display:flex; flex-direction:column; align-items:center; gap:26px }
.ai-head .label{ margin-bottom:0 }
.ai-head .h2{ font-size:clamp(42px,4.6vw,76px); line-height:1.05; max-width:900px }
.ai-sub{ font-size:18px; color:var(--mut-1); line-height:1.7; max-width:640px; text-wrap:pretty }
.ai-grid{ display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center }
.chat{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:28px;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:32px; display:flex; flex-direction:column; gap:16px;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.chat-head{ display:flex; align-items:center; gap:10px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.06) }
.chat-head .dot{ width:8px; height:8px; background:var(--blue); animation:pulseGlow 2.5s infinite }
.chat-head span:last-child{ font-size:13px; color:var(--mut-2) }
.msg{ padding:13px 18px; font-size:14.5px; max-width:82%; line-height:1.55 }
.msg--bot{ align-self:flex-start; background:rgba(255,255,255,.06); border-radius:16px 16px 16px 5px; color:var(--ink-mid) }
.msg--user{
  align-self:flex-end;
  background:linear-gradient(120deg,rgba(143,208,255,.14),rgba(183,166,255,.14));
  border:1px solid rgba(183,166,255,.28); border-radius:16px 16px 5px 16px; color:#E2DBFF;
}
.chat-input{ display:flex; gap:10px; margin-top:8px }
.chat-field{ flex:1; border:1px solid rgba(255,255,255,.09); border-radius:100px; padding:13px 20px; font-size:13.5px; color:var(--mut-5) }
.chat-send{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(120deg,var(--blue),var(--violet));
  display:flex; align-items:center; justify-content:center; color:var(--bg); font-weight:700;
}
.ai-list div{ display:flex; align-items:center; gap:18px; padding:24px 6px; border-bottom:1px solid rgba(255,255,255,.07) }
.ai-list .num{ font-size:12px; color:var(--blue); font-weight:600; min-width:26px }
.ai-list .txt{ font-size:17px; color:var(--ink-soft); line-height:1.4 }

/* ---------- process ---------- */
.process{ padding:180px 7vw; max-width:var(--maxw); margin:0 auto }
.process .h2{ margin-bottom:100px; max-width:760px }
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:44px }
.step{ display:flex; flex-direction:column; gap:18px; border-top:1px solid rgba(255,255,255,.1); padding-top:26px }
.step-num{ font-size:14px; font-weight:600 }
.step-title{ font-size:19px; font-weight:600; line-height:1.25 }
.step-desc{ font-size:14px; color:var(--mut-2); line-height:1.65; text-wrap:pretty }

/* ---------- industries + regions ---------- */
.markets{ padding:170px 7vw; border-top:1px solid rgba(255,255,255,.05) }
.markets-grid{ display:grid; grid-template-columns:1fr 1fr; gap:120px }
.markets .h2{ font-size:clamp(30px,2.6vw,42px); line-height:1.14; margin-bottom:60px }
.chips{ display:flex; flex-wrap:wrap; gap:12px }
.chips span{
  border:1px solid rgba(255,255,255,.1); border-radius:100px; padding:13px 24px;
  font-size:14.5px; color:var(--ink-mid); transition:border-color .2s;
}
.chips span:hover{ border-color:var(--violet) }
.region-row{ display:flex; align-items:center; justify-content:space-between; padding:22px 4px; border-top:1px solid rgba(255,255,255,.08) }
.region-left{ display:flex; align-items:center; gap:20px }
.region-code{ font-size:12px; font-weight:600; color:var(--blue); letter-spacing:.1em; min-width:36px }
.region-name{ font-size:17px; font-weight:500 }
.region-note{ font-size:13.5px; color:var(--mut-4) }

/* ---------- case studies ---------- */
.work{ padding:180px 7vw; max-width:var(--maxw); margin:0 auto }
.work .h2{ margin-bottom:16px; max-width:960px }
.work-note{ font-size:13.5px; color:var(--mut-4); margin-bottom:90px }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch }
.case-card{
  border:1px solid rgba(255,255,255,.08); border-radius:26px; padding:40px 36px;
  display:flex; flex-direction:column; gap:22px; transition:border-color .25s;
}
.case-card:hover{ border-color:rgba(183,166,255,.4) }
.case-tag{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut-4) }
.case-title{ font-size:22px; font-weight:600; line-height:1.3 }
.case-body{ font-size:14.5px; color:var(--mut-2); line-height:1.65 }
.case-body b{ color:var(--ink-mid); font-weight:400 }
.case-metric{
  margin-top:auto; padding-top:22px; border-top:1px solid rgba(255,255,255,.07);
  font-size:17px; font-weight:600;
}

/* ---------- web showcase ---------- */
.web{ padding:170px 7vw; border-top:1px solid rgba(255,255,255,.05) }
.web .h2{ margin-bottom:90px; max-width:980px }
.web-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:stretch }
.browser{
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08);
  border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
}
.browser-bar{ display:flex; gap:6px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06) }
.browser-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16) }
.browser-body{ padding:44px; display:flex; flex-direction:column; gap:18px; flex:1 }
.sk{ background:rgba(255,255,255,.06); border-radius:5px; height:11px }
.sk--title{ width:50%; height:24px; background:rgba(255,255,255,.14); border-radius:7px }
.sk--l1{ width:75% }
.sk--l2{ width:64% }
.sk--btn{ width:140px; height:38px; background:var(--grad); border-radius:100px; margin-top:10px }
.sk-cards{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:20px }
.sk-cards div{ height:76px; background:rgba(255,255,255,.045); border-radius:14px }
.web-caption{ padding:18px 24px; border-top:1px solid rgba(255,255,255,.06); font-size:14px; color:var(--mut-2) }
.phone-card{
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:24px;
  padding:36px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:24px;
}
.phone{
  width:170px; border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:16px 14px;
  display:flex; flex-direction:column; gap:10px; background:rgba(0,0,0,.35);
}
.phone .bar{ height:7px; background:rgba(255,255,255,.06); border-radius:3px }
.phone .bar--head{ width:38%; height:9px; background:rgba(255,255,255,.14); border-radius:4px }
.phone .bar--hero{
  height:52px; background:linear-gradient(120deg,rgba(143,208,255,.12),rgba(183,166,255,.12));
  border:1px solid rgba(183,166,255,.22); border-radius:12px;
}
.phone .bar--btn{ height:30px; background:var(--grad); border-radius:100px; margin-top:6px }
.phone-caption{ font-size:14px; color:var(--mut-2) }
.web-chips{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap }
.web-chips div{ border:1px solid rgba(255,255,255,.09); border-radius:100px; padding:12px 24px; font-size:13.5px; color:var(--mut-2) }

/* ---------- SEO ---------- */
.seo{
  padding:180px 7vw; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:110px; align-items:center;
}
.seo .h2{ font-size:clamp(38px,4vw,60px); margin-bottom:24px }
.seo-sub{ font-size:17.5px; color:var(--mut-1); line-height:1.7; margin-bottom:44px; text-wrap:pretty }
.seo .chips{ gap:11px }
.seo .chips span{ padding:10px 20px; font-size:13.5px }
.seo-card{
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:26px;
  padding:34px; display:flex; flex-direction:column; gap:26px;
}
.seo-card-head{ display:flex; justify-content:space-between }
.seo-card-head span:first-child{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut-2) }
.seo-card-head span:last-child{ font-size:12px; color:var(--mut-4) }
.seo-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.seo-stat-num{ font-size:30px; font-weight:600 }
.seo-stat-lbl{ font-size:12.5px; color:var(--mut-4); margin-top:4px }
.seo-bars{ display:flex; align-items:flex-end; gap:6px; height:90px }
.seo-bars div{ flex:1; border-radius:4px }
.seo-ranks{ display:flex; flex-direction:column; gap:14px; border-top:1px solid rgba(255,255,255,.06); padding-top:22px }
.seo-rank{ display:flex; justify-content:space-between; font-size:14px }
.seo-rank span:first-child{ color:var(--ink-mid) }
.seo-rank span:last-child{ color:var(--violet); font-weight:600 }

/* ---------- video ---------- */
.video{ padding:170px 7vw; border-top:1px solid rgba(255,255,255,.05) }
.video .h2{ margin-bottom:22px; max-width:820px }
.video-sub{ font-size:17.5px; color:var(--mut-1); max-width:680px; line-height:1.7; margin-bottom:80px; text-wrap:pretty }
.video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:center }
.reels{ display:flex; gap:14px }
.reel{ flex:1; aspect-ratio:9/14; border-radius:18px }
.reel--plain{
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center; transform:translateY(22px);
}
.reel-play{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(120deg,var(--blue),var(--violet));
  display:flex; align-items:center; justify-content:center; color:var(--bg); font-size:15px;
}
.reel--tint{
  background:linear-gradient(170deg,rgba(143,208,255,.08),rgba(183,166,255,.04));
  border:1px solid rgba(183,166,255,.22);
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px; gap:9px;
}
.reel--tint .cap{ height:9px; background:rgba(255,255,255,.22); border-radius:4px; width:82% }
.reel--tint .cap+.cap{ background:rgba(255,255,255,.12); width:55% }
.reel-chip{
  border:1px solid rgba(183,166,255,.5); color:var(--violet); border-radius:100px;
  padding:8px 16px; font-size:12.5px; font-weight:600;
}
.video-list div{ display:flex; align-items:baseline; gap:20px; padding:19px 4px; border-bottom:1px solid rgba(255,255,255,.07) }
.video-list .vt{ font-size:15.5px; font-weight:600; min-width:180px }
.video-list .vd{ font-size:13.5px; color:var(--mut-4); line-height:1.5 }

/* ---------- packages ---------- */
.packages{ padding:180px 7vw; max-width:var(--maxw); margin:0 auto }
.packages .h2{ margin-bottom:90px; max-width:820px }
.pkg-card{
  border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:44px 40px;
  display:flex; flex-direction:column; gap:24px; transition:border-color .25s;
}
.pkg-card:hover{ border-color:rgba(183,166,255,.45) }
.pkg-name{ font-size:26px; font-weight:600 }
.pkg-who{ font-size:15px; color:var(--mut-1); line-height:1.65; min-height:50px }
.pkg-items{ display:flex; flex-direction:column; gap:14px; border-top:1px solid rgba(255,255,255,.07); padding-top:24px }
.pkg-items div{ display:flex; gap:12px; font-size:14.5px; color:var(--ink-mid); line-height:1.5 }
.pkg-items b{ color:var(--blue); font-weight:400 }
.pkg-cta{
  margin-top:auto; text-align:center; border:1px solid rgba(255,255,255,.16); color:var(--ink);
  font-weight:600; font-size:14px; padding:15px; border-radius:100px; transition:all .2s;
}
.pkg-cta:hover{ background:var(--paper); color:var(--bg); border-color:var(--paper) }

/* ---------- about ---------- */
.about{ padding:170px 7vw; border-top:1px solid rgba(255,255,255,.05) }
.about-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:110px; align-items:center }
.about .h2{ font-size:clamp(34px,3.4vw,54px); line-height:1.12; margin-bottom:28px }
.about p{ font-size:17px; color:var(--mut-1); line-height:1.75; text-wrap:pretty }
.about p+p{ margin-top:22px }
.about-side{ display:flex; flex-direction:column; gap:16px }
.about-card{ border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:30px }
.about-card-label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut-2); margin-bottom:20px }
.about-chips{ display:flex; flex-wrap:wrap; gap:10px }
.about-chips span{
  font-size:13px; font-weight:500; color:var(--mut-1);
  border:1px solid rgba(255,255,255,.09); border-radius:100px; padding:7px 15px;
}
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.about-stat{ border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:28px }
.about-stat-num{ font-size:32px; font-weight:600 }
.about-stat-lbl{ font-size:13.5px; color:var(--mut-2); line-height:1.55; margin-top:6px }

/* ---------- FAQ ---------- */
.faq{ padding:170px 7vw; border-top:1px solid rgba(255,255,255,.05) }
.faq-inner{ max-width:880px; margin:0 auto }
.faq .label{ text-align:center }
.faq .h2{ font-size:clamp(34px,3.2vw,50px); text-align:center; margin-bottom:80px }
.faq-item{ border-top:1px solid rgba(255,255,255,.08) }
.faq-q{
  width:100%; background:none; border:none; color:var(--ink);
  font-size:17px; font-weight:500; padding:26px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  cursor:pointer; text-align:start;
}
.faq-icon{ color:var(--violet); font-size:22px; flex-shrink:0; font-weight:400 }
.faq-a{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .3s ease,opacity .3s ease }
.faq-item.open .faq-a{ grid-template-rows:1fr; opacity:1 }
.faq-a-inner{ overflow:hidden }
.faq-a-inner p{
  padding:0 4px 28px; font-size:15px; color:var(--mut-1); line-height:1.75;
  max-width:760px; text-wrap:pretty;
}

/* ---------- final CTA ---------- */
.cta{ position:relative; padding:220px 7vw; text-align:center; overflow:hidden }
.cta-glow{
  position:absolute; bottom:-340px; left:50%; transform:translateX(-50%);
  width:1100px; height:700px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(167,139,250,.1),rgba(143,208,255,.05) 50%,transparent 70%);
  pointer-events:none;
}
.cta-inner{ position:relative; max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:32px }
.cta .h2{ font-size:clamp(42px,5vw,80px); line-height:1.04 }
.cta-sub{ font-size:18px; color:var(--mut-1); line-height:1.7; max-width:620px; text-wrap:pretty }
.cta-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px }
.cta-btns .btn-solid{ font-size:16px; padding:19px 40px }
.cta-btns .btn-line{ font-size:16px; padding:19px 40px }

/* ---------- footer ---------- */
.footer{ border-top:1px solid rgba(255,255,255,.06); padding:80px 7vw 48px }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px }
.footer-brand{ display:flex; flex-direction:column; gap:18px }
.footer-logo{ font-size:24px; font-weight:700 }
.footer-logo b{ color:var(--violet); font-weight:inherit }
.footer-tag{ font-size:14px; color:var(--mut-4); line-height:1.7; max-width:300px }
.footer-col{ display:flex; flex-direction:column; gap:13px; font-size:14px; color:var(--mut-2) }
.footer-col a{ color:var(--mut-2) }
.footer-col a:hover{ color:var(--violet) }
.footer-col-head{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut-5); margin-bottom:6px }
.footer-social{ display:flex; gap:16px; margin-top:6px }
.footer-social a{ color:var(--mut-5); font-size:13px }
.footer-bottom{
  max-width:var(--maxw); margin:56px auto 0; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.05);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:var(--mut-6);
}

/* ============================================================
   Responsive — the concept is desktop-first; these collapse the
   fixed grids for tablet and phone widths.
   ============================================================ */
@media (max-width:1100px){
  .problem-grid{ grid-template-columns:1fr; gap:70px }
  .ai-grid{ grid-template-columns:1fr; gap:60px }
  .steps{ grid-template-columns:repeat(2,1fr); gap:36px }
  .markets-grid{ grid-template-columns:1fr; gap:90px }
  .cards-3{ grid-template-columns:1fr; gap:22px }
  .web-grid{ grid-template-columns:1fr }
  .seo{ grid-template-columns:1fr; gap:60px }
  .video-grid{ grid-template-columns:1fr; gap:70px }
  .about-grid{ grid-template-columns:1fr; gap:60px }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px }
}
@media (max-width:860px){
  .nav{ padding:0 20px }
  .nav-links{ display:none }
  .hero{ padding:150px 6vw 90px }
  .sys-strip{ padding:28px 24px }
  .sys-arrow{ display:none }
  .problem,.services,.ai,.process,.markets,.work,.web,.seo,.video,.packages,.about,.faq,.cta{ padding-top:100px; padding-bottom:100px }
  .problem .h2,.process .h2,.ai-head,.services-head,.web .h2,.packages .h2{ margin-bottom:60px }
  .work-note{ margin-bottom:56px }
  .svc-row{ grid-template-columns:1fr; gap:10px; padding:32px 4px }
  .svc-arrow{ display:none }
  .steps{ grid-template-columns:1fr }
  .video-list .vt{ min-width:120px }
  .faq .h2{ margin-bottom:48px }
  .footer{ padding:64px 6vw 40px }
  .footer-grid{ grid-template-columns:1fr; gap:36px }
  .footer-bottom{ flex-direction:column }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}