/* ============================================================
   SOSNEXO — style.css
   ============================================================ */

/* ── CUSTOM FONTS ────────────────────────────────────────── */
@font-face { font-family:'sosnexoHeadingByTheNumb'; src:url('../fonts/FREEFATFONT-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'sosnexoHowItWorksNumb';   src:url('../fonts/Pouler.woff2') format('woff2');              font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'sosnexoTitles';            src:url('../fonts/Pouler.woff2') format('woff2');              font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'sosnexoTheBusin';          src:url('../fonts/Obrazec-2.woff2') format('woff2');           font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'sosnexoLogo';              src:url('../fonts/Aukera.woff2') format('woff2');               font-weight:400; font-style:normal; font-display:swap; }

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  --xs:8px; --sm:13px; --md:21px; --lg:34px; --xl:55px; --xxl:89px;
  --ease:cubic-bezier(.4,0,.2,1);
  /* Cross-theme bg values exposed as variables for select hover trick */
  --bg-dark:#09080f;
  --bg-light:#dcd8f5;
}
[data-theme="dark"] {
  --bg:#09080f; --fg:#e8e6f0;
  --fg-soft:rgba(232,230,240,0.70); --fg-muted:rgba(232,230,240,0.40);
  --accent:#9d9bcf; --accent-dim:#5a5899;
  --div:rgba(157,155,207,0.09);
  --card-bg:rgba(255,255,255,0.028); --card-hover:rgba(157,155,207,0.05);
  --field-bg:rgba(255,255,255,0.038); --field-bdr:rgba(157,155,207,0.16);
  --hdr-bg:rgba(9,8,15,0.72);
  --ai-bg:rgba(157,155,207,0.06); --ai-bdr:rgba(157,155,207,0.18);
  --select-hover-bg:#dcd8f5; --select-hover-fg:#18182c;
  /* Lamp — site accent palette (indigo/purple), lamp ON */
  --lamp-shade:#3a3880;
  --lamp-shade-hi:#5a57b0;
  --lamp-arm-color:#7a78b8;
  --lamp-arm-hi:#9d9bcf;
  --lamp-bead-color:#9d9bcf;
  --lamp-bead-hi:#c0bede;
  --lamp-glow-fill:rgba(157,155,207,0.22);
}
[data-theme="light"] {
  --bg:#dcd8f5; --fg:#18182c;
  --fg-soft:rgba(24,24,44,0.72); --fg-muted:rgba(24,24,44,0.45);
  --accent:#4a4899; --accent-dim:#353078;
  --div:rgba(74,72,153,0.12);
  --card-bg:rgba(255,255,255,0.55); --card-hover:rgba(74,72,153,0.06);
  --field-bg:rgba(255,255,255,0.75); --field-bdr:rgba(74,72,153,0.18);
  --hdr-bg:rgba(220,216,245,0.82);
  --ai-bg:rgba(74,72,153,0.06); --ai-bdr:rgba(74,72,153,0.16);
  --select-hover-bg:#09080f; --select-hover-fg:#e8e6f0;
  /* Lamp — same palette, no glow (lamp OFF) */
  --lamp-shade:#353078;
  --lamp-shade-hi:#4a4899;
  --lamp-arm-color:#5a5899;
  --lamp-arm-hi:#7a78b8;
  --lamp-bead-color:#7a78b8;
  --lamp-bead-hi:#9d9bcf;
  --lamp-glow-fill:rgba(74,72,153,0);
}

/* ── RESET & BASE ─────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  background:var(--bg);color:var(--fg);
  transition:background .5s var(--ease),color .5s var(--ease);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ── HEADER ──────────────────────────────────────────────── */
header{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:500;display:flex;align-items:center;gap:16px;
  /* Padding reduced vertically to keep height driven by content, not lamp */
  padding:6px 18px;
  background:var(--hdr-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--div);border-radius:50px;white-space:nowrap;
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.hdr-logo{font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.hdr-sep{width:1px;height:14px;background:var(--div);flex-shrink:0}

/* ── LANGUAGE SELECT ─────────────────────────────────────── */
/*
  CHANGE 1 — hover highlight uses OPPOSITE theme's background:
  Dark mode hover → light bg (#dcd8f5) with dark text
  Light mode hover → dark bg (#06070f) with light text

  Native <option> hover is OS-controlled and cannot be styled with CSS
  in most browsers. We use a JS-powered custom dropdown instead —
  see .lang-custom-* classes below.
*/
.lang-select-wrap{position:relative;display:flex;align-items:center}

/* Hidden native select — used only as data source, not rendered */
.lang-select{display:none}

/* Custom dropdown trigger button */
.lang-trigger{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:600;
  color:var(--fg);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--div);
  border-radius:20px;
  padding:4px 20px 4px 10px;
  cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:background .2s,border-color .2s;
  user-select:none;-webkit-user-select:none;
  position:relative;
}
[data-theme="light"] .lang-trigger{background:rgba(0,0,0,0.04)}
.lang-trigger:hover{background:var(--card-hover);border-color:var(--accent)}
.lang-trigger-arrow{
  font-size:8px;color:var(--fg-muted);
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  transition:transform .2s;pointer-events:none;
}
.lang-select-wrap.open .lang-trigger-arrow{transform:translateY(-50%) rotate(180deg)}

/* Dropdown panel */
.lang-dropdown{
  display:none;
  position:absolute;top:calc(100% + 6px);left:0;
  min-width:100%;
  background:var(--hdr-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--div);
  border-radius:12px;
  overflow:hidden;
  z-index:600;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.lang-select-wrap.open .lang-dropdown{display:block}

/* Individual language option */
.lang-option{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:600;
  color:var(--fg);
  padding:7px 14px;
  cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
/* CHANGE 1 CORE: hover = opposite theme background */
.lang-option:hover{
  background:var(--select-hover-bg);
  color:var(--select-hover-fg);
}
.lang-option.selected{
  color:var(--accent);
}

/* ── FLAG WRAPPER — equal size for emoji and SVG flags ───── */
.lang-flag-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:14px;flex-shrink:0;
  overflow:hidden;
  /* Emoji flags vary wildly in size across OS — constrain them */
  font-size:0;line-height:0;
}
/* The emoji character inside gets its own size */
.lang-flag-wrap span,
.lang-flag-wrap > *:not(svg){ font-size:14px;line-height:1; }
/* SVG flag fills the wrapper exactly */
.lang-flag-wrap svg{ display:block;width:20px;height:14px;flex-shrink:0; }

/* ── BANKER LAMP ─────────────────────────────────────────── */
/*
  True banker lamp shape (matches reference photos):
  - Wide flat-bottomed shade tilted slightly forward
  - Angled arm from joint to shade bracket
  - Vertical pole with decorative knob sphere
  - Tiered base rings
  - Chain exits from UNDER shade bottom, hangs down visibly

  Colors: site accent palette (indigo/purple).
  Dark mode = lamp ON (glow visible). Light mode = lamp OFF (no glow).
  ViewBox 0 0 40 52 — lamp left-anchored, shade overhangs right.
*/
.lamp-switch{
  position:relative;cursor:pointer;
  width:32px;height:44px;
  flex-shrink:0;
  user-select:none;-webkit-user-select:none;
}
.lamp-svg{ width:32px;height:44px;overflow:visible; }

/* Glow — soft accent ellipse under shade, dark=on only */
.lamp-glow{
  fill:var(--lamp-glow-fill);
  filter:blur(5px);pointer-events:none;
  transition:fill .5s;
}
/* Base rings */
.lamp-base-outer{ fill:var(--lamp-arm-color);stroke:var(--lamp-arm-hi);stroke-width:0.7;transition:fill .4s,stroke .4s; }
.lamp-base-mid{   fill:var(--lamp-arm-hi);   transition:fill .4s; }
.lamp-base-inner{ fill:var(--lamp-arm-color); transition:fill .4s; }
/* Pole */
.lamp-pole{ stroke:var(--lamp-arm-color);stroke-width:1.8;stroke-linecap:round;transition:stroke .4s; }
/* Decorative knob sphere at pole top (joint) */
.lamp-knob-sphere{ fill:var(--lamp-arm-hi);stroke:var(--lamp-arm-color);stroke-width:0.5;transition:fill .4s; }
/* Small ring collar */
.lamp-ring{ fill:var(--lamp-arm-hi);stroke:none;transition:fill .4s; }
/* Angled arm */
.lamp-arm{ stroke:var(--lamp-arm-color);stroke-width:1.6;stroke-linecap:round;fill:none;transition:stroke .4s; }
/* Shade body — main front face */
.lamp-shade-body{ fill:var(--lamp-shade);stroke:var(--lamp-shade-hi);stroke-width:0.6;transition:fill .4s,stroke .4s; }
/* Shade top face — slightly darker for 3D depth */
.lamp-shade-top{ fill:var(--lamp-shade);opacity:0.7;stroke:var(--lamp-shade-hi);stroke-width:0.5;transition:fill .4s; }
/* Shade right side — thin perspective strip, darkest */
.lamp-shade-side{ fill:var(--lamp-arm-color);opacity:0.6;stroke:none;transition:fill .4s; }
/* Glass highlight patch */
.lamp-shade-hi{ fill:var(--lamp-shade-hi);opacity:0.35;pointer-events:none;transition:fill .4s; }
/* Brass rim lines */
.lamp-shade-rim{ stroke:var(--lamp-arm-hi);stroke-width:1.0;fill:none;stroke-linecap:round;transition:stroke .4s; }
/* Chain line */
.lamp-chain-line{ stroke:var(--lamp-bead-color);stroke-width:0.8;stroke-linecap:round;transition:stroke .4s; }
/* Beads */
.lamp-bead{ fill:var(--lamp-bead-color);transition:fill .4s; }
.lamp-bead-end{ fill:var(--lamp-bead-hi);stroke:rgba(0,0,0,0.2);stroke-width:0.4;transition:fill .4s; }

/* Chain UP↓DOWN bounce animation */
@keyframes chainPull {
  0%   { transform:translateY(0); }
  18%  { transform:translateY(-6px); }
  42%  { transform:translateY(4px); }
  62%  { transform:translateY(-2.5px); }
  78%  { transform:translateY(1.5px); }
  90%  { transform:translateY(-0.5px); }
  100% { transform:translateY(0); }
}
.lamp-switch.pulling .lamp-chain{
  animation:chainPull .65s cubic-bezier(.36,.07,.19,.97);
}

/* ── HERO ────────────────────────────────────────────────── */
.hero{position:relative;height:100vh;overflow:visible;background:transparent}
#cosmicCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 85% 65% at 50% 46%,transparent 35%,var(--bg) 100%);
  /* NO transition here — animating this gradient causes the dark/light oval flash on theme switch */
}
.hero-spacer{height:65vh;position:relative;z-index:3}
.hero-text{
  position:relative;z-index:10;height:35vh;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:0 clamp(var(--lg),8vw,120px);
}
.hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sm);opacity:0;animation:fadeUp .9s 2.5s var(--ease) forwards}
.hero-text h1{font-weight:600;font-size:clamp(22px,2.8vw,40px);letter-spacing:-.035em;line-height:1.22;margin-bottom:var(--md);opacity:0;animation:fadeUp .9s 1.618s var(--ease) forwards}
[data-theme="dark"] .hero-text h1{color:#e8e6f0;text-shadow:0 0 80px rgba(157,155,207,.35),0 4px 24px rgba(0,0,0,.65)}
[data-theme="light"] .hero-text h1{color:#18182c;text-shadow:0 0 60px rgba(74,72,153,.25),0 2px 16px rgba(0,0,0,.08)}
.hero-text p{font-size:clamp(14px,1.3vw,17px);font-weight:300;color:var(--fg-soft);max-width:670px;line-height:1.75;opacity:0;animation:fadeUp .9s 1.74s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.scroll-caret{position:absolute;bottom:var(--xl);left:50%;transform:translateX(-50%);z-index:20;opacity:0;transition:opacity .6s}
.scroll-caret.show{opacity:1}
.scroll-caret svg{width:18px;height:18px;stroke:var(--accent);stroke-width:1.5;fill:none;animation:bounce 2.8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap{padding:var(--xxl) clamp(var(--lg),8vw,120px);max-width:1280px;margin:0 auto}
hr.div{border:none;border-top:1px solid var(--div);margin:0 clamp(var(--lg),8vw,120px);position:relative;z-index:10;background:var(--bg)}
section{position:relative;z-index:10;background:var(--bg);transition:background .5s var(--ease)}
footer{position:relative;z-index:10;background:var(--bg);transition:background .5s var(--ease)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--md)}
h2{font-weight:600;font-size:clamp(24px,3.0vw,40px);line-height:1.18;letter-spacing:-.03em}

/* ── SECTIONS ────────────────────────────────────────────── */
#about{min-height:38.2vh;display:flex;align-items:center}
.about-inner{max-width:740px}
.about-inner h2{margin-bottom:var(--lg)}
.about-inner p{font-size:clamp(15px,1.6vw,19px);font-weight:300;color:var(--fg-soft);line-height:1.82;margin-bottom:var(--md)}
.about-inner p.note{font-size:13px;color:var(--fg-muted);font-style:italic;border-left:2px solid var(--div);padding-left:var(--md)}

#sosnexo{min-height:38.2vh}
.sosnexo-inner{max-width:960px}
.sosnexo-inner h2{font-size:clamp(32px,5vw,72px);letter-spacing:-.04em;font-weight:700;color:var(--accent);margin-bottom:var(--md)}
.sosnexo-tagline{font-size:clamp(15px,1.7vw,20px);font-weight:300;color:var(--fg-soft);max-width:520px;line-height:1.75;margin-bottom:var(--xxl)}
.sosnexo-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--xl)}
.pillar{display:flex;flex-direction:column}
.pillar-icon{font-size:22px;margin-bottom:var(--md);color:var(--accent);opacity:.7}
.pillar h4{font-weight:600;font-size:15px;letter-spacing:-.02em;margin-bottom:var(--sm)}
.pillar p{font-size:14px;font-weight:300;color:var(--fg-muted);line-height:1.72}

#services{min-height:61.8vh}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--xl);gap:var(--lg);flex-wrap:wrap}
.svc-head-sub{max-width:300px;font-size:14px;font-weight:300;color:var(--fg-muted);line-height:1.7;text-align:right}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--div);border:1px solid var(--div);border-radius:20px;overflow:hidden}
.card{background:var(--card-bg);padding:var(--xl) var(--lg);display:flex;flex-direction:column;transition:background .3s var(--ease)}
.card:hover{background:var(--card-hover)}
.card-num{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent);margin-bottom:var(--lg)}
.card h3{font-weight:700;font-size:clamp(18px,1.9vw,26px);letter-spacing:-.02em;line-height:1.2;margin-bottom:var(--sm)}
.card .card-hook{font-size:14px;font-weight:500;color:var(--accent);margin-bottom:var(--md);line-height:1.5}
.card p{font-size:14px;font-weight:300;color:var(--fg-soft);line-height:1.78;flex:1;margin-bottom:var(--lg)}
.card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--lg)}
.tag{font-size:11px;font-weight:500;color:var(--fg-muted);background:var(--field-bg);border:1px solid var(--div);border-radius:20px;padding:3px 10px}
.card-metric{font-size:12px;font-weight:600;color:var(--accent)}
.card-cta{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:5px;line-height:1.5;transition:gap .2s var(--ease)}
.card-cta:hover{gap:9px}

