/* ================= Global theme (applies to whole body) ================= */
:root{
  /* Foundational colors */
  --bg:#0A0F1A;      /* deep navy for entire site background */
  --bg-elev:#0F172A; /* elevated panels if needed */
  --text:#E6F1FF;
  --muted:#A3B1CC;

  /* Single accent color ONLY (no gradients for text) */
  --accent:#00E5FF;

  --char-gap:.03em;
}

html, body { height: 100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);                 /* background color on the WHOLE body */
}

/* Utility container for inner content width */
.container{ width:min(1200px,92vw); margin-inline:auto; }

/* ================= HERO (Full-width, full-viewport, single-accent) ================= */
.hero{
  --control-size: clamp(56px, 8vw, 84px);
  --spinner-size: clamp(88px, 12vw, 140px);
  /* force accent to #00E5FF (replaces any previous #C6F91F) */
  --accent: #00E5FF;

  position:relative;
  width:100%;
  min-height:100vh;                /* full page height on desktop */
  margin:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  color:var(--text, #E6F1FF);

  /* rich but subtle background that covers entire viewport */
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(10,102,194,.18), transparent 60%),
    radial-gradient(1000px 640px at 105% 120%, rgba(221,42,123,.16), transparent 65%),
    linear-gradient(180deg, #05070B 0%, var(--bg, #0A0F1A) 100%);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.hero__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 100px);
  mix-blend-mode:overlay; opacity:.16;
}

/* Layout */
.container{ width:min(1200px,92vw); margin-inline:auto; }
.hero__headline{ margin-bottom:clamp(16px,3vw,36px); }
.hero__line{ margin:0; line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
.hero__line--one{ font-weight:800; font-size:clamp(28px,5vw,86px); color:#F3F7FF; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.hero__line--two{ font-weight:800; font-size:clamp(24px,9vw,124px); white-space:normal; min-height:1em; }

/* Typed letters — single accent color */
.typed{ display:inline-block; white-space:inherit; }
.typed .char{
  display:inline-block; margin-right:var(--char-gap, .03em);
  opacity:0; transform:translateY(10px);
  transition:opacity .22s, transform .22s;
  color:var(--accent, #00E5FF);
}
.typed .char:last-child{ margin-right:0; }

/* Grid */
.hero__row{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center; }

/* Left controls */
.hero__col--controls{ display:flex; align-items:center; justify-content:center; gap:12px; }
.play{
  width:var(--control-size); height:var(--control-size); border-radius:999px;
  background:var(--accent, #00E5FF);
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.14);
  cursor:pointer; transition:transform .2s, filter .2s, box-shadow .2s;
  box-shadow:0 10px 40px rgba(0,229,255,.25), inset 0 -6px 18px rgba(0,0,0,.25);
}
.play:hover{ transform:translateY(-2px) scale(1.03); filter:brightness(1.06); box-shadow:0 14px 48px rgba(0,229,255,.35); }
.play__triangle{
  width:0; height:0;
  border-left:20px solid #0b0b0b; border-top:12px solid transparent; border-bottom:12px solid transparent;
  transform:translateX(2px);
}

/* Circle text */
.circle-text{ position:relative; display:grid; place-items:center; width:var(--spinner-size); height:var(--spinner-size); text-decoration:none; color:var(--text, #E6F1FF); }
.circle-text__svg{ width:100%; height:100%; display:block; animation:spin 12s linear infinite; filter:drop-shadow(0 4px 20px rgba(0,0,0,.35)); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.circle-text__text{ font-size:12px; letter-spacing:4px; text-transform:uppercase; fill:var(--text, #E6F1FF); opacity:.9; }
.circle-text__icon{ position:absolute; inset:0; margin:auto; width:clamp(24px,4.2vw,36px); height:clamp(24px,4.2vw,36px); display:grid; place-items:center; pointer-events:none; color:var(--text, #E6F1FF); }

/* Right column copy */
.hero__col--copy{ padding-top:clamp(12px,2.4vw,38px); padding-bottom:clamp(8px,2vw,20px); }
.hero__col--copy p{
  color:var(--muted, #A3B1CC);
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.8; margin:0 0 18px 0; text-align:left;
}
.brand{ color:var(--accent, #00E5FF); font-weight:800; }

/* CTA + arrow */
.btn-wrap{ display:inline-flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text, #E6F1FF); text-decoration:none; font-weight:700;
  padding:12px 16px; border-radius:999px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
  transition:transform .2s, background .2s, border-color .2s, box-shadow .2s;
  max-width:100%;
}
.btn:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.35); }
.btn-arrow{
  flex:0 0 40px; width:40px; height:40px; border-radius:999px;
  background:var(--accent, #00E5FF); color:#0b0b0b;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:background .28s, box-shadow .28s, transform .28s;
}
.btn-wrap:hover .btn-arrow{ background:#ffffff; box-shadow:0 12px 28px rgba(0,0,0,.38); }

/* Breakpoints */
@media (min-width:768px){
  .hero__row{ grid-template-columns:.9fr 1.1fr; gap:12px; }
  .hero__line--two{ font-size:clamp(35px,5.5vw,66px); white-space:nowrap; }
  .btn{ padding:14px 18px; }
}
@media (min-width:1024px){
  .hero__row{ grid-template-columns:.8fr 1.2fr; gap:16px; }
  .btn-wrap{ position:relative; display:inline-block; }
  .btn-arrow{ position:absolute; right:-48px; top:50%; transform:translateY(-50%); }
  .btn-wrap:hover .btn-arrow{ transform:translateY(-50%) rotate(55deg); }
}

/* ↓ MOBILE: tighter vertical space (no full-height, top-aligned content) */
@media (max-width:640px){
  .hero{
    padding-top:8px;
    padding-bottom:8px;
    min-height:auto;            /* reduce big empty space on small screens */
    align-items:start;          /* top align vertically */
    justify-items:center;       /* keep centered horizontally */
  }
  .hero__headline{ margin-bottom:12px; }
  .hero__col--copy{ padding-top:8px; padding-bottom:8px; }
}

/* === NEW: make the typed line smaller on mobile only === */
@media (max-width: 767px){
  .hero__line--two{
    font-size: clamp(16px, 5.5vw, 24px); /* reduced size for small screens */
  }
}


/* ================= Marquee banner (uniform star spacing across the seam) ================= */
.marquee{
  margin:0;
  padding:0;
  background:#0F172A;
  color:#FFFFFF;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Layout + motion */
.marquee__mask{ overflow:hidden; width:100%; }
.marquee__inner{
  display:flex;
  width:max-content;
  will-change: transform;
  gap:0;                               /* no gap between the two ULs */
}
.marquee__inner.run{ animation: marquee-scroll 28s linear infinite; }

/* Tunables */
:root{
  --mq-item-gap: clamp(32px, 5vw, 64px);   /* space between list items */
  --mq-star-size: 1em;                     /* fixed star box */
  --mq-star-gap: 16px;                     /* star → word spacing */
  --mq-row-pad: clamp(20px, 3.6vw, 34px);  /* vertical padding (band height) */
}

.marquee__group{
  display:flex;
  align-items:center;
  gap: var(--mq-item-gap);
  padding-block: var(--mq-row-pad);
  padding-inline: 0;                   /* kill UA left padding on <ul> */
  margin: 0;                           /* kill UA margins */
  list-style: none;
  font-weight:800;
  font-size:clamp(16px, 2.5vw, 28px);
  line-height:1;
}

/* Ensure the seam behaves like “one more item gap” */
.marquee__group + .marquee__group{
  margin-left: var(--mq-item-gap);     /* same spacing as between <li> items */
}

/* Each item: grid with a fixed star column and a defined gap to the word */
.marquee__group li{
  display:inline-grid;
  grid-auto-flow: column;
  align-items:center;
  column-gap: var(--mq-star-gap);      /* star → word spacing (always identical) */
  white-space:nowrap;
}

/* Star before EVERY item — fixed width box prevents drift */
.marquee__group li::before{
  content:"✱";
  color:#FFFFFF;
  display:inline-block;
  width: var(--mq-star-size);
  text-align:center;
  transform: translateY(-0.02em);
}

/* Smooth, seamless scroll (requires two identical groups in HTML) */
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* (optional) spacer clean-up if used */
.spacer{
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* =========================
   ABOUT SECTION — full CSS
   ========================= */

/* Section container (no local background; body handles global gradient) */
.about{
  /* FORCE this section to use cyan, even if a global --accent is lime */
  --accent:#00E5FF;

  position:relative;
  background:transparent;
  color:var(--text, #E6F1FF);
  overflow:hidden;
}

/* Scrim off (keep the global body background clean) */
.about__scrim{ display:none; }

/* Grid: two columns, top padding adjusted */
.about__grid{
  width:min(1200px,92vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:.45fr .55fr;
  gap:40px;
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(60px, 9vw, 90px);
  align-items:start;
}

/* LEFT column: top-aligned sticky (no extra height) */
.about__left{
  position: sticky;
  top: 0;
  align-self: start;
  height: auto;
  padding-block: 0;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:22px;
}

/* Tag + headline */
.about__tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--muted, #A3B1CC);
  font:800 12px/1 Inter,system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.about__taglogo{ color:var(--accent) !important; }

.about__headline{
  margin:0;
  font-weight:400;
  font-size:clamp(26px,4.6vw,48px);
  line-height:1.15;
}
.accent-bold{ color:var(--accent) !important; font-weight:800; transition:color .25s ease; }
.about__left:hover .accent-bold{ color:#ffffff; }

/* CTA area + round arrow badge */
.about__cta{ display:flex; align-items:center; gap:14px; margin-top:8px; }

.about__cta .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 20px; border-radius:999px; font-weight:700;
  text-decoration:none; background:rgba(255,255,255,.05); color:#fff;
  border:1px solid rgba(255,255,255,.14);
  transition:background .2s, transform .2s, border-color .2s;
}
.about__cta .btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}

/* cyan circular arrow, tilted by default; straight on hover */
.about__cta .arrow-badge{
  appearance:none;
  width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  background:var(--accent); color:#0b0b0b;
  display:inline-grid; place-items:center; line-height:0; cursor:pointer;
  box-shadow:0 10px 28px rgba(0,229,255,.28), inset 0 -8px 20px rgba(0,0,0,.25);
  transform:rotate(-25deg);
  transition:transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
}
.about__cta .arrow-badge svg{ width:20px; height:20px; display:block; }
.about__cta .arrow-badge:hover{
  background:#ffffff; color:#000; transform:rotate(0deg);
  box-shadow:0 12px 32px rgba(0,229,255,.32);
}

/* Hide the decorative black orb */
.about__orb{ display:none !important; }

/* RIGHT column — normal flow */
.about__right{ height:auto; overflow:visible; }

/* Timeline + rail */
.timeline-list{
  --rail:rgba(255,255,255,.14);
  --pad-left: 76px;
  --rail-left: 30px;
  --marker: 18px;
  --dot: 6px;
  --ring-bdr: 2px;

  position:relative;
  padding-left:var(--pad-left);
}
.timeline-list::before{
  content:"";
  position:absolute; left:var(--rail-left); top:0; bottom:0;
  width:2px; background:var(--rail);
}

.tl-ul{ margin:0; padding:0; list-style:none; display:grid; row-gap:56px; }
.tl-li{ display:grid; grid-template-columns:1fr; row-gap:10px; }

.tl-ico{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  color:var(--accent);
  background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.25);
}
.tl-ico svg{ width:30px; height:30px; display:block; }

/* Title + perfectly centered markers */
.tl-title{
  position:relative; margin:0; font-weight:800;
  font-size:clamp(18px,2.2vw,24px); letter-spacing:-.01em;
}

/* Put ring & dot exactly on the rail and center via translate */
.tl-title::before,
.tl-title::after{
  content:"";
  position:absolute;
  left: calc(var(--rail-left) - var(--pad-left));
  top: .8em;
  transform: translate(-50%, -50%);
  border-radius:50%;
}
/* Ring */
.tl-title::before{
  width: var(--marker);
  height: var(--marker);
  border: var(--ring-bdr) solid var(--accent);
  background: transparent;
}
/* Dot */
.tl-title::after{
  width: var(--dot);
  height: var(--dot);
  background: var(--accent);
}

/* Description text */
.tl-desc{
  margin:0; color:var(--muted, #A3B1CC);
  line-height:1.8; font-size:clamp(14px,1.6vw,16px);
}

/* Mobile */
@media (max-width:980px){
  .about__grid{ grid-template-columns:1fr; gap:28px; }
  .about__left{ position:relative; top:auto; }
}



:root{
  --sv-bg:#0A0F1A;
  --sv-text:#E6F1FF;
  --sv-muted:#A3B1CC;
  --sv-accent:#00E5FF;

  --sv-wrapW: min(1200px, 92vw);
  --sv-radius-xl: 26px;
}

/* Section background (same family as ABOUT) */
.services{
  position: relative;
  background: transparent; /* removed background color */
  color: var(--sv-text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.services__scrim{
  position: absolute; inset: 0; pointer-events: none;
  background: none; /* removed scrim background */
}
.services__wrap{
  width: var(--sv-wrapW);
  margin-inline: auto;
  padding: clamp(60px, 9vw, 90px) 0;
}

/* Header row */
.services__head{
  display: grid;
  grid-template-columns: .62fr .38fr;
  gap: 36px;
  align-items: end;
  margin-bottom: 34px;
}
.services__left{ display:flex; flex-direction:column; gap:14px; }
.services__tag{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--sv-muted);
  font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.services__taglogo{ color: var(--sv-accent); }

/* Heading */
.services__headline{
  margin:0; font-weight:400; font-size: clamp(28px, 4.6vw, 52px); line-height:1.12;
}
.sv-accent-bold{ color:var(--sv-accent); font-weight:800; transition:color .25s ease; }
.services__left:hover .sv-accent-bold{ color:#fff; }

/* Right column copy + CTA */
.services__intro{
  margin:0 0 18px; color:var(--sv-muted); line-height:1.8;
  font-size:clamp(14px,1.6vw,16px);
}
.services__cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sv-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 22px; border-radius:999px; font-weight:800;
  background:rgba(255,255,255,.05); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.14);
  transition:background .2s, transform .2s, border-color .2s, box-shadow .2s;
}
.sv-btn--pill:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.sv-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(0,229,255,.45);
}

/* “All Services” circular arrow – tilts, straightens on hover */
.sv-arrow{
  width:50px; height:50px; border-radius:999px; border:1px solid rgba(0,0,0,.25);
  background:var(--sv-accent); color:#0b0b0b; display:grid; place-items:center;
  box-shadow:0 12px 32px rgba(0,229,255,.28), inset 0 -8px 20px rgba(0,0,0,.25);
  transform:rotate(-25deg); transition:transform .28s, background .28s, color .28s;
  cursor:pointer;
}
.sv-arrow svg{ width:20px; height:20px; }
.sv-arrow:hover, .services__cta:hover .sv-arrow{ background:#fff; color:#000; transform:rotate(0); }
.sv-arrow:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(0,229,255,.45);
}

/* Cards grid (desktop/tablet defaults) */
.services__grid{
  display:grid; gap:34px; margin-top:22px;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}
@media (min-width:1160px){
  .services__grid{ grid-template-columns: repeat(3, minmax(280px, 1fr)); }
}

/* Card */
.svc-card{
  position:relative; padding:38px; border-radius:var(--sv-radius-xl); overflow:hidden;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(0,229,255,.10), transparent 70%),
    linear-gradient(180deg, #0D1726 0%, #0B1320 48%, #0A0F1A 100%);
  border:1px solid rgba(0,229,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.svc-card:hover{
  border-color: rgba(0,229,255,.35);
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* corner icon */
.svc-ico{
  position:absolute; left:26px; top:26px;
  width:58px; height:58px; border-radius:16px;
  display:grid; place-items:center; color:var(--sv-accent);
  background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.25);
}
.svc-ico svg{ width:34px; height:34px; display:block; }

/* top-right arrow */
.svc-arrow{
  position:absolute; right:22px; top:22px; color:var(--sv-text);
  transform:rotate(-25deg); transition:transform .25s ease, color .25s ease;
  opacity:.95;
}
.svc-card:hover .svc-arrow{ transform:rotate(0deg) translateX(2px); color:#ffffff; }
.svc-arrow svg{ width:28px; height:28px; }

/* text */
.svc-title{
  margin:82px 0 10px;
  font-weight:800; font-size:clamp(18px,2.2vw,24px); letter-spacing:-.01em;
}
.svc-desc{
  margin:0; color:var(--sv-muted);
  font-size:clamp(14px,1.6vw,16px); line-height:1.8;
}

/* Footer */
.services__foot{
  margin:26px 0 0; color:var(--sv-muted);
  text-align:center; font-size:clamp(14px,1.6vw,16px);
}

/* ======= Responsive tweaks ======= */
@media (max-width:980px){
  .services__head{ grid-template-columns:1fr; }
}

/* Tablet */
@media (max-width:900px){
  .services__grid{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

/* PHONE: single centered card per row — improved centering & sizing */
@media (max-width:768px){
  .services__wrap{ padding: 48px 0; }

  .services__grid{
    grid-template-columns: 1fr;
    justify-items: center;          /* center the grid item */
    align-items: stretch;
    gap: 18px;
    padding-inline: 12px;           /* safe gutters on small screens */
    width: 100%;
    box-sizing: border-box;
  }

  /* full-width (but capped) card that’s truly centered */
  .svc-card{
    width: 100%;
    max-width: 560px;               /* visually balanced width cap */
    margin: 0 auto;                 /* center in case of edge cases */
    padding: 20px;
    border-radius: 20px;
    box-sizing: border-box;
  }

  .svc-ico{
    left:16px; top:16px;
    width:46px; height:46px; border-radius:12px;
  }
  .svc-ico svg{ width:26px; height:26px; }
  .svc-arrow{ right:12px; top:12px; }
  .svc-arrow svg{ width:24px; height:24px; }
  .svc-title{ margin:60px 0 6px; font-size:20px; }
  .svc-desc{ font-size:15px; line-height:1.65; }

  .services__cta{ gap:10px; }
  .sv-btn{ height:44px; padding:0 16px; }
  .sv-arrow{ width:44px; height:44px; }
}

/* Small phones: keep it tight and perfectly centered */
@media (max-width:420px){
  .services__wrap{ padding: 40px 0; }

  .svc-card{
    max-width: 100%;
    width: 100%;
    padding: 16px;
    margin: 0 auto;
  }

  .svc-title{ margin-top:54px; font-size:18px; }
  .svc-desc{ font-size:14px; line-height:1.6; }
  .svc-ico{ left:14px; top:14px; width:40px; height:40px; border-radius:10px; }
  .svc-ico svg{ width:22px; height:22px; }
  .svc-arrow{ right:10px; top:10px; }
  .svc-arrow svg{ width:22px; height:22px; }
}

/* Very small devices */
@media (max-width:340px){
  .svc-title{ font-size:17px; margin-top:50px; }
  .sv-btn{ height:42px; padding:0 14px; }
  .sv-arrow{ width:42px; height:42px; }
}

/* ===== OUR PRODUCTS: keep CTA at the bottom of every card ===== */

/* Make each card a vertical flex container */
.services .svc-card{
  display: flex;
  flex-direction: column;
  height: 100%;                  /* allow stretching within the grid row */
}

/* Let the body text take the available space above the button */
.services .svc-card .svc-desc{
  flex: 1 1 auto;                /* grows/shrinks so CTA can sit at bottom */
  margin-bottom: 0;              /* normalize spacing */
}

/* Button pinned to the bottom with consistent spacing */
.services .svc-card .sv-btn{
  margin-top: auto;              /* pushes CTA to the bottom */
  align-self: center;            /* center button on all screen sizes */
}

/* Ensure grid items stretch to same height within a row */
.services .services__grid{
  align-items: stretch;
}


:root{
  --pricing-text:#E6F1FF;
  --pricing-muted:#A3B1CC;
  --pricing-accent:#00E5FF;

  --pricing-wrapW: min(1200px,92vw);

  --pricing-card-bg: linear-gradient(
    180deg,
    #0D1726 0%,
    #0B1320 48%,
    #0A0F1A 100%
  );
  --pricing-card-bdr: rgba(0,229,255,.18);
  --pricing-card-radius:26px;
}

/* =========================
   PRICING SECTION WRAPPER
   ========================= */
.pricing{
  position:relative;
  background:transparent !important;   /* keep global dark / cyan theme */
  color:var(--pricing-text);
  overflow:hidden;
}
.pricing__wrap{
  width:var(--pricing-wrapW);
  margin-inline:auto;
  padding:clamp(56px,7vw,86px) 0;
}

/* =========================
   HEADER (title + toggle)
   ========================= */
.pricing__head{
  max-width:760px;
  margin:0 auto clamp(32px,4vw,40px) auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.pricing__tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--pricing-muted);
  font:800 12px/1 Inter, system-ui;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.pricing__taglogo{
  color:var(--pricing-accent);
}

.pricing__headline{
  margin:0;
  font-weight:400;
  font-size:clamp(26px,4vw,42px);
  line-height:1.12;
  text-align:center;
  color:var(--pricing-text);
}
.pricing-accent{
  color:var(--pricing-accent);
  font-weight:800;
  transition:color .25s ease;
}
.pricing__head:hover .pricing-accent{
  color:#fff;
}

.pricing__intro{
  margin:0;
  color:var(--pricing-muted);
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.8;
  text-align:center;
  max-width:560px;
}

/* Billing toggle row */
.billing{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:clamp(13px,1.4vw,15px);
  color:var(--pricing-muted);
  user-select:none;
}

.billing__label{
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--pricing-muted);
  font-weight:600;
  line-height:1.3;
}
.billing__save{
  color:#00E5FF;
  font-weight:700;
  font-size:.8em;
  line-height:1.2;
}

/* Custom switch */
.billing__toggle{
  position:relative;
  width:44px;
  height:24px;
  cursor:pointer;
  display:inline-block;
}
.billing__checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.billing__track{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 12px rgba(0,229,255,.0);
  transition:all .22s ease;
}
.billing__knob{
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--pricing-accent);
  box-shadow:0 8px 20px rgba(0,229,255,.4), inset 0 -6px 16px rgba(0,0,0,.4);
  transition:all .22s ease;
}

.billing__checkbox:checked + .billing__track{
  border-color:rgba(0,229,255,.4);
  box-shadow:
    0 10px 30px rgba(0,229,255,.35),
    0 0 16px rgba(0,229,255,.5),
    0 0 48px rgba(0,229,255,.25);
  background:rgba(0,229,255,.08);
}
.billing__checkbox:checked + .billing__track .billing__knob{
  transform:translateX(20px);
  background:#ffffff;
  box-shadow:0 8px 20px rgba(255,255,255,.35), inset 0 -6px 16px rgba(0,0,0,.4);
}

/* =========================
   GRID OF CARDS
   ========================= */
.pricing__grid{
  display:grid;
  gap:26px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
@media (max-width:980px){
  .pricing__grid{
    grid-template-columns:1fr;
    max-width:560px;
    margin-inline:auto;
  }
}

/* =========================
   CARD
   ========================= */
.pricecard{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:420px; /* consistent vertical size */
  background:var(--pricing-card-bg);
  border:1px solid var(--pricing-card-bdr);
  border-radius:var(--pricing-card-radius);
  box-shadow:0 24px 60px rgba(0,0,0,.35);

  /* ↓ tighter vertical padding (was 20px 24px 16px, now even less) */
  padding:16px 24px 12px;

  isolation:isolate;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pricecard:hover,
.pricecard:focus-visible{
  border-color:rgba(0,229,255,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(-2px);
  outline:none;
}

/* "Recommended" ribbon for Starter */
.pricecard--starter .pricecard__ribbon{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:42px;
  line-height:42px;
  background:#e53935;
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-align:center;
  letter-spacing:.02em;
  border-top-left-radius:var(--pricing-card-radius);
  border-top-right-radius:var(--pricing-card-radius);

  /* keep no glow/shadow under the banner */
  box-shadow:none;
}

/* push content below ribbon (tighter than before) */
.pricecard--starter{
  padding-top:52px; /* was 56px+; reduced */
}

/* =========================
   CARD HEADER BLOCK
   ========================= */
.pricecard__head{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;

  /* tighter space below the header area */
  margin-bottom:10px;
}
.pricecard__title{
  margin:0;
  font-weight:700;
  font-size:clamp(18px,2vw,22px);
  color:#fff;
  letter-spacing:-.01em;
  text-align:center;
}
.pricecard__limit{
  margin:0;
  font-size:clamp(13px,1.5vw,15px);
  color:var(--pricing-muted);
  font-weight:500;
  line-height:1.4;
  text-align:center;
}

/* pricing amount block */
.pricecard__amounts{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.pricecard__amount{
  margin:0;
  font-weight:700;
  font-size:clamp(26px,3vw,32px);
  line-height:1.2;
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}
.pricecard__per{
  font-size:.55em;
  font-weight:500;
  color:var(--pricing-muted);
  margin-left:.25em;
}

/* Monthly vs yearly toggle display */
.price-yearly{ display:none; }
#pricing.yearly-active .price-monthly{ display:none; }
#pricing.yearly-active .price-yearly{ display:block; }

/* =========================
   FEATURES LIST
   ========================= */
/* UL wrapper */
.pricecard__features{
  list-style:none;
  padding:0;
  margin:0 0 12px 0;            /* a little less space under the list */
  flex:1 1 auto;
  display:block;                /* don't force grid row gaps anymore */
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.4;              /* tighter line height overall */
}

/* LI rows */
.pricecard__features li{
  position:relative;
  padding-left:24px;
  color:var(--pricing-muted);

  /* kill browser default block spacing aggressively */
  margin:0 0 2px 0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1.4 !important;
}

/* make sure any text wrapper inside <li> (like <p>) doesn't re-introduce margins */
.pricecard__features li > *{
  margin:0 !important;
  padding:0 !important;
  line-height:1.4 !important;
}

/* remove extra margin after the last bullet */
.pricecard__features li:last-child{
  margin-bottom:0 !important;
}

/* teal check icon */
.pricecard__features li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:var(--pricing-accent);
  font-weight:800;
  line-height:1.2;
  font-size:.9em;
  text-shadow:0 0 12px rgba(0,229,255,.5);
}

/* =========================
   CTA BUTTON
   ========================= */
.pricecard__cta{
  display:flex;
  justify-content:center;
  margin-top:auto;              /* button hugs bottom of card */
}
.pricecard__btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 70%),
    rgba(36,42,54,.86);
  border-radius:999px;
  padding:12px 18px;            /* slightly tighter button padding */
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  line-height:1.2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 30px rgba(0,0,0,.6),
    0 0 24px rgba(0,229,255,.0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}
.pricecard__btn:hover{
  background:
    radial-gradient(140% 160% at 50% -40%, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 72%),
    rgba(56,64,78,.92);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 16px 40px rgba(0,0,0,.75),
    0 0 32px rgba(0,229,255,.4);
}
.pricecard__btn:active{
  transform:translateY(0);
}

/* =========================
   RESPONSIVE REFINEMENTS
   ========================= */
@media (max-width:480px){
  .pricing__wrap{
    padding:clamp(40px,8vw,56px) 0;
  }

  .pricing__headline{
    font-size:clamp(22px,6vw,32px);
  }

  .pricing__intro{
    font-size:14px;
    line-height:1.7;
  }

  .billing{
    justify-content:center;
    row-gap:10px;
  }

  .billing__toggle{
    width:48px;
    height:26px;
  }
  .billing__track{
    border-radius:999px;
  }
  .billing__knob{
    width:22px;
    height:22px;
  }

  .pricing__grid{
    gap:20px;
  }

  .pricecard{
    border-radius:20px;
    min-height:420px;

    /* match desktop tightening (was 16px 24px 12px) */
    padding:16px 20px 12px;
  }

  .pricecard--starter{
    padding-top:48px; /* even tighter under ribbon on mobile */
  }

  .pricecard--starter .pricecard__ribbon{
    height:38px;
    line-height:38px;
    font-size:13px;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
  }

  .pricecard__title{
    font-size:18px;
  }
  .pricecard__amount{
    font-size:28px;
  }

  .pricecard__features{
    font-size:14px;
    line-height:1.4;
    margin:0 0 12px 0;
  }
  .pricecard__features li{
    margin:0 0 2px 0 !important;
    line-height:1.4 !important;
  }
  .pricecard__features li > *{
    line-height:1.4 !important;
  }

  .pricecard__btn{
    font-size:14px;
    padding:12px 18px;
  }
}

/* guard against horizontal scroll from glow/shadows on small screens */
@media (max-width:768px){
  .pricing,
  .pricing__wrap,
  .pricing__grid,
  .pricecard{
    max-width:100%;
    overflow-x:hidden;
  }
  html, body{
    overflow-x:hidden;
  }
}





:root{
  --why-bg: transparent;            /* section bg removed to use global body bg */
  --why-text:#E6F1FF;
  --why-muted:#A3B1CC;
  --why-accent:#00E5FF;

  --why-wrapW:min(1200px, 92vw);
  --why-radius-xl:22px;
  --why-card-bdr: rgba(0,229,255,.18);
}

/* section backdrop */
.why{ position:relative; background:var(--why-bg) !important; color:var(--why-text); overflow:hidden; }
.why__scrim{
  position:absolute; inset:0; pointer-events:none;
  display:none !important; /* scrim off to keep body gradient clean */
}
.why__wrap{ width:var(--why-wrapW); margin-inline:auto; padding:clamp(60px,9vw,90px) 0; }

/* equal columns */
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }

/* left */
.why__left{ display:flex; flex-direction:column; gap:18px; }
.why__tag{
  display:inline-flex; align-items:center; gap:10px; color:var(--why-muted);
  font:800 12px/1 Inter, system-ui; letter-spacing:.16em; text-transform:uppercase;
}
.why__taglogo{ color:var(--why-accent); }

/* ↓ smaller headline (decreased size) */
.why__headline{
  margin:0 0 18px 0;
  font-weight:400;
  font-size:clamp(26px,4vw,48px);
  line-height:1.12;
}
.why-accent{ color:var(--why-accent); font-weight:800; transition:color .25s ease; }
.why__left:hover .why-accent{ color:#ffffff; }

/* cards */
.why__list{ display:grid; gap:22px; margin-top:10px; }
.why__card{
  position:relative; overflow:hidden; padding:26px 28px; border-radius:var(--why-radius-xl);
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(0,229,255,.10), transparent 70%),
    linear-gradient(180deg, #0D1726 0%, #0B1320 48%, #0A0F1A 100%);
  border:1px solid var(--why-card-bdr);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  isolation:isolate;
}
/* dual-sided sheen hover */
.why__card::before,
.why__card::after{
  content:""; position:absolute; top:0; bottom:0; width:55%; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, rgba(0,229,255,0.0) 0%, rgba(0,229,255,0.10) 50%, rgba(0,229,255,0.0) 100%);
  mix-blend-mode:screen; transition:transform .55s cubic-bezier(.22,.61,.36,1); will-change:transform; opacity:.85;
}
.why__card::before{ left:0; transform:translateX(-102%); }
.why__card::after { right:0; transform:translateX(102%); }
.why__card:hover::before, .why__card:hover::after{ transform:translateX(0); }

.why__card-title{ position:relative; z-index:1; margin:0 0 8px; font-weight:800; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em; }
.why__card-text{ position:relative; z-index:1; margin:0; color:var(--why-muted); line-height:1.85; font-size:clamp(14px,1.6vw,16px); }

/* right column – image vertically centered between top & bottom */
.why__right{
  display:grid;
  grid-template-rows: min-content 1fr;
  row-gap:18px;
  min-height: 100%;
}
.why__intro{ margin:4px 0 0; color:var(--why-muted); line-height:1.85; font-size:clamp(14px,1.6vw,16px); }

/* center the figure within the remaining space */
.why__figure{
  margin:0;
  align-self:center;
  justify-self:center;
  display:flex; align-items:center; justify-content:center;
  min-height: 420px;
}
.why__img{
  width:100%; height:auto; display:block;
  border-radius:28px; box-shadow:0 28px 80px rgba(0,0,0,.45);
  max-height: 560px;
  object-fit:cover;
}

/* responsive */
@media (max-width: 980px){
  .why__grid{ grid-template-columns:1fr; }
  .why__figure{ min-height: 0; }
  .why__img{ max-height:none; }
}

:root{
  --join-bg: transparent;                     /* section bg removed to use global body */
  --join-text:#E6F1FF;                        /* tech-light text */
  --join-muted:#A3B1CC;                       /* muted copy */
  --join-accent:#00E5FF;                      /* cyan accent to match hero */

  --join-wrapW:min(1200px,92vw);
  --join-panel: linear-gradient(180deg,#0D1726 0%,#0B1320 48%,#0A0F1A 100%); /* dark panel like hero */
  --join-bdr: rgba(0,229,255,.18);            /* cyan-tinted border */

  /* Compact card geometry */
  --badge-size: 64px;        /* was 72px */
  --badge-overlap: 20px;
}

/* Section background */
.join{
  position:relative;
  background:var(--join-bg) !important;       /* keep section transparent */
  color:var(--join-text);
  overflow:hidden;
}
.join__scrim{
  position:absolute; inset:0; pointer-events:none;
  display:none !important;                     /* remove local glow; let body show through */
  background:
    radial-gradient(900px 600px at 75% 25%, rgba(0,229,255,.12), transparent 60%),
    radial-gradient(900px 600px at 75% 70%, rgba(0,229,255,.09), transparent 60%);
}
/* tighter vertical padding */
.join__wrap{
  width:var(--join-wrapW);
  margin-inline:auto;
  padding:clamp(36px,6.5vw,64px) 0;
}

/* ROW 1 */
.join__head{
  display:grid;
  grid-template-columns:.62fr .38fr;
  gap:38px;
  align-items:end;
}
.join__tag{
  display:inline-flex; align-items:center; gap:10px; color:var(--join-muted);
  font:800 12px/1 Inter,system-ui; letter-spacing:.16em; text-transform:uppercase;
}
.join__taglogo{ color:var(--join-accent); }

/* smaller headline */
.join__headline{
  margin:.25rem 0 0 0;
  font-weight:400;
  font-size: clamp(22px, 3.4vw, 42px);
  line-height:1.12;
}
.join-accent{ color:var(--join-accent); font-weight:800; transition:color .25s ease; }
.join__left:hover .join-accent{ color:#fff; }

.join__intro{
  margin:0; color:var(--join-muted); line-height:1.85;
  font-size:clamp(13px,1.45vw,15px);
}

/* ROW 2 — cards */
.join__grid{
  margin-top:28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.joincard{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;

  padding:18px 18px 18px calc(16px + (var(--badge-size) - var(--badge-overlap)) + 16px);
  min-height: calc(var(--badge-size) + 6px);

  border-radius: clamp(20px, 2.6vw, 30px);
  background: var(--join-panel);
  border:1px solid var(--join-bdr);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  color:var(--join-text); text-decoration:none;
  overflow:visible; isolation:isolate; z-index:0;

  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.joincard:hover, .joincard.is-focus{
  border-color: rgba(0,229,255,.32);
  transform: translateY(-2px);
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}

/* Left circular badge */
.joincard__badge{
  position:absolute; left:calc(0px - var(--badge-overlap)); top:50%;
  transform:translateY(-50%);
  width:var(--badge-size); height:var(--badge-size); border-radius:50%;
  display:grid; place-items:center;
  background:var(--join-accent); color:#0b0b0b;
  box-shadow:0 12px 30px rgba(0,229,255,.30), inset 0 -10px 20px rgba(0,0,0,.25);
  transition:background .25s, color .25s, transform .25s;
  z-index:1;
}
.joincard:hover .joincard__badge,
.joincard.is-focus .joincard__badge{
  background:#fff; color:#000; transform:translateY(-50%) rotate(3deg);
}

/* Text */
.joincard__title{
  margin:0 0 2px;
  font-weight:800; letter-spacing:-.01em; font-size:clamp(15px,1.35vw,18px);
}
.joincard__meta{
  margin:0; color:var(--join-muted); font-size:clamp(11px,1.05vw,13px);
}

/* CTA arrow (consistent position across all cards) */
.joincard__cta{
  position:relative;
  width:42px; height:42px; min-width:42px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.30);
  background:transparent; color:var(--join-text);
  transition: transform .25s, background .25s, color .25s, border-color .25s;
  overflow:hidden;

  justify-self:end;     /* right edge */
  align-self:center;    /* vertical center regardless of text lines */
}
.joincard__cta svg{
  position:absolute; inset:0; margin:auto;
  width:20px; height:20px;
  transition:opacity .18s ease, transform .25s ease;
}
.joincard__cta .cta-right{ opacity:1; transform:translateX(0) scale(1); }
.joincard__cta .cta-ne   { opacity:0; transform:scale(.85) rotate(-10deg); }

.joincard:hover .joincard__cta,
.joincard.is-focus .joincard__cta{
  background:#fff; color:#000; border-color:transparent;
  transform: translateX(2px);
}

/* Responsive */
@media (max-width:1100px){
  .join__head{ grid-template-columns:1fr; gap:16px; }
}

/* ===== Mobile behavior tweaks ===== */
@media (max-width:980px){
  :root{ --badge-size:56px; --badge-overlap:16px; }

  /* one card per row and centered */
  .join__grid{
    grid-template-columns:1fr;
    justify-items:center;
    gap:22px;
  }

  /* ↓ narrower card + hard centering (reduced width) */
  .joincard{
    width: min(420px, 60vw);     /* was 84vw — make cards slimmer */
    margin-inline: auto;
    padding:10px 16px 16px calc(14px + (var(--badge-size) - var(--badge-overlap)) + 14px);
  }
}

/* extra-small phones: a touch narrower again and centered */
@media (max-width:420px){
  .joincard{ width: 70vw; }      /* keep nicely centered & slim on very small screens */
}


:root{
  /* THEME aligned to hero */
  --how-bg: transparent;                           /* section bg removed */
  --how-text:#E6F1FF;                              /* tech-light text */
  --how-muted:#A3B1CC;                             /* muted copy */
  --how-accent:#00E5FF;                            /* cyan accent */
  --how-panel: linear-gradient(180deg,#0D1726 0%, #0B1320 48%, #0A0F1A 100%);
  --how-bdr: rgba(0,229,255,.18);
  --how-wrapW: min(1200px,92vw);
  --radius-card: 26px;
}

/* section */
.how{ position:relative; background:var(--how-bg) !important; color:var(--how-text); overflow:hidden; }
.how__scrim{
  position:absolute; inset:0; pointer-events:none;
  display:none !important;  /* hide local glow; use body backdrop */
  background:
    radial-gradient(900px 640px at 70% 10%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(900px 640px at 72% 70%, rgba(0,229,255,.08), transparent 60%);
}
.how__wrap{ width:var(--how-wrapW); margin-inline:auto; padding:clamp(60px,8vw,90px) 0; }

/* row 1 */
.how__head{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:end; }
.how__tag{
  display:inline-flex; gap:10px; align-items:center;
  color:var(--how-muted); font:800 12px/1 Inter,system-ui;
  letter-spacing:.16em; text-transform:uppercase;
}
.how__taglogo{ color:var(--how-accent); }

.how__headline{
  margin:.4rem 0 0 0;
  font-weight:400;
  font-size: clamp(28px,5vw,56px);
  line-height:1.1;
}
.how-accent{ color:var(--how-accent); font-weight:800; }

.how__intro{
  margin:0;
  color:var(--how-muted);
  font-size: clamp(14px,1.6vw,16px);
  line-height:1.85;
}

/* row 2 */
.how__grid{
  margin-top:36px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:26px;
}

.howcard{
  position:relative; display:flex; flex-direction:column;
  padding:22px; border-radius:var(--radius-card);
  background:var(--how-panel);
  border:1px solid var(--how-bdr);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  transition: box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
  isolation:isolate;
}
.howcard:hover, .howcard.is-focus{ border-color:rgba(0,229,255,.32); box-shadow:0 28px 80px rgba(0,0,0,.45); }

/* top row inside card */
.howcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.howcard__title{ margin:0; font-weight:800; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em; }
.howcard__cta{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.30); color:var(--how-text); background:transparent;
}

/* text */
.howcard__text{
  margin:14px 0 18px 0; color:var(--how-muted);
  font-size:clamp(14px,1.6vw,16px); line-height:1.85;
}

/* bottom row */
.howcard__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }

.howcard__step-label{ color:#b4b9c4; font-weight:800; letter-spacing:.12em; font-size:12px; }
.howcard__step-num{ color:var(--how-accent); font-weight:800; font-size:clamp(26px,3.6vw,36px); line-height:1; }

/* corner block */
.howcard__corner{
  position:relative; width:min(38%, 210px); height:118px;
  background:var(--how-accent); color:#0b0b0b;
  border-top-left-radius:18px; border-bottom-right-radius:16px;
  display:grid; place-items:center;
  transition:background .25s ease, color .25s ease;
}
.howcard:hover .howcard__corner,
.howcard.is-focus .howcard__corner{ background:#fff; color:#000; }

/* card icon inside corner */
.howcard__corner-icon{ display:block; }

@media (max-width: 1100px){
  .how__head{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width: 980px){
  .how__grid{ grid-template-columns:1fr; }
  .howcard__corner{ width:44%; height:120px; }
}

/* ======= (retain original duplicate block, theme-matched) ======= */
:root{
  --how-bg: transparent;
  --how-text:#E6F1FF;
  --how-muted:#A3B1CC;
  --how-accent:#00E5FF;
  --how-panel: linear-gradient(180deg,#0D1726 0%, #0B1320 52%, #0A0F1A 100%);
  --how-bdr: rgba(0,229,255,.18);
  --how-wrapW: min(1200px,92vw);
  --radius-card: 26px;
}

.how{ position:relative; background:var(--how-bg) !important; color:var(--how-text); overflow:hidden; }
.how__scrim{
  position:absolute; inset:0; pointer-events:none;
  display:none !important;
  background:
    radial-gradient(900px 640px at 70% 10%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(900px 640px at 72% 70%, rgba(0,229,255,.08), transparent 60%);
}
.how__wrap{ width:var(--how-wrapW); margin-inline:auto; padding:clamp(56px,7.6vw,86px) 0; }

/* Row 1 */
.how__head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.how__tag{
  display:inline-flex; gap:10px; align-items:center;
  color:var(--how-muted); font:800 12px/1 Inter,system-ui; letter-spacing:.16em; text-transform:uppercase;
}
.how__taglogo{ color:var(--how-accent); }

/* ↓ smaller headline as requested */
.how__headline{
  margin:.35rem 0 0 0;
  font-weight:400;
  font-size: clamp(24px, 4vw, 44px);
  line-height:1.1;
}
.how-accent{ color:var(--how-accent); font-weight:800; }

.how__intro{ margin:0; color:var(--how-muted); font-size:clamp(14px,1.6vw,16px); line-height:1.85; }

/* Row 2 */
.how__grid{
  margin-top:32px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}

.howcard{
  position:relative; display:flex; flex-direction:column;
  padding:22px 22px 150px 22px;         /* extra bottom pad to clear absolute elements */
  border-radius:var(--radius-card);
  background:var(--how-panel);
  border:1px solid var(--how-bdr);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  transition:border-color .25s, box-shadow .25s;
  overflow:hidden; isolation:isolate;
}
.howcard:hover, .howcard.is-focus{ border-color:rgba(0,229,255,.32); box-shadow:0 28px 80px rgba(0,0,0,.45); }

/* top row */
.howcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.howcard__title{ margin:0; font-weight:800; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em; }

/* CTA swap NE -> right on hover/focus */
.howcard__cta{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.30); color:var(--how-text);
  display:grid; place-items:center; position:relative; overflow:hidden;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.howcard__cta svg{ position:absolute; inset:0; margin:auto; transition:opacity .16s ease, transform .22s ease; }
.howcard__cta .cta-ne{ opacity:1; transform:scale(1); }
.howcard__cta .cta-right{ opacity:0; transform:scale(.85); }
.howcard:hover .howcard__cta, .howcard.is-focus .howcard__cta{
  background:#fff; color:#000; border-color:transparent; transform:translateX(1px);
}
.howcard:hover .howcard__cta .cta-ne,
.howcard.is-focus .howcard__cta .cta-ne{ opacity:0; transform:scale(.9) rotate(-8deg); }
.howcard:hover .howcard__cta .cta-right,
.howcard.is-focus .howcard__cta .cta-right{ opacity:1; transform:scale(1); }

/* text */
.howcard__text{ margin:14px 0 0 0; color:var(--how-muted); font-size:clamp(14px,1.6vw,16px); line-height:1.85; }

/* STEP (absolute bottom-left) */
.howcard__step{
  position:absolute; left:22px; bottom:18px;
  display:flex; flex-direction:column; gap:6px;
}
.howcard__step-label{ color:#b4b9c4; font-weight:800; letter-spacing:.12em; font-size:12px; }
.howcard__step-num{ color:var(--how-accent); font-weight:800; font-size:clamp(26px,3.6vw,36px); line-height:1; }

/* CORNER (absolute bottom-right) */
.howcard__corner{
  position:absolute; right:0; bottom:0;
  width:clamp(140px, 36%, 220px); height:clamp(100px, 32%, 140px);
  border-top-left-radius:20px; border-bottom-right-radius:var(--radius-card);
  background: var(--how-accent);
  color:#0b0b0b;
  display:grid; place-items:center;
  overflow:hidden;
  transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.howcard__corner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 80% 80%, rgba(255,255,255,.20), transparent 45%),
              conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.10), transparent 40%, rgba(255,255,255,.10) 80%, transparent 100%);
  transform: translate3d(10%,10%,0) scale(1.1);
  opacity:.65; transition: transform .6s ease, opacity .4s ease;
}
.howcard:hover .howcard__corner,
.howcard.is-focus .howcard__corner{
  background:#ffffff; color:#000; transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255,255,255,.14);
}
.howcard:hover .howcard__corner::before,
.howcard.is-focus .howcard__corner::before{
  transform: translate3d(0,0,0) scale(1); opacity:.9;
}

/* responsive */
@media (max-width:1100px){
  .how__head{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:980px){
  .how__grid{ grid-template-columns:1fr; }
  .howcard{ padding:20px 20px 150px 20px; }
  .howcard__corner{ width:44%; height:120px; }
}

:root{
  /* THEME aligned to hero */
  --tms-bg: transparent;                      /* section background removed */
  --tms-text:#E6F1FF;                          /* tech-light text */
  --tms-muted:#A3B1CC;                         /* muted copy */
  --tms-accent:#00E5FF;                        /* cyan accent */
  --tms-wrapW:min(1200px,92vw);
  --tms-card:linear-gradient(180deg,#0D1726 0%, #0B1320 50%, #0A0F1A 100%);
  --tms-bdr:rgba(0,229,255,.18);
}

.tms{ position:relative; background:var(--tms-bg) !important; color:var(--tms-text); overflow:hidden; }
.tms__scrim{ 
  position:absolute; inset:0; pointer-events:none;
  display:none !important; /* remove local glow; rely on body backdrop */
  background:
    radial-gradient(900px 640px at 75% 30%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(900px 640px at 80% 70%, rgba(0,229,255,.08), transparent 60%);
}
.tms__wrap{ width:var(--tms-wrapW); margin-inline:auto; padding:clamp(56px,7.4vw,88px) 0; }

/* Row 1 */
.tms__head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.tms__tag{ display:inline-flex; align-items:center; gap:10px; color:var(--tms-muted); font:800 12px/1 Inter,system-ui; letter-spacing:.16em; text-transform:uppercase; }
.tms__taglogo{ color:var(--tms-accent); }
.tms__headline{ margin:.35rem 0 0 0; font-weight:400; font-size:clamp(22px,3.8vw,42px); line-height:1.08; }
.tms-accent{ color:var(--tms-accent); font-weight:800; }
.tms__intro{ margin:0 0 14px 0; color:var(--tms-muted); font-size:clamp(14px,1.6vw,16px); line-height:1.85; }

/* CTA pill + outside circle */
.tms__ctaWrap{ display:inline-flex; align-items:center; gap:10px; }
.tms__cta{ display:inline-flex; align-items:center; background:#121418; color:#E6F1FF; padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.08); text-decoration:none; font-weight:800; }
.tms__cta-circle{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--tms-accent); color:#0b0b0b; position:relative; overflow:hidden; border:none; cursor:pointer; transition:transform .25s ease, background .25s ease; }
.tms__cta-circle svg{ position:absolute; inset:0; margin:auto; transition:opacity .16s ease, transform .25s ease; }
.tms__cta-circle .cta-ne{ opacity:1; transform:rotate(0deg); }
.tms__cta-circle .cta-right{ opacity:0; transform:translateX(-4px); }
.tms__ctaWrap:hover .tms__cta-circle{ background:#ffffff; transform:translateX(2px); }
.tms__ctaWrap:hover .tms__cta-circle .cta-ne{ opacity:0; transform:rotate(-12deg) scale(.9); }
.tms__ctaWrap:hover .tms__cta-circle .cta-right{ opacity:1; transform:translateX(0); }

/* Row 2: layout */
.tms__row{ margin-top:34px; display:grid; gap:28px; }
.tms__row--widerRight{ grid-template-columns: .75fr 1.25fr; }

/* Rating card */
.tms-rating{ background:var(--tms-card); border:1px solid var(--tms-bdr); border-radius:28px; padding:24px; box-shadow:0 24px 70px rgba(0,0,0,.36); display:flex; align-items:center; justify-content:center; text-align:center; min-height:340px; }
.tms-rating__box{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
.tms-rating__score{ font-size:clamp(46px,6.6vw,78px); font-weight:700; letter-spacing:2px; }

.tms-rating__stars, .tms-slider__stars{ display:flex; gap:8px; color:var(--tms-accent); }
.tms-rating__stars::before, .tms-slider__stars::before{ content:none !important; display:none !important; }
.tms-rating__stars svg, .tms-slider__stars svg{ width:18px; height:18px; display:block; pointer-events:none; }

.tms-rating__meta{ color:#cbd5e1; opacity:.9; }
.tms-rating__title{ margin:6px 0 4px; font-size:clamp(18px,2.1vw,22px); line-height:1.25; }
.tms-rating__avatars{ display:flex; gap:8px; }
.tms-rating__avatars img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #0E1420; box-shadow:0 4px 10px rgba(0,0,0,.35); }

/* Review slider */
.tms-slider{ position:relative; background:var(--tms-card); border:1.4px solid rgba(255,255,255,.18); border-radius:28px; padding:28px; box-shadow:0 24px 70px rgba(0,0,0,.36); overflow:hidden; min-height:300px; }
.tms-slides{ position:relative; min-height:180px; }
.tms-slide{ position:absolute; inset:0; opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease; }
.tms-slide.is-active{ opacity:1; transform:translateY(0); }
.tms-quote{ font-size:clamp(18px,2.1vw,24px); line-height:1.6; margin:0 0 18px 0; }
.tms-author{ display:flex; align-items:center; gap:12px; }
.tms-author__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.tms-author__name{ font-weight:800; display:block; }
.tms-author__role{ color:var(--tms-muted); font-size:.95rem; }

*/* Nav buttons */
.tms-nav{ position:absolute; right:18px; bottom:18px; display:flex; gap:12px; }
.tms-btn{ width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#E6F1FF; display:grid; place-items:center; transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.tms-btn:hover{ background:var(--tms-accent); color:#0b0b0b; border-color:transparent; transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,229,255,.28); }

/* Responsive */
@media (max-width:1100px){
  .tms__head{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:980px){
  .tms__row--widerRight{ grid-template-columns:1fr; }
  .tms-rating{ align-items:flex-start; justify-content:flex-start; text-align:left; }
  .tms-rating__box{ align-items:flex-start; }
  .tms-nav{ right:14px; bottom:14px; }
}

/* =========================
   MOBILE OVERFLOW FIX (right-side extra space)
   — Desktop is untouched; applies to small screens only.
   ========================= */
@media (max-width: 768px){
  html, body{
    width:100%;
    overflow-x:hidden;            /* prevent horizontal scroll on mobile */
  }

  /* Ensure all major sections and inner wraps don't create overflow */
  .hero, .marquee, .about, .services, .pricing, .why, .join, .how, .tms,
  .container, .services__wrap, .pricing__wrap, .why__wrap, .join__wrap, .how__wrap, .tms__wrap{
    overflow-x:hidden;
    max-width:100%;
  }

  /* Common offenders — keep buttons/cards within the viewport width */
  .btn-wrap, .split, .price-card, .joincard, .svc-card, .howcard{
    max-width:100%;
  }
}



/* =========================
   ABOUT PAGE (ab-*)
   ========================= */

/* Body side padding ONLY on the About page + force cyan accent */
body:has(.ab-hero){
  --accent:#00E5FF; /* replace any green accent with cyan */
  padding-inline: clamp(12px, 3.2vw, 28px);
}

/* Shared container */
.ab-wrap{
  /* Prevent any chance of exceeding viewport when body has side padding */
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
}

/* ---------- Hero ---------- */
.ab-hero{
  position:relative;
  min-height: clamp(42vh, 52vh, 64vh);
  display:grid; place-items:center;
  background: transparent !important;          /* use global body background */
  overflow:hidden;
}
.ab-hero::before{
  /* subtle glow like the homepage (cyan → transparent) */
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height:70%;
  background: radial-gradient(60% 60% at 20% 20%, rgba(0,229,255,.22), transparent 60%);
  pointer-events:none;
  filter: blur(12px);
}
.ab-hero__inner{
  position:relative;
  /* match .ab-wrap behavior to avoid layout > 100vw */
  max-width: var(--container);
  width: 100%;
  text-align:center;
  padding: clamp(36px, 6vw, 80px) 0;
}
.ab-hero__title{
  margin:0 0 .6rem; font-weight:800; line-height: .98;
  font-size: clamp(34px, 7.6vw, 88px);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.ab-hero__title span{ color:var(--accent); font-weight:900; }
.ab-crumbs ol{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap;
  color:var(--muted); font-size:clamp(14px,1.6vw,18px);
}
.ab-crumbs li{ display:inline-flex; align-items:center; }
.ab-crumbs li + li::before{ content:"/"; opacity:.5; margin:0 .6rem; }
.ab-crumbs a{ color:#fff; text-decoration:none; opacity:.9; transition:opacity .2s; }
.ab-crumbs a:hover{ opacity:1; }
.ab-crumbs [aria-current="page"]{ color:var(--accent); font-weight:700; }

/* ---------- Intro ---------- */
.ab-intro{ background: transparent !important; padding-block: clamp(28px, 6vw, 80px); }
.ab-grid-2{
  display:grid; gap: clamp(18px, 3vw, 36px);
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  align-items:center;
}
.ab-intro__copy p{
  color:var(--muted); line-height:1.9; margin:.4rem 0 0; text-align:justify; text-justify:inter-word; hyphens:auto;
}
.ab-intro__media{ margin:0; }
/* ↓ Decreased image height while keeping full width and clean crop */
.ab-intro__media img{
  display:block;
  width:100%;
  height: clamp(260px, 36vh, 420px);
  object-fit: cover;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}

/* Section heading with cyan left bar */
.ab-h2{
  position:relative; margin:0 0 .6rem; padding-left:18px;
  font-size:clamp(24px, 4.2vw, 42px); font-weight:800; line-height:1.1;
}
.ab-h2::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:6px;
  background: var(--accent); border-radius:6px;
}

/* ---------- Stats ---------- */
.ab-stats{ background: transparent !important; padding-block: clamp(20px,5vw,60px); }
.ab-stats__grid{
  display:grid; gap: clamp(12px,2.4vw,22px);
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.ab-stat{
  background: linear-gradient(180deg,#0D1726 0%, #0B1320 50%, #0A0F1A 100%); /* hero-aligned panel */
  border:1px solid rgba(0,229,255,.18);
  border-radius:18px; padding:20px;
  text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.ab-stat__num{ font-weight:900; font-size:clamp(28px,5.2vw,54px); line-height:1; color:#fff; }
.ab-stat__label{ color:var(--muted); margin-top:.35rem; font-weight:600; letter-spacing:.2px; }

/* ---------- Values grid ---------- */
.ab-values{ background: transparent !important; padding-block: clamp(24px,6vw,80px); }
.ab-values__grid{
  margin-top:.6rem;
  display:grid; gap: clamp(14px,2.6vw,22px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.ab-card{
  background: linear-gradient(180deg,#0D1726 0%, #0B1320 50%, #0A0F1A 100%);
  border:1px solid rgba(0,229,255,.18);
  border-radius:18px; padding:20px; box-shadow:0 24px 70px rgba(0,0,0,.35);
  transition: border-color .2s ease, transform .2s ease;
}
.ab-card__icon{ font-size:28px; line-height:1; color:var(--accent); }
.ab-card__title{ margin:.4rem 0; font-size:clamp(16px,2vw,22px); }
.ab-card p{ margin:0; color:var(--muted); line-height:1.8; }
.ab-card:hover{ border-color: var(--accent); transform: translateY(-2px); }

/* ---------- Timeline ---------- */
.ab-timeline{ background: transparent !important; padding-block: clamp(24px,6vw,80px); }
.ab-steps{
  list-style:none; margin:.6rem 0 0; padding:0;
  display:grid; gap: clamp(14px,2vw,18px);
}
.ab-step{
  display:grid; grid-template-columns: 26px 1fr; gap:14px;
  align-items:start;
  background: linear-gradient(180deg,#0D1726 0%, #0B1320 50%, #0A0F1A 100%);
  border:1px solid rgba(0,229,255,.18);
  border-radius:18px; padding:16px 18px; box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.ab-step__dot{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--accent); position:relative; top:.35rem;
}
.ab-step__dot::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.ab-step__body h3{ margin:.1rem 0 .2rem; font-size:clamp(16px,1.9vw,20px); }
.ab-step__body p{ margin:0; color:var(--muted); line-height:1.8; }

/* ---------- CTA ---------- */
.ab-cta{ background: transparent !important; padding-block: clamp(28px,6vw,80px); }
.ab-cta__box{
  background: linear-gradient(180deg,#0D1726 0%, #0B1320 50%, #0A0F1A 100%);
  border:1px solid rgba(0,229,255,.18);
  border-radius:20px; padding: clamp(16px,3.2vw,28px);
  display:grid; gap:14px; grid-template-columns: 1fr auto; align-items:center;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.ab-cta__copy h2{ margin:0 0 .2rem; font-size:clamp(20px,3.6vw,34px); }
.ab-cta__copy p{ margin:0; color:var(--muted); }
.ab-cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ab-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:14px; text-decoration:none; font-weight:900;
  background:var(--accent); color:#0b0b0b;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ab-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,229,255,.28); background:var(--accent); }
.ab-btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.18);
}
.ab-btn--ghost:hover{ border-color: var(--accent); color:#0b0b0b; background:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .ab-grid-2{ grid-template-columns: 1fr; }
  .ab-stats__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ab-values__grid{ grid-template-columns: 1fr; }
  .ab-cta__box{ grid-template-columns: 1fr; text-align:center; }
  .ab-cta__actions{ justify-content:center; }
}

/* =========================
   MOBILE-ONLY FIXES (no desktop changes)
   Center content + remove any left/right extra space & horizontal scroll
   ========================= */
@media (max-width: 640px){
  /* Ensure nothing causes layout wider than the viewport */
  html, body { overflow-x: hidden; }

  /* Remove body’s side padding on About page to kill the left “gutter” */
  body:has(.ab-hero){ padding-inline: 0; }

  /* Give the About wrappers their own small, centered padding instead */
  .ab-wrap,
  .ab-hero__inner{
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    padding-inline: 14px; /* keeps content centered with even left/right space */
    box-sizing: border-box;
  }

  /* Guard sections against sub-pixel overflows from inner effects */
  .ab-hero,
  .ab-intro,
  .ab-stats,
  .ab-values,
  .ab-timeline,
  .ab-cta { overflow: hidden; }

  /* Safety: make sure grid wrappers never nudge beyond 100% */
  .ab-grid-2,
  .ab-stats__grid,
  .ab-values__grid,
  .ab-steps{ margin-inline: 0; }
}