/* =========================================================
   CONVERGE FABRIC — CLEANED STYLES (desktop-safe)
   Notes:
   - Desktop rules unchanged in appearance
   - Duplicates merged; conflicts resolved
   - Mobile packs consolidated and ordered by breakpoint
   - Global text remains white as requested
   ========================================================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ------------------------------
   1) DESIGN TOKENS / ROOT
   ------------------------------ */
:root{
  --bg:#0b0f17;
  --panel:#121826;
  --text:#ffffff;           /* forced white */
  --muted:#a6b0c3;
  --accent: var(--brand-accent, #9e34a3);
  --accent-2:#7cf5ff;
  --border:#232a3b;         /* slightly lighter than #1e2636 */
  --success:#26c281;
  --warn:#ffcc66;
  --ok:#2ecc71;
  --err:#ff6b6b;
}

/* ------------------------------
   2) BASE / RESET
   ------------------------------ */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}
body.overlay-open{ overflow:hidden; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
img, svg, canvas{ max-width:100%; height:auto; }
.container{ width:min(1100px,92%); margin-inline:auto; }

/* Force white everywhere it matters, incl. icons in header/footer */
header, header * , footer, footer *{ color:#fff; fill:#fff; }
header a:hover, footer a:hover{
  color: color-mix(in oklab, #ffffff 85%, var(--accent) 15%);
}

/* ------------------------------
   3) HEADER / NAV
   ------------------------------ */
.site-header{
  position:sticky; top:0; z-index:999;
  background:rgba(11,15,23,.8);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:10px; }
.brand{ display:flex; align-items:center; color:var(--text); }
.logo{ height:34px; width:auto; }
.logo.small{ height:28px; }
.nav{ display:flex; gap:18px; align-items:center; }
.nav.open{ display:block; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--border);
  color:var(--text); padding:6px 10px; border-radius:8px;
}
.nav-link{ padding:8px 10px; border-radius:10px; }
.nav-link:hover{ background:var(--panel); text-decoration:none; }
.nav-link--active{ background:var(--panel); color:var(--accent-2); }
.nav-link--active:hover{ background:var(--panel); color:var(--accent-2); text-decoration:none; }
.nav-link--active.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0f17;
}
.nav-link--active.btn-primary:hover{
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0f17; text-decoration:none;
}
.nav-link--plain{ background:none; border:none; color:var(--text); font:inherit; cursor:pointer; }
.nav-link--plain:hover{ background:var(--panel); text-decoration:none; }
.nav-link--plain:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Resources overlay */
.resources-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(9,13,22,.78); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.resources-overlay[aria-hidden="false"]{ display:flex; }
.resources-overlay__inner{
  position:relative; min-width:min(420px,92%);
  background:var(--panel); border:1px solid var(--border);
  padding:32px; border-radius:24px;
  box-shadow:0 24px 48px rgba(0,0,0,.45);
}
.resources-overlay__inner h2{ margin:0 0 18px; }
.resources-overlay__inner ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.resources-overlay__inner a{ color:var(--accent); font-weight:600; }
.resources-overlay__close{
  position:absolute; top:12px; right:12px; cursor:pointer;
  background:none; border:1px solid var(--border); border-radius:999px;
  width:36px; height:36px; font-size:18px; line-height:1.2; color:var(--text);
}
.resources-overlay__close:hover{ background:var(--panel); }

/* ------------------------------
   4) BUTTONS / TAGS
   ------------------------------ */
.btn{ display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--border); }
.btn-primary{
  position:relative; display:inline-flex; gap:.6rem; align-items:center; justify-content:center;
  padding:.8rem 1rem; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--accent) 60%, black 40%);
  color:#fff;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--accent) 70%, black 30%), #111);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 24px color-mix(in oklab, var(--accent) 24%, transparent 76%);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s;
  font-weight:700;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary.loading{ opacity:.7; pointer-events:none; }
.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  display:none; animation: spin .85s linear infinite;
}
.btn-primary.loading .btn-spinner{ display:inline-block; }
.btn-primary.loading .btn-text{ opacity:.8; }
@keyframes spin { to { transform: rotate(360deg); } }