#proof{min-height:38.2vh}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--div);border:1px solid var(--div);border-radius:20px;overflow:hidden;margin-top:var(--xl)}
.metric{background:var(--card-bg);padding:var(--xl) var(--lg);transition:background .3s var(--ease)}
.metric:hover{background:var(--card-hover)}
.metric-num{font-weight:700;font-size:clamp(36px,4.5vw,58px);letter-spacing:-.03em;color:var(--accent);line-height:1;margin-bottom:var(--sm)}
.metric-num sup{font-size:.38em;vertical-align:super;font-weight:600;letter-spacing:.05em}
.metric-label{font-weight:600;font-size:14px;margin-bottom:5px}
.metric-desc{font-size:13px;font-weight:300;color:var(--fg-muted);line-height:1.6}

#contact{min-height:61.8vh}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--xxl);align-items:start}
.contact-left h2{margin-bottom:var(--md)}
.contact-intro{font-size:clamp(14px,1.4vw,17px);font-weight:300;color:var(--fg-soft);line-height:1.82;margin-bottom:var(--xl);max-width:400px}
.form-stack{display:flex;flex-direction:column;gap:11px}
.form-field{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:300;color:var(--fg);background:var(--field-bg);border:1px solid var(--field-bdr);border-radius:11px;padding:13px 16px;transition:border-color .2s,box-shadow .2s;resize:vertical}
.form-field::placeholder{color:var(--fg-muted)}
.form-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(157,155,207,.10)}
.btn-send{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--accent-dim);border:none;border-radius:11px;padding:13px 28px;cursor:pointer;align-self:flex-start;transition:background .25s,transform .2s}
.btn-send:hover{background:var(--accent);transform:translateY(-2px)}
.btn-send:disabled{opacity:.5;cursor:not-allowed;transform:none}
.form-note{font-size:12px;color:var(--fg-muted);margin-top:var(--sm)}

/* AI PANEL */
#ai-panel{display:none;margin-top:var(--lg);background:var(--ai-bg);border:1px solid var(--ai-bdr);border-radius:16px;padding:var(--lg)}
#ai-panel.on{display:block}
.ai-thinking{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fg-muted)}
.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 2px;animation:dot 1.4s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.ai-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sm)}
.ai-content{font-size:14px;font-weight:300;color:var(--fg-soft);line-height:1.75}
.ai-content strong{color:var(--fg);font-weight:600}
.ai-sec{margin-top:var(--md);padding-top:var(--md);border-top:1px solid var(--div)}
.ai-qs{list-style:none;margin-top:10px}
.ai-qs li{font-size:13px;font-weight:400;color:var(--fg-soft);padding:8px 0;border-bottom:1px solid var(--div);display:flex;gap:10px;align-items:flex-start}
.ai-qs li:last-child{border-bottom:none}
.ai-qs li::before{content:'->'; color:var(--accent);flex-shrink:0;margin-top:1px}
.ai-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.ai-badge.good{background:rgba(100,200,120,.12);color:#5ec47a;border:1px solid rgba(100,200,120,.2)}
.ai-badge.partial{background:rgba(255,180,60,.10);color:#e0a840;border:1px solid rgba(255,180,60,.2)}
.ai-badge.no{background:rgba(220,80,80,.10);color:#e06060;border:1px solid rgba(220,80,80,.2)}

.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:44px 1fr;gap:var(--md);padding:var(--lg) 0;border-bottom:1px solid var(--div);align-items:start}
.step:last-child{border-bottom:none}
.step-num{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--accent);line-height:1;padding-top:2px}
.step h4{font-weight:600;font-size:14px;margin-bottom:4px;letter-spacing:-.01em}
.step p{font-size:13px;font-weight:300;color:var(--fg-muted);line-height:1.65}

/* FOOTER */
footer{padding:var(--xl) clamp(var(--lg),8vw,120px);font-size:12px;color:var(--fg-muted);border-top:1px solid var(--div)}
.footer-inner{display:flex;flex-direction:column;gap:var(--md)}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--md)}
.footer-brand{font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.footer-links{display:flex;gap:var(--lg);flex-wrap:wrap}
.footer-links a{color:var(--fg-muted);text-decoration:none;font-size:12px;transition:color .2s}
.footer-links a:hover{color:var(--fg)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sm);padding-top:var(--md);border-top:1px solid var(--div);font-size:11px}
.footer-legal{font-size:11px;color:var(--fg-muted);line-height:1.7;max-width:600px}