.pill{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(158,52,163,.16);
  border-radius:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(158,52,163,.35);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 26px rgba(158,52,163,.15);
}
.pill .tick{
  width: 28px; height: 28px; border-radius: 999px; flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 30% 30%, rgba(158,52,163,.38), rgba(77,163,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.pill .tick i{ width:16px; height:16px; color:#fff; opacity:.95; }
.pill .pill-text{ font-weight:700; font-size:1.05rem; color:var(--text); }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(158,52,163,.12); border:1px solid rgba(158,52,163,.25);
  color:#caa9ff; font-weight:600; font-size:14px;
}

/* ------------------------------
   5) HERO
   ------------------------------ */
.hero{ padding:72px 0; background:radial-gradient(1200px 400px at 50% -50%,rgba(77,163,255,.25),transparent); }
.hero h1{ font-size:40px; line-height:1.15; margin:0 0 10px; }
.hero p{ color:var(--muted); max-width:800px; }

.hero-quantum{
  position:relative; overflow:hidden;
  padding:120px 0 80px;
  background:
    radial-gradient(1000px 400px at 50% -10%, rgba(158,52,163,.25), transparent),
    radial-gradient(800px 300px at 80% 20%, rgba(0,255,224,.12), transparent),
    #0b0f17;
}
.hero-quantum h1{
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.02; letter-spacing:-0.02em; margin:0 0 18px;
}
.gradient-text{
  background: linear-gradient(90deg,#a855f7,#22d3ee);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero-sub{ color:var(--muted); font-size:clamp(18px, 2.2vw, 24px); max-width:980px; }

/* Hero canvases */
.cf-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.cf-bg.flow{ z-index:0; }
.cf-bg.particles{ z-index:1; }
.cf-bg-mask{ position:absolute; inset:0; z-index:2; }
.hero-quantum > .container{ position:relative; z-index:3; }

/* Floating logo */
.cf-logo-wrap{
  --logo-size: 500px;
  --orbital-radius: 160px;
  --logo-gap: 110px;
  width: var(--logo-size);
  max-width: 92vw;
  margin: 50px auto var(--logo-gap);
  position: relative;
}
.cf-logo-float{
  width:100%; height:auto;
  animation: cfFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 12px 40px rgba(158,52,163,.45)) drop-shadow(0 0 30px rgba(77,163,255,.35));
}
@keyframes cfFloat{
  0%,100%{ transform: translateY(-18px); }
  50%    { transform: translateY(22px);  }
}

/* Orbital effect */
.cf-orbital{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.cf-orbital::before{
  content:""; position:absolute; left:50%; top:50%;
  width: calc(var(--orbital-radius) * 2);
  height: calc(var(--orbital-radius) * 2);
  margin-left: calc(var(--orbital-radius) * -1);
  margin-top:  calc(var(--orbital-radius) * -1);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(158,52,163,.25), inset 0 0 60px rgba(77,163,255,.12);
  opacity:.35;
}
.cf-orbital-dot{
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; border-radius:50%;
  background:#9e34a3; filter:blur(.5px);
  transform-origin:0 0; animation: cfOrbit 12s linear infinite;
  box-shadow: 0 0 10px rgba(158,52,163,.9), 0 0 22px rgba(34,211,238,.5);
}
@keyframes cfOrbit{
  from{ transform: rotate(0deg) translateX(var(--orbital-radius)) rotate(0deg); }
  to  { transform: rotate(360deg) translateX(var(--orbital-radius)) rotate(-360deg); }
}

/* ------------------------------
   6) GRID / CARDS / SECTIONS
   ------------------------------ */
.grid{ display:grid; gap:18px; }
.cards{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:18px;
}
.card h3{ margin-top:0; }
.section{ padding:42px 0; }
.section h2{ margin-top:0; }
.cta{ display:flex; gap:12px; margin-top:16px; }
.kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0; }
.kpi .tile{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; }
.section-title{ font-size:clamp(28px,3.4vw,44px); margin:0 0 16px; }
.section-lead{ color:var(--muted); font-size:clamp(16px,2vw,20px); }

/* Feature/benefit card fx */
.card.fx{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 30px rgba(158,52,163,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.fx:hover{
  transform: translateY(-3px);
  border-color: rgba(158,52,163,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 50px rgba(158,52,163,.18);
}

/* ------------------------------
   7) PARTNER CARDS
   ------------------------------ */
.partner-grid{
  display:grid; gap:24px; margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.partner-card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.partner-card__name{ font-weight:700; color:var(--text); margin-bottom:0; }
.partner-card__logo{
  display:flex; justify-content:center; align-items:center;
  width:75px; height:75px; margin:0 auto;
  border:1px solid var(--border); border-radius:12px; background:#0f1522;
}
.partner-card__logo img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .2s ease; }
.partner-card__logo:hover img{ transform:translateY(-2px); }

/* ------------------------------
   8) FORMS
   ------------------------------ */
input,textarea{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid var(--border); background:#0f1522; color:var(--text);
}
label{ font-weight:600; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row > div{ display:block; }
.form-actions{ margin-top:10px; }
.note{ color:var(--muted); font-size:.95rem; }
.alert{
  padding:12px; border-radius:12px; color:#9df0c1;
  background:#10231a; border:1px solid #224b36;
}

/* Contact form (modern set) */
.contact-wrap{ max-width:960px; }
.contact-hero{ margin-bottom:1.25rem; }
.contact-hero h1{
  font-family:Sora, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height:1.15; letter-spacing:-0.02em; margin:0 0 .35rem;
}
.contact-hero p{ color:var(--muted); margin:0 0 1rem; }

.form-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:18px;
  padding: clamp(16px, 2.4vw, 28px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.form-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:800px){ .form-grid{ grid-template-columns:1fr 1fr; } }

.field{ display:block; }
.field label{ display:block; font-weight:600; margin:0 0 .35rem; }
.input{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:12px;
  padding:.75rem .9rem; background:rgba(10,12,20,.6);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input:focus-within{
  border-color: color-mix(in oklab, var(--accent) 70%, white 0%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent 78%);
  background: rgba(10,12,20,.85);
}
.input input{ width:100%; background:transparent; border:0; outline:0; color:var(--text); }
.field textarea{
  width:100%; resize:vertical;
  border:1px solid var(--border); border-radius:12px;
  background: rgba(10,12,20,.6); color:var(--text);
  padding:.9rem 1rem; min-height:160px;
}
.field textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 70%, white 0%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent 78%);
  outline:none;
}
.hp{ display:none !important; }
.chips{ border:0; padding:0; margin:14px 0; }
.chips legend{ font-weight:600; margin-bottom:.6rem; }
.chip{ display:inline-flex; align-items:center; margin:.25rem .3rem .25rem 0; cursor:pointer; }
.chip input{ appearance:none; -webkit-appearance:none; position:absolute; opacity:0; pointer-events:none; }
.chip span{
  border:1px solid var(--border); padding:.5rem .7rem; border-radius:999px;
  color:var(--text); font-size:.95rem; background:rgba(12,14,22,.5); transition:all .2s;
}
.chip input:checked + span{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent 78%);
}
.field-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:.4rem; }
.error{ color:var(--err); min-height:1em; }
#msg-count{ color:var(--muted); font-variant-numeric:tabular-nums; }
#msg-count.limit{ color:var(--err); }
.sub-note{ color:var(--muted); margin:0; }
.toast{
  margin-top:14px; border-radius:12px; padding:.85rem 1rem; font-weight:600;
  border:1px solid var(--border); background:rgba(10,12,20,.75);
}
.toast-ok{ border-color: color-mix(in oklab, var(--ok) 80%, white 0%); color:#d7ffe7; }
.toast-err{ border-color: color-mix(in oklab, var(--err) 80%, white 0%); color:#ffd9d9; }

/* Icon color fix */
.input svg{ width:18px; height:18px; flex:0 0 auto; }
.input svg path{ fill:var(--muted); opacity:.9; }
.input svg [stroke]{ stroke:var(--muted); opacity:.9; }
.form-card .input svg{ color:var(--muted); }
.form-card .input svg *, .form-card .input svg path{
  fill:currentColor !important; stroke:currentColor !important; opacity:.9;
}

/* ------------------------------
   9) WHY GRID
   ------------------------------ */
.why-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
@media (max-width:1024px){ .why-grid{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:700px){ .why-grid{ grid-template-columns:1fr; gap:24px; } }

.why-card{
  position:relative; overflow:hidden;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; backdrop-filter: blur(12px);
  padding:28px;
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.why-card:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.why-icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(158,52,163,.3), rgba(77,163,255,.12));
  box-shadow: 0 10px 24px rgba(158,52,163,.20), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-icon i{ width:24px; height:24px; color:#fff; }
.why-card:hover .why-icon{ transform: translateY(-4px) scale(1.08) rotate(3deg); }
.why-title{ font-size:1.2rem; font-weight:800; margin:8px 0 10px; }
.why-desc{ color:var(--muted); font-size:.95rem; line-height:1.6; }

/* ------------------------------
   10) SOLUTIONS / UNIFIED ACCESS
   ------------------------------ */
.cf-card{
  background:#0c0f19; border:1px solid rgba(158,52,163,.15);
  border-radius:18px; padding:30px;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  transition: transform .2s ease, border-color .2s ease;
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
}
.cf-card:hover{ transform:translateY(-4px); border-color:rgba(158,52,163,.35); }
.cf-card-head{ margin-bottom:12px; }
.cf-card-title{ font-size:1.35rem; font-weight:800; letter-spacing:-0.01em; margin:6px 0; }
.cf-card-desc{ color:var(--muted); font-size:1rem; }
.icon-bg{
  width:64px; height:64px; border-radius:16px;
  background: linear-gradient(135deg, rgba(158,52,163,.28), rgba(77,163,255,.10));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(158,52,163,.18), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.icon-bg .icon{ width:28px; height:28px; color:var(--accent); }
.cf-card:hover .icon-bg{ transform:translateY(-2px) scale(1.05); }
.cf-list{ list-style:none; padding:0; margin-top:8px; display:grid; gap:10px; }
.cf-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); }
.cf-list .tiny{ width:16px; height:16px; color:var(--accent); margin-top:3px; }

.grid.cf-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:60px; }
@media (max-width:1024px){ .grid.cf-three{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:700px){ .grid.cf-three{ grid-template-columns:1fr; gap:24px; } }

.unified-access{ padding:42px 36px; }
.ua-head{ text-align:center; max-width:980px; margin:0 auto 26px; }
.ua-pill-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 28px; max-width:1200px; margin:22px auto 0; }
@media (max-width:800px){ .ua-pill-grid{ grid-template-columns:1fr; gap:16px; } }

/* Solutions background canvases */
.cf-solutions{ position:relative; min-height:100vh; overflow:hidden; }
.cf-solutions > .container{ position:relative; z-index:3; }
.cf-solutions .cf-three{ margin-bottom:80px !important; }
.cf-solutions .card-xl.text-center{ margin-top:80px !important; }
.cf-solutions canvas{ width:100% !important; height:100% !important; }

/* ------------------------------
   11) PROBLEM / SOLUTION + DIAGRAM (cfnet-*)
   ------------------------------ */
.cfnet-wrap{ position:relative; padding:72px 0; }
.cfnet-h2{ font-size:clamp(32px,4.6vw,56px); margin:0 0 12px; }
.cfnet-lead{ color:var(--muted); font-size:clamp(18px,2.2vw,22px); max-width:980px; }
.cfnet-card{
  margin-top:24px; padding:clamp(18px,2.6vw,28px);
  border-radius:24px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center; max-width:800px; margin-inline:auto;
}
.cfnet-h3{ font-size:clamp(28px,3.6vw,40px); margin:0 0 8px; }
.cfnet-sub{ color:var(--muted); margin:0 0 18px; }
.cfnet-card p, .cfnet-card h3{ text-align:center; }

/* Main diagram container */
#cfnet-diagram{ position:relative; height:620px; max-width:980px; margin:0 auto 18px; }
.cfnet-diagram, .cfnet-diagram svg, .cfnet-wires{ overflow:visible !important; }
.cfnet-diagram{ position:relative; z-index:2; }
.cfnet-wires{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Center hub */
.cfnet-hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:148px; height:148px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#0f1220 !important;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 48px rgba(158,52,163,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
.cfnet-halo{
  position:absolute; inset:-28px; border-radius:999px;
  background:
    radial-gradient(closest-side, rgba(158,52,163,.45), transparent 70%),
    radial-gradient(closest-side, rgba(34,211,238,.22), transparent 72%);
  filter:blur(16px); opacity:.95; pointer-events:none;
  animation: cfnet-halo 3.2s ease-in-out infinite;
}
@keyframes cfnet-halo{ 0%,100%{opacity:.8} 50%{opacity:1} }
.cfnet-hub::after{
  content:""; position:absolute; inset:-18px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(158,52,163,.35); animation: hubPulse 2.8s ease-out infinite;
}
@keyframes hubPulse{
  0%{ box-shadow:0 0 0 0 rgba(158,52,163,.35); }
  70%,100%{ box-shadow:0 0 0 26px rgba(158,52,163,0); }
}
.cfnet-logo{ width:84px; height:auto; filter: drop-shadow(0 4px 16px rgba(34,211,238,.35)); position:relative; top:2px; left:-2px; }
.cfnet-hub-label{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:12px; font-weight:800; color:#e8ecf7; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.35); }

/* Nodes */
#cfnet-nodes{ position:absolute; inset:0; }
.cfnet-node{
  position:absolute; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#0f1220 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.cfnet-node::before{
  content:""; position:absolute; inset:-10px; border-radius:inherit;
  background: radial-gradient(closest-side, rgba(158,52,163,.22), transparent 70%);
  filter: blur(10px); opacity:.95; transition:opacity .25s ease;
}
.cfnet-node:hover::before{ opacity:1; }
.cfnet-ico{ width:34px; height:34px; color:#9adbf1; opacity:.9; }
.cfnet-label{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:10px; font-size:14px; color:#b7c1d6; }

/* Lines & particles */
.cfnet-line-glow{ stroke:#9e34a3; stroke-width:7; opacity:.16; filter:url(#cfnet-glow); }
.cfnet-line{ stroke:url(#cfnet-grad); stroke-width:3; opacity:.75; }
.cfnet-line-dash{ stroke:#9e34a3; stroke-width:2; stroke-dasharray:8 8; opacity:.55; }
.cfnet-dot{ fill:url(#cfnet-dot); filter:url(#cfnet-glow); }

@media (prefers-reduced-motion:no-preference){
  .cfnet-wires circle{ animation: cfnet-fade 3s linear infinite; }
  .cfnet-wires path{ stroke-dasharray: 8 7; animation: cfnet-flow 7s linear infinite; }
}
@keyframes cfnet-flow{ to{ stroke-dashoffset:-18; } }
@keyframes cfnet-fade{ 0%{opacity:0} 10%,90%{opacity:1} 100%{opacity:0} }

/* Metrics */
.cfnet-metrics{
  margin-top:16px; max-width:760px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.cfnet-metric{
  padding:14px 16px; border-radius:14px; text-align:center;
  border:1px solid var(--border); background:rgba(15,18,28,.5);
}
.cfnet-metric-num{ font-weight:800; font-size:clamp(28px,3.6vw,36px); color:var(--accent); }
.cfnet-metric-sub{ color:var(--muted); font-size:.95rem; }

/* Remove legacy infinity artwork if present */
.hub-img{ display:none !important; }

/* ------------------------------
   12) HOW IT WORKS
   ------------------------------ */
#how-it-works{ padding-top:2.25rem; margin-top:-10px; }
.cfnet-steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:2rem; margin-top:3rem;
}
.cfnet-step{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px; padding:2rem;
  background:rgba(255,255,255,0.02); transition:all .3s ease;
}
.cfnet-step:hover{
  border-color:var(--accent); transform:translateY(-6px);
  box-shadow:0 0 30px rgba(158,52,163,0.15);
}
.cfnet-step-header{ display:flex; justify-content:center; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.cfnet-step-num{ font-size:1.5rem; font-weight:bold; color:var(--accent); }
.cfnet-step-icon svg{ width:32px; height:32px; color:var(--accent); }
.cfnet-step h3{ font-size:1.25rem; margin:1rem 0; color:#fff; }
.cfnet-step p{ color:var(--muted); margin-bottom:1.5rem; }
.cfnet-step ul{ list-style:none; padding:0; }
.cfnet-step ul li{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.95rem; }
.cfnet-step ul svg{ width:18px; height:18px; color:var(--accent); }

.cfnet-cta-box{
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:999px; border:1px solid rgba(255,255,255,0.1);
  padding:.75rem 1.5rem; margin-top:3rem; background:rgba(255,255,255,0.03);
}
.cfnet-cta-box svg{ color:var(--accent); width:18px; height:18px; }
.cfnet-cta-box span{ font-size:.9rem; color:var(--text); font-weight:500; }

/* Connected arrows (desktop/tablet) */
@media (min-width:1024px){
  .cfnet-steps.connected{
    display:flex !important; flex-wrap:nowrap; justify-content:center; align-items:stretch;
    gap:1rem; position:relative;
  }
  .cfnet-steps.connected .cfnet-step{ flex:1 1 0; min-width:0; height:100%; }
  .cfnet-arrow{
    display:flex; align-items:center; justify-content:center; position:relative;
    width:40px; flex:0 0 40px;
  }
  .cfnet-arrow::before{
    content:""; position:absolute; top:50%; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.3;
  }
  .cfnet-arrow-icon{ width:28px; height:28px; color:var(--accent); z-index:2; opacity:.85;
    transition: transform .3s ease, opacity .3s ease; }
  .cfnet-arrow-icon:hover{ transform:translateX(4px); opacity:1; }
}

/* ------------------------------
   13) WAVE DIVIDERS
   ------------------------------ */
.cfnet-divider{
  position:relative; width:100vw; left:50%; transform:translateX(-50%);
  margin:24px 0 6px; pointer-events:none; overflow:visible; z-index:1;
}
/* ================================
   FULL-WIDTH WAVE FIX (DESKTOP)
   ================================ */
.wave-strip {
  position: relative;
  width: 100vw;               /* full screen width */
  left: 50%;
  transform: translateX(-50%);
  margin: 40px 0 -10px;       /* adjust spacing above/below */
  overflow: visible;
  z-index: 1;
}

.wave-strip img {
  display: block;
  width: 100%;                /* stretch to full width */
  height: auto;
  max-height: 340px;          /* increase or adjust as needed */
  object-fit: cover;          /* cover the full width nicely */
  opacity: var(--wave-alpha, .20);
  mix-blend-mode: screen;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.45));

}


/* ------------------------------
   14) STATUS / SOCIALS (unchanged visuals)
   ------------------------------ */
.status-hero{ padding:52px 0; background:radial-gradient(800px 320px at 50% 0,rgba(124,245,255,.15),transparent); text-align:center; }
.status-hero h1{ margin-bottom:10px; }
.status-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; background:rgba(15,21,34,.75); border:1px solid var(--border);
  font-weight:600; margin-top:12px;
}
.pill-indicator{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-pill--operational .pill-indicator{ background:#48c774; }
.status-pill--degraded .pill-indicator{ background:#ffcc66; }
.status-pill--outage .pill-indicator{ background:#ff6b6b; }
.status-updated{ color:var(--muted); margin-top:10px; }
.status-grid{ display:grid; gap:18px; margin-top:24px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.status-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.status-card__header{ display:flex; align-items:center; gap:10px; }
.status-badge{ width:14px; height:14px; border-radius:50%; }
.status-badge--up{ background:#48c774; }
.status-badge--down{ background:#ff6b6b; }
.status-badge--unknown{ background:#a6b0c3; }
.status-badge--disabled{ background:#555e73; }
.status-address{ font-family:"Courier New",monospace; font-size:.9rem; color:var(--muted); }
.status-meta{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:.9rem; }
.notices{ display:grid; gap:18px; margin-top:20px; }
.notice{ border-radius:16px; padding:18px; border:1px solid var(--border); background:rgba(15,21,34,.85); display:grid; gap:10px; }
.notice--info{ border-color:rgba(124,245,255,.4); }
.notice--degraded{ border-color:rgba(255,204,102,.4); }
.notice--outage{ border-color:rgba(255,107,107,.5); }
.notice-tag{ display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(15,21,34,.9); border:1px solid var(--border); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.socials-embed{ margin:24px 0; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--panel); }
.socials-embed iframe{ width:100%; height:500px; border:0; }

/* ------------------------------
   15) FOOTER
   ------------------------------ */
.site-footer{ border-top:1px solid var(--border); padding:28px 0; background:#0a0e16; margin-top:46px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
.brand-row{ display:flex; align-items:center; gap:8px; }

/* =========================================================
   MEDIA QUERIES (ordered high → low, desktop-first safety)
   ========================================================= */

/* <= 1024px */
@media (max-width:1024px){
  .grid.cf-three{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .cfnet-arrow{ width:28px; flex:0 0 28px; }
  .cfnet-arrow-icon{ width:22px; height:22px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
}

/* <= 900px */
@media (max-width:900px){
  .fabric-diagram{ padding:34px 10px 18px; }
  .fabric-diagram .label{ font-size:.95rem; }
  .fabric-diagram .label.top-left{ left:8%; top:8%; }
  .fabric-diagram .label.top-right{ right:8%; top:8%; }
  .fabric-diagram .label.left{ left:4%; }
  .fabric-diagram .label.right{ right:4%; }
}

/* <= 860px */
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .nav{
    display:none; position:absolute; right:4%; top:64px;
    background:var(--panel); padding:10px; border:1px solid var(--border);
    border-radius:12px; flex-direction:column;
  }
  .nav-toggle{ display:block; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
}

/* <= 800px */
@media (max-width:800px){
  .form-grid{ grid-template-columns:1fr; gap:12px; }
  .ua-pill-grid{ grid-template-columns:1fr; gap:16px; }
  .sol-kpis{ grid-template-columns:1fr; }
}

/* <= 768px  (tablet + phones) */
@media (max-width:768px){
  html, body{ overflow-x:hidden !important; overflow-y:auto !important; height:auto !important; }

  /* Header/logo */
  .site-header{ padding:6px 0 !important; }
  .header-inner{ gap:10px; }
  .logo{ height:26px !important; width:auto !important; }
  .nav-toggle{ padding:6px 8px; }
  .nav{ right:4%; top:54px; }

  /* Containers & sections */
  .container{ width:90vw !important; max-width:100% !important; margin:0 auto !important; }
  .section{ padding:28px 0 !important; }

  /* Hero */
  .hero-quantum{ padding:72px 0 40px !important; }
  .hero-quantum h1{ font-size: clamp(28px,7vw,34px) !important; }
  .hero-sub{ font-size:16px !important; }
  .cf-logo-wrap{ margin-top:24px !important; margin-bottom:40px !important; }

  /* Waves smaller */
  .wave-strip{ margin:6px auto -8px; }
  .wave-strip img, .footer-wave img{
    max-height:160px !important; opacity:.16 !important; object-fit:contain !important;
  }
  .wave-strip::before, .footer-wave::before{ inset:-20px 0 !important; }

  /* How it works: grid, no arrows */
  .cfnet-steps.connected{ display:grid !important; gap:16px !important; }
  .cfnet-arrow, .cfnet-arrow-icon, [class*="arrow"] svg, [class*="arrow"] img{
    display:none !important; width:0 !important; height:0 !important;
  }

  /* Diagram sizing */
  #cfnet-diagram{ height:460px !important; margin-bottom:14px !important; overflow:visible !important; }
  .cfnet-hub{ width:120px !important; height:120px !important; }
  .cfnet-logo{ width:72px !important; }
  #cfnet-nodes .cfnet-node{ width:68px !important; height:68px !important; }
  #cfnet-nodes .cfnet-ico{ width:26px !important; height:26px !important; }
  .cfnet-label{ font-size:12px !important; }
  .cfnet-metrics{ grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .cfnet-diagram, .cfnet-wires, .cfnet-diagram svg{ overflow:visible !important; }

  /* Cards/pills */
  .grid.cf-three, .ua-pill-grid, .why-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .cf-card, .why-card{ padding:18px !important; }

  /* Footer */
  .footer-grid{ grid-template-columns:1fr !important; gap:10px !important; }
  .site-footer{ padding:20px 0 !important; }
  .brand-row img, .site-footer .logo{ height:22px !important; }
}

/* <= 700px (phones) */
@media (max-width:700px){
  .container{ width:92vw; }
  .hero-quantum{ padding:72px 0 44px; }
  .hero-quantum h1{ font-size: clamp(28px, 7vw, 36px); }
  .cf-logo-wrap{ --logo-size:320px; --logo-gap:28px; margin:22px auto var(--logo-gap); }
  .grid.cf-three, .why-grid, .ua-pill-grid, .kpi, .sol-kpis{ grid-template-columns:1fr !important; gap:16px !important; }
  .card, .cf-card, .ps-wrap .solution-card, .why-card{ padding:18px !important; }
  .chips legend{ margin-bottom:.4rem; }
  .chip span{ font-size:.92rem; padding:.45rem .65rem; }
  .btn-primary{ width:100%; justify-content:center; }
  .cfnet-divider{ margin:22px 0 10px !important; }
  .wave-strip img{ max-height:180px !important; opacity:.18 !important; }
  .footer-wave{ margin-top:8px !important; }
  .footer-wave img{ max-height:180px !important; opacity:.16 !important; }

  /* Smaller diagram */
  #cfnet-diagram{ height:440px !important; }
  .cfnet-hub{ width:112px !important; height:112px !important; }
  .cfnet-logo{ width:72px !important; }
  #cfnet-nodes .cfnet-node{ width:60px !important; height:60px !important; }
}

/* <= 380px */
@media (max-width:380px){
  #cfnet-diagram{ height:410px !important; }
  .cfnet-hub{ width:108px !important; height:108px !important; }
  .cfnet-logo{ width:78px !important; }
  #cfnet-nodes .cfnet-node{ width:60px !important; height:60px !important; }
}

/* <= 360px */
@media (max-width:360px){
  .cf-logo-wrap{ --logo-size:280px; }
  .hero-quantum h1{ font-size:26px; }
}
/* =========================
   CONVERGE FABRIC — FINAL PATCH
   Paste this at the very end of your CSS
   ========================= */

/* 1) Make sure global text is bright */
:root { --text: #ffffff; }
html, body { color: var(--text); }

/* 2) Hero background layers must sit UNDER content */
.hero-quantum { position: relative; overflow: hidden; }
.cf-bg.flow      { position:absolute; inset:0; z-index:0; }
.cf-bg.particles { position:absolute; inset:0; z-index:1; }
.cf-bg-mask      { position:absolute; inset:0; z-index:2; }
/* Content on top of the canvases */
.hero-quantum > .container { position: relative; z-index: 3; }

/* 3) KPI tiles — force visible and styled */
.kpis{
  position: relative;
  z-index: 4; /* above canvases/mask */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
  opacity: 1 !important;
  visibility: visible !important;
}
.kpi-tile{
  display: block !important;
  background: linear-gradient(180deg, rgba(124,245,255,.06), rgba(124,245,255,.02));
  border: 1px solid var(--border, #1e2636);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03);
}
.kpi-num{
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.kpi-num .fx{
  background: linear-gradient(90deg,#a855f7,#22d3ee);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.kpi-sub{ color: var(--muted, #a6b0c3); font-weight: 700; }

/* If an older block used .kpi/.tile, keep that safe too */
.kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.kpi .tile{
  background: linear-gradient(180deg, rgba(124,245,255,.06), rgba(124,245,255,.02));
  border: 1px solid var(--border, #1e2636);
  border-radius: 16px;
  padding: 18px;
}

/* 4) Keep links/icons bright in header/footer */
header, header *, footer, footer * {
  color: var(--text) !important;
  fill: var(--text) !important;
}
header a:hover, footer a:hover {
  color: color-mix(in oklab, #ffffff 85%, var(--accent, #9e34a3) 15%) !important;
}

/* 5) Mobile safety — never hide or collapse KPI grid */
@media (max-width: 700px){
  .kpis{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 16px;
  }
}

/* 6) Hard guard: if any global overlay blocks pointer/visibility */
.kpis, .kpis *{ pointer-events: auto !important; }
/* Typography: body Montserrat, headings Sora */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

html, body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Force headings & key UI to Sora */
:where(h1,h2,h3,h4,h5,h6,
       .section-title,
       .cf-card-title,
       .why-title,
       .pill .pill-text,
       .nav-link,
       .btn, .badge,
       .brand){
  font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
}
/* =========================================
   PROBLEM + SOLUTION — ALIGNMENT + TYPO FIX
   Works with .cfnet-problem + .cfnet-card structure
   ========================================= */

#problem-solution {
  text-align: center;
  padding: 60px 0 40px;
}

#problem-solution .container {
  max-width: 1100px;
  margin-inline: auto;
}

/* =========================================
   PROBLEM + SOLUTION — TYPOSCALE REFINEMENT
   ========================================= */

#problem-solution {
  text-align: center;
  padding: 60px 0 40px;
}

#problem-solution .container {
  max-width: 1100px;
  margin-inline: auto;
}

/* Headings: slightly smaller, balanced with rest of layout */
#problem-solution .cfnet-h2,
#problem-solution .cfnet-h3 {
  font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 14px;
}

#problem-solution .gradient-text {
  display: inline-block;
  vertical-align: baseline;
}

/* Paragraphs: slightly smaller and more relaxed line height */
#problem-solution .cfnet-lead,
#problem-solution .cfnet-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--muted, #a6b0c3);
  max-width: 880px;
  margin: 0 auto 20px;
  line-height: 1.65;
}

/* Solution card refinement */
#problem-solution .cfnet-card {
  margin-inline: auto;
  margin-top: 26px;
  padding: clamp(22px, 2vw, 30px);
  border-radius: 22px;
  border: 1px solid var(--border, #232a3b);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow: 0 14px 38px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
  max-width: 900px;
}

/* Diagram spacing */
#problem-solution #cfnet-diagram {
  margin-top: 36px;
}

/* Responsive scaling */
@media (max-width: 700px) {
  #problem-solution .cfnet-h2,
  #problem-solution .cfnet-h3 {
    font-size: clamp(26px, 6vw, 34px);
  }
  #problem-solution .cfnet-lead,
  #problem-solution .cfnet-sub {
    font-size: 15px;
    line-height: 1.6;
  }
}
/* =========================================
   CONVERGE FABRIC — GLOBAL TYPOGRAPHY SYSTEM
   ========================================= */

/* Headings use Sora — strong, consistent, modern */
h1, h2, h3, h4, h5, h6,
.cfnet-h1, .cfnet-h2, .cfnet-h3, .section-title {
  font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
}

/* Hierarchy — consistent across site */
h1, .cfnet-h1 { font-size: clamp(36px, 5vw, 54px); margin-bottom: 16px; }
h2, .cfnet-h2 { font-size: clamp(32px, 4.5vw, 46px); margin-bottom: 14px; }
h3, .cfnet-h3 { font-size: clamp(26px, 3.8vw, 34px); margin-bottom: 10px; }
h4, h5, h6 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 8px; }

/* Paragraphs, lead text, labels use Montserrat */
body, p, .cfnet-lead, .cfnet-sub, .section-lead, .card p, .cf-card-desc {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--muted, #a6b0c3);
}

/* Gradient headline text stays crisp */
.gradient-text {
  background: linear-gradient(90deg, #a855f7, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subheadings / Callouts */
.section-lead, .cfnet-lead {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--muted, #a6b0c3);
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* Buttons + Pills */
.btn, .pill, .badge {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

/* Metrics, KPI numbers */
.kpi-num, .cfnet-metric-num {
  font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Uniform spacing for section headers */
.section, .cfnet-wrap {
  padding-top: 60px;
  padding-bottom: 60px;
}
/* ==============================
   Footer (Pro) — matches React UI
   ============================== */
.site-footer.pro{
  border-top:1px solid var(--border);
  background:#0a0e16;
  padding:32px 0 26px;
}

.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:24px;
  margin-bottom:18px;
}
@media (max-width:860px){
  .footer-top{ grid-template-columns:1fr; }
}

.footer-brand .logo{ height:28px; width:auto; margin-bottom:10px; }
.footer-blurb{ color:var(--muted); max-width:520px; margin:8px 0 14px; }

.footer-title{
  font-family:'Sora', system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:700; color:#fff; margin:0 0 10px; font-size:1rem;
}

.linklist{ list-style:none; margin:0; padding:0; }
.linklist li{ margin:0 0 8px; }
.linklist a{
  color:var(--muted); text-decoration:none; transition:color .18s ease;
}
.linklist a:hover{ color:#fff; text-decoration:none; }
.linklist--compact li{ margin-bottom:6px; }

/* Socials */
.footer-social{ display:flex; gap:12px; }
.footer-social .icon{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; color:var(--muted);
  background:rgba(15,21,34,.65); transition:transform .18s ease, color .18s ease, border-color .18s ease;
}
.footer-social .icon:hover{
  transform:translateY(-2px);
  color:#fff; border-color: color-mix(in oklab, var(--accent) 60%, black 40%);
}
.footer-social svg{ width:18px; height:18px; }

/* Bottom bar */
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding-top:14px; margin-top:8px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.95rem;
}
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ color:var(--muted); }
.footer-legal a:hover{ color:#fff; }

/* Keep footer text/icons bright when needed */
.site-footer.pro, .site-footer.pro *{ color:var(--text); }
/* =========================
   FOOTER WAVE — ALIGN + ANIMATE
   ========================= */

/* Break the wave out of the .container and center it full-bleed */
.footer-wave{
  position: relative;
  width: 100vw;                 /* span entire viewport */
  left: 50%;                    /* center the 100vw block */
  transform: translateX(-50%);  /* …by pulling it back half */
  margin-top: -28px;            /* tighten gap above footer */
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.footer-wave img{
  display: block;
  width: 100vw;                 /* full-bleed */
  height: auto;
  object-fit: cover;
  object-position: center bottom;
  opacity: .20;                 /* gentle */
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.35));
  animation: waveFloat 10s ease-in-out infinite;
  will-change: transform;
}

/* Subtle bob */
@keyframes waveFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* Mobile tweaks (keep it lighter and shorter) */
@media (max-width: 768px){
  .footer-wave{ margin-top: -10px; }
  .footer-wave img{
    opacity: .16;
    max-height: 200px;          /* prevent tall overflow on phones */
  }
}
/* About page helpers */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.hover-lift{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hover-lift:hover{
  transform: translateY(-4px);
  border-color: rgba(158,52,163,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 50px rgba(158,52,163,.18);
}

@keyframes fadeInUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
.animate-fade-in{ animation: fadeInUp .6s ease both; }

@keyframes pulse{ 0%,100%{opacity:.7; transform:scale(.98)} 50%{opacity:1; transform:scale(1)} }

/* Soft helpers */
.lead{ color:var(--text); }
.text-center{ text-align:center; }
.fabric3d-wrap{position:relative;height:460px;border-radius:18px;overflow:hidden;
  background: radial-gradient(1200px 400px at 50% -50%, rgba(255,60,172,.10), transparent),
              #0E0E1E;}
#fabric3d{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* neat helpers for Discover cards */
.muted{color:var(--muted);}
.section-title{font-size:32px;margin:0 0 8px;}
.icon-badge{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0b0f17;margin-bottom:10px;
}
.icon-badge i{width:20px;height:20px}
.check-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.check-list li{display:flex;align-items:flex-start;gap:8px;color:var(--muted)}
.check-list i{width:18px;height:18px;color:var(--accent)}
.card h3{margin:4px 0 6px}
.card .pill{display:inline-block;margin-top:8px}
.cards .card{display:flex;flex-direction:column;gap:6px}
/* ==== Feature Split ==== */
.feature-split{
  position: relative;
  padding: 56px 0;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(158,52,163,.10), transparent),
    radial-gradient(900px 360px at 90% 100%, rgba(0,255,224,.06), transparent);
  border-top: 1px solid var(--border);
}
.feature-split .split{align-items:center; gap:36px}
.feature-copy .feature-title{font-size:34px;line-height:1.15;margin:10px 0 8px}
.feature-copy .feature-lead{color:var(--muted);font-size:18px;max-width:640px}

/* mini-cards under text */
.mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.mini-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.mini-card h4{margin:0 0 6px;font-size:15px}
.mini-card p{margin:0;color:var(--muted);font-size:14px}

/* Right art area with subtle “melt-in” */
.feature-art{position:relative}
.feature-art .art-bg{
  position:absolute; inset:-14% -10% -14% -10%;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(158,52,163,.22), transparent 60%),
    radial-gradient(50% 50% at 30% 70%, rgba(0,255,224,.14), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
}
.feature-art .art-frame{
  position:relative;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:20px;
  padding:12px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.art-img,.art-svg{display:block;width:min(560px, 100%);height:auto;border-radius:14px}

/* Color themes per section (subtle variety) */
.theme-plum .art-frame{box-shadow:0 30px 90px rgba(158,52,163,.22)}
.theme-cyan .art-frame{box-shadow:0 30px 90px rgba(0,255,224,.18)}
.theme-indigo .art-frame{box-shadow:0 30px 90px rgba(77,163,255,.18)}

/* Responsive */
@media (max-width: 980px){
  .feature-split{padding:44px 0}
  .feature-copy .feature-title{font-size:28px}
  .mini-cards{grid-template-columns:1fr}
}
/* ----- Animated Glow for Converge Fabric Image ----- */
.glow-wrap {
  position: relative;
  overflow: visible;
}

.glow-img {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(158,52,163,.25),
              0 0 48px rgba(0,255,224,.15);
  animation: pulseGlow 5s ease-in-out infinite;
}

.glow-wrap::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 24px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(158,52,163,.25) 0%,
    rgba(0,255,224,.10) 50%,
    transparent 100%
  );
  filter: blur(40px);
  opacity: .4;
  z-index: 1;
  animation: ambientDrift 12s ease-in-out infinite alternate;
}

/* Glow pulsation */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 24px rgba(158,52,163,.25), 0 0 48px rgba(0,255,224,.15); }
  50%     { box-shadow: 0 0 40px rgba(158,52,163,.45), 0 0 72px rgba(0,255,224,.25); }
}

/* Slow movement for ambient backdrop */
@keyframes ambientDrift {
  0%   { transform: scale(1) translate(0,0); opacity:.4; }
  50%  { transform: scale(1.1) translate(10px,-10px); opacity:.6; }
  100% { transform: scale(1) translate(0,0); opacity:.4; }
}