/* RESPONSIVE */
@media(max-width:960px){
  .cards-grid,.proof-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr;gap:var(--xl)}
  .svc-head-sub{text-align:left}
  .sosnexo-pillars{grid-template-columns:1fr;gap:var(--lg)}
  header{gap:var(--md);padding:6px 12px}
}
@media(max-width:600px){
  .footer-links{gap:var(--md)}
  .sosnexo-inner h2{font-size:clamp(40px,12vw,72px)}
}
/* ── WEB PRESENCE SECTION ─────────────────────────────────── */
.wp-wrap{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(34px,5vw,55px) clamp(var(--lg),8vw,120px);
  max-width:1280px;margin:0 auto;
}
.wp-wrap .wp-head{
  max-width:min(560px, 90vw);
}
.wp-head{max-width:560px;margin-bottom:0}
.wp-head h2{margin-bottom:clamp(8px,1.2vw,13px)}
.wp-sub{color:var(--fg-soft);max-width:520px;margin:0 auto clamp(21px,3.5vw,34px);line-height:1.9}
.wp-stage-wrap{
  position:relative;display:flex;justify-content:center;align-items:center;
  width:100%;max-width:1040px;
  height:auto;margin:0 auto clamp(13px,2vw,21px);overflow:visible
}
.wp-canvas{display:block;width:1040px;max-width:100%;height:auto}
.wp-controls{display:flex;flex-direction:column;align-items:center;gap:var(--md)}
.wp-ring-btn{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;font-weight:600;
  color:var(--accent);
  background:rgba(157,155,207,0.08);
  border:1px solid var(--accent-dim);
  border-radius:50px;
  padding:11px 28px;
  cursor:pointer;
  transition:background .25s,border-color .25s,opacity .5s;
  letter-spacing:.03em;
}
[data-theme="light"] .wp-ring-btn{background:rgba(74,72,153,0.06)}
.wp-ring-btn:hover:not(:disabled){background:rgba(157,155,207,0.18);border-color:var(--accent)}
.wp-ring-btn:disabled{pointer-events:none}
.wp-final-msg{
  font-size:15px;color:var(--fg-soft);
  max-width:420px;line-height:1.7;
  opacity:0;transition:opacity .8s;
  margin:0;
}
.wp-final-msg.visible{opacity:1}
.btn-ghost{
  display:inline-block;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;font-weight:600;
  color:var(--fg);
  background:transparent;
  border:1px solid var(--accent-dim);
  border-radius:50px;
  padding:13px 32px;
  cursor:pointer;
  transition:border-color .4s,box-shadow .4s,background .25s;
  text-decoration:none;
  letter-spacing:.02em;
}
.btn-ghost:hover{border-color:var(--accent);background:rgba(157,155,207,0.08)}
.wp-cta.glow{
  border-color:var(--accent);
  box-shadow:0 0 18px rgba(157,155,207,0.3),0 0 40px rgba(157,155,207,0.12);
}
[data-theme="light"] .wp-cta.glow{
  box-shadow:0 0 18px rgba(74,72,153,0.25),0 0 40px rgba(74,72,153,0.1);
}