:root{
  --bg:#0b1220;
  --card:#101a33;
  --card2:#0f1730;

  --text:#e7ecff;
  --muted:#b7c0e6;

  --accent:#66d9ff;
  --accent2:#9b7bff;

  /* Premium separators */
  --line: rgba(255,255,255,.075);
  --lineStrong: rgba(255,255,255,.135);

  --ok:#7CFFB2;
  --warn:#FFD37C;

  /* Elevation system */
  --shadow-sm: 0 10px 26px rgba(0,0,0,.28);
  --shadow-md: 0 18px 48px rgba(0,0,0,.38);
  --shadow-lg: 0 28px 84px rgba(0,0,0,.50);

  --radius:16px;
  --radius2:22px;
  --radius3:28px;

  --max:1120px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Motion + focus */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t: 160ms;

  /* Focus rings (soft + premium) */
  --glow:  0 0 0 3px rgba(102,217,255,.18);
  --glow2: 0 0 0 5px rgba(155,123,255,.14);

  /* Card section panels */
  --panel:  rgba(255,255,255,.030);
  --panel2: rgba(255,255,255,.055);

  /* Ultra-subtle “material” noise (no image) */
  --noise:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,.035), transparent 30%),
    radial-gradient(circle at 55% 80%, rgba(255,255,255,.028), transparent 35%);
}

/* ---------------- Base ---------------- */
*{ box-sizing:border-box; }
html,body{ width:100%; height:100%; }

html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

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

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--sans);
  color:var(--text);
  line-height:1.55;
  letter-spacing:.1px;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(102,217,255,.18), transparent 58%),
    radial-gradient(900px 700px at 85% 20%, rgba(155,123,255,.14), transparent 58%),
    radial-gradient(900px 700px at 40% 90%, rgba(124,255,178,.07), transparent 62%),
    var(--bg);
}

/* Premium depth + vignette */
body::before{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(1400px 900px at 50% 42%, rgba(255,255,255,.032), transparent 60%),
    var(--noise),
    linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.15));
  opacity:.92;
  mix-blend-mode: screen;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(85% 70% at 50% 18%, transparent 45%, rgba(0,0,0,.30) 100%);
  opacity:.72;
}

img,svg,video,canvas{ max-width:100%; height:auto; display:block; }

a{
  color:inherit;
  text-decoration:none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}

a:focus-visible{
  outline:none;
  box-shadow: var(--glow2);
  border-radius: 12px;
}

::selection{ background: rgba(102,217,255,.25); }

/* Prevent “everything transitions” jitter */
.card, .btn, .chip, .mini, .item, input, textarea, select, .nav a{
  transition-timing-function: var(--ease);
}

/* ---------------- Layout ---------------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:22px 16px 70px; }

.page{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 16px 70px;
  scroll-margin-top: 110px;
}

.page > :first-child{ margin-top:0 !important; }

/* ---------------- Header ---------------- */
header{
  position:sticky;
  top:0;
  z-index:50;

  /* True glass */
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  background:
    linear-gradient(to bottom, rgba(11,18,32,.82), rgba(11,18,32,.52));
  border-bottom: 1px solid var(--line);

  box-shadow: 0 14px 40px rgba(0,0,0,.38);
}

header .topbar{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 16px;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* ---------------- Brand ---------------- */
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }

.logo{
  width:58px;
  height:60px;
  border-radius:14px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;

  background: linear-gradient(135deg, rgba(102,217,255,.95), rgba(155,123,255,.9));
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
}

.logo-img{ width:100%; height:100%; object-fit:contain; }

.brandText h1{
  margin:0;
  font-size:16px;
  letter-spacing:.2px;
  line-height:1.1;
}

.brandText .sub{
  margin:4px 0 0;
  font-size:12px;
  color:rgba(210,220,255,.75);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:52vw;
}

/* ---------------- Nav ---------------- */
.nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }

.nav a{
  font-size:13px;
  color:rgba(210,220,255,.78);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;

  background: rgba(255,255,255,.02);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.nav a:hover{
  color:var(--text);
  border-color: var(--lineStrong);
  background: rgba(255,255,255,.055);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.nav a.active{
  color:var(--text);
  border-color: rgba(102,217,255,.42);
  background: linear-gradient(135deg, rgba(102,217,255,.18), rgba(155,123,255,.14));
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

.nav a.nav-cta{
  border:1px solid rgba(255,255,255,.16);
  color:var(--text);
}

.nav a.nav-cta:hover{ background: rgba(255,255,255,.065); }

/* ---------------- Language chips ---------------- */
.lang{
  display:flex;
  gap:6px;
  align-items:center;
  padding-left:6px;
  margin-left:6px;
  border-left:1px solid var(--line);
}

.chip{
  cursor:pointer;
  user-select:none;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:rgba(210,220,255,.78);
  background: rgba(255,255,255,.03);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}

.chip:hover{
  transform: translateY(-1px);
  border-color: var(--lineStrong);
  background: rgba(255,255,255,.045);
}

.chip[aria-pressed="true"]{
  color:var(--text);
  border-color: rgba(102,217,255,.55);
  background: linear-gradient(135deg, rgba(102,217,255,.18), rgba(155,123,255,.14));
  box-shadow: 0 0 0 3px rgba(102,217,255,.12);
}

/* ---------------- Page head ---------------- */
.page-head{ margin:0 0 18px; }

.page-head h2{
  margin:0 0 10px;
  font-size: clamp(28px, 2.4vw, 40px);
  letter-spacing: -0.035em;
}

/* ✅ Lighter muted text (final) */
.muted{ color: rgba(215,225,255,.80); }

/* ---------------- Cards ---------------- */
.card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius3);

  /* ✅ Premium gradient border without mask hacks */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(16,26,51,.92), rgba(15,23,48,.84)) padding-box,
    linear-gradient(135deg,
      rgba(102,217,255,.22),
      rgba(155,123,255,.18),
      rgba(255,255,255,.07)
    ) border-box;

  padding:18px;

  /* ✅ Final “top premium” depth */
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,.09);

  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* ✅ Inner sheen + noise (single definition) */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 42%),
    var(--noise);
  opacity:.25;
}

/* Keep content above overlays */
.card > *{ position:relative; z-index:1; }

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ---------------- iOS-style Card Sections ---------------- */
.cardSection{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);

  background:
    linear-gradient(180deg, var(--panel2), rgba(0,0,0,.12));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.16);
}

.cardSection + .cardSection{ margin-top: 10px; }

/* ✅ Brighter section title (final) */
.cardSectionTitle{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235,245,255,.82);
}

.cardDivider{
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, var(--lineStrong), transparent);
  margin: 12px 0;
  border-radius: 999px;
}

/* “Settings rows” (optional) */
.rowItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 12px 10px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.00);
  background: rgba(255,255,255,.02);

  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.rowItem:hover{
  border-color: var(--line);
  background: rgba(255,255,255,.045);
  transform: translateY(-1px);
}

.rowItem .left{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

.rowItem .right{
  color: rgba(220,235,255,.72);
  font-size: 13px;
  white-space: nowrap;
}

/* ---------------- Hero ---------------- */
.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.hero h2{
  margin:12px 0 8px;
  font-size: clamp(28px, 2.3vw, 40px);
  line-height:1.12;
  letter-spacing:-.035em;
}

.hero p{
  margin:0 0 16px;
  color: rgba(220,235,255,.80);
  font-size:15px;
}

.trust-line{
  margin-top:14px;
  color: rgba(180,200,255,0.85);
  font-size:.95rem;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;

  font-size:14px;
  padding:11px 14px;
  border-radius:16px;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);

  box-shadow: 0 12px 28px rgba(0,0,0,.22);

  transition:
    transform 140ms var(--ease),
    box-shadow 140ms var(--ease),
    border-color 140ms var(--ease),
    background 140ms var(--ease),
    opacity 140ms var(--ease);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
}

.btn:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.btn:focus-visible{
  outline:none;
  box-shadow: var(--glow), var(--glow2), 0 18px 44px rgba(0,0,0,.30);
}

.btn.primary{
  border-color: rgba(102,217,255,.55);
  background: linear-gradient(135deg, rgba(102,217,255,.24), rgba(155,123,255,.18));
  position: relative;
  overflow: hidden;
}

.btn.primary:hover{ border-color: rgba(102,217,255,.75); }

/* ✅ Premium “specular” highlight */
.btn.primary::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 45%);
  opacity:.45;
  transform: translateY(-8%);
  pointer-events:none;
}

.btn.secondary{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}

.btn.ghost{
  border-color: rgba(255,255,255,.14);
  background: transparent;
}

/* ---------------- Grids ---------------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.quick{ display:grid; gap:10px; }

/* ---------------- Mini cards ---------------- */
.mini{
  background: rgba(255,255,255,.026);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.mini:hover{
  border-color: rgba(102,217,255,.18);
  background: linear-gradient(135deg, rgba(102,217,255,.055), rgba(155,123,255,.045));
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.mini h3{ margin:0 0 6px; font-size:14px; }
.mini p{ margin:0; color: rgba(215,225,255,.80); font-size:13px; }

/* ---------------- Lists ---------------- */
.sectionTitle{
  margin:0 0 10px;
  font-size:18px;
  position: relative;
  padding-bottom: 10px;

  /* ✅ Slight editorial feel */
  letter-spacing: -.01em;
}

.sectionTitle::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(102,217,255,.55), rgba(155,123,255,.35));
  opacity:.85;
}

.list{ display:grid; gap:10px; margin-top:10px; }

.item{
  display:flex;
  gap:12px;
  align-items:flex-start;

  padding:12px;
  border-radius:18px;

  background: rgba(255,255,255,.026);
  border:1px solid var(--line);

  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.item:hover{
  border-color: rgba(102,217,255,.18);
  background: linear-gradient(135deg, rgba(102,217,255,.055), rgba(155,123,255,.045));
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.icon{
  width:38px;
  height:38px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(102,217,255,.20), rgba(155,123,255,.16));
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  color: var(--text);
  flex:0 0 auto;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.item b{ display:block; margin-bottom:4px; }

.price{
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font-size:12px;
  white-space:nowrap;
}

/* Keep hover highlight for list links */
.card .list a.item{ text-decoration:none; display:flex; align-items:flex-start; }

/* ---------------- Tabs ---------------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.tabBtn{
  cursor:pointer;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: rgba(210,220,255,.78);
  font-size:12px;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.tabBtn:hover{ transform: translateY(-1px); border-color: var(--lineStrong); }

.tabBtn[aria-selected="true"]{
  color: var(--text);
  border-color: rgba(102,217,255,.55);
  background: linear-gradient(135deg, rgba(102,217,255,.18), rgba(155,123,255,.14));
}

.panel{ margin-top:10px; }
.panel[hidden]{ display:none; }

/* ---------------- Forms ---------------- */
form{ display:grid; gap:10px; margin-top:10px; }
label{ font-size:12px; color: rgba(215,225,255,.80); }

input,textarea,select{
  width:100%;
  padding:11px 12px;
  border-radius:16px;

  border:1px solid var(--line);
  background: rgba(0,0,0,.16);
  color: var(--text);
  outline:none;

  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

input:focus,textarea:focus,select:focus{
  border-color: rgba(102,217,255,.40);
  box-shadow: var(--glow);
  background: rgba(0,0,0,.20);
}

textarea{ min-height:110px; resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.small{ font-size:12px; color: rgba(215,225,255,.78); }

/* Dark dropdowns */
select{ color-scheme:dark; }
select option{ background-color:#0f1730; color: var(--text); }
select option:checked, select option:hover{ background-color: rgba(102,217,255,.18); color: var(--text); }

/* ---------------- Footer ---------------- */
footer{
  margin-top:22px;
  padding:18px;
  border-top:1px solid var(--line);
  color: rgba(215,225,255,.78);
  font-size:12px;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

/* ---------------- Profile card ---------------- */
.profile-card{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(16,26,51,.92), rgba(15,23,48,.84));
  border:1px solid var(--line);
  border-radius: var(--radius3);
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  box-shadow: var(--shadow-md);
}

.profile-photo{
  width:100%;
  max-width:280px;
  border-radius:18px;
  object-fit:cover;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
}

.profile-name{ font-size:18px; font-weight:650; text-align:center; }
.profile-sub{ font-size:13px; color: rgba(215,225,255,.78); text-align:center; }

/* ---------------- Contact page only ---------------- */
body[data-page="contact"] .page{ max-width:var(--max); margin:0 auto; padding:28px 16px 70px; }
body[data-page="contact"] .grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start; }
body[data-page="contact"] .side{ display:grid; gap:18px; }
body[data-page="contact"] .form{ display:grid; gap:14px; margin-top:10px; }
body[data-page="contact"] .formGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body[data-page="contact"] .field span{ display:block; margin-bottom:6px; font-size:14px; opacity:.85; color: rgba(215,225,255,.78); }
body[data-page="contact"] .status{ margin-top:10px; opacity:.9; font-size:14px; }

/* Free Review box */
.trustLine{ margin-top:8px; font-size:.9rem; color: rgba(120,200,255,0.9); }
.form .input{ width:100%; }
.freeReview{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.freeReview h3{ margin:0 0 6px 0; font-size:1.05rem; }
.freeReview .muted{ margin:0 0 10px 0; }

/* ---------------- Services grid ---------------- */
.servicesGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 900px){
  .servicesGrid{ grid-template-columns: 1fr 1fr; align-items: stretch; }
  .servicesGrid .mini{ height: 100%; }
}

/* Checklist */
.checklist{
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.45;
  color: rgba(220,235,255,.92);
}
.checklist li::before{
  content:"✓";
  color: var(--ok);
  font-weight: 800;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* Services CTA row */
.servicesGrid .ctaRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.servicesGrid .ctaRow .btn{
  min-height: 44px;
  padding: 11px 12px;
  text-align:center;
  white-space: normal;
  line-height: 1.2;
}
.servicesGrid .ctaRow .btn.ghost{
  grid-column: 1 / -1;
  justify-content:center;
  opacity:.95;
}

/* Pricing table */
.tableWrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; }
.priceTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.priceTable th,.priceTable td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.priceTable th{
  font-size:12px;
  letter-spacing:.2px;
  color: rgba(215,225,255,.78);
  text-transform:uppercase;
  background: rgba(255,255,255,.03);
}
.priceTable tr:last-child td{ border-bottom:0; }
.priceTable .priceMain{ display:block; font-weight:700; margin-bottom:4px; }
.priceTable .priceSub{ display:block; color: rgba(215,225,255,.78); font-size:13px; }

/* File row */
.fileRow{ display:flex; gap:10px; align-items:center; }
.fileRow .input{ flex:1 1 auto; }
.fileHint{ margin-top:6px; font-size:12px; opacity:.95; }

/* Trust chips */
.trustChips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.tchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: rgba(220,235,255,.88);
  font-size:12px;
  letter-spacing:.1px;
}

/* Contact icons list */
.contactIcons{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.contactIcons li{ display:flex; align-items:center; gap:10px; }
.contactIcons .icon{ font-size:16px; opacity:.9; box-shadow:none; border:none; background:none; width:auto; height:auto; }
.contactIcons a{ font-weight:500; }
.smallNote{ margin-top:10px; font-size:13px; opacity:.8; }

/* FAQ layout tweaks */
body[data-page="faq"] .hero{ grid-template-columns: 1fr !important; }
body[data-page="faq"] .quick{ display:none !important; }
body[data-page="faq"] .faq-wrap{ max-width:100% !important; }

/* ---------------- Responsive ---------------- */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
  .nav{ justify-content:flex-start; }
}

@media (max-width: 900px){
  header .topbar{ min-height:auto; padding:10px 12px; }
  .topbar{ flex-direction:column; align-items:stretch; gap:8px; }
  .brand{ justify-content:center; text-align:center; }

  .brandText .sub{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    max-width:100%;
  }

  .nav{
    justify-content:center;
    overflow-x:visible;
    white-space:normal;
  }

  .lang{
    width:100%;
    justify-content:center;
    border-left:0;
    margin-left:0;
    padding-left:0;
  }

  .page{ padding:14px 14px 60px; }
  body[data-page="contact"] .grid{ grid-template-columns:1fr; }
  body[data-page="contact"] .formGrid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .servicesGrid .ctaRow{ grid-template-columns: 1fr; }
  .servicesGrid .ctaRow .btn.ghost{ grid-column:auto; }

  .trustChips{ flex-direction:column; }
  .tchip{ width:100%; justify-content:flex-start; }

  .nav a{ padding:10px 10px; }
  .chip{ padding:9px 12px; }
  .btn{ min-height:46px; width:auto; }
}

@media (max-width: 420px){
  .nav a{ font-size:12px; padding:7px 8px; }
}
.hero p{
  color: rgba(235,245,255,.86);
  font-weight: 430;
}

/* 2) Slightly increase headline punch */
.hero h2{
  text-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* 3) Give the main hero card a subtle “top accent” */
.hero > .card:first-child::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:12px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(102,217,255,.65), rgba(155,123,255,.40), transparent);
  opacity:.9;
  pointer-events:none;
  z-index:1;
}

/* 4) Make primary CTA look like the one to click */
.btn.primary{
  font-weight: 650;
  letter-spacing: .01em;
}
.btn.primary:hover{
  filter: brightness(1.07);
}

/* 5) Softer secondary buttons (more contrast vs primary) */
.btn.secondary, .btn.ghost{
  opacity:.92;
}
.btn.secondary:hover, .btn.ghost:hover{
  opacity:1;
}
.rulesAgree{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:baseline;
}

.rulesAgree a,
.legal-link{
  color: var(--accent);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: rgba(102,217,255,.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease), opacity var(--t) var(--ease);
}

.rulesAgree a:hover,
.legal-link:hover{
  color: #9be3ff;
  text-decoration-color: rgba(102,217,255,.85);
}

.rulesAgree a:focus-visible,
.legal-link:focus-visible{
  outline:none;
  box-shadow: var(--glow);
  border-radius: 8px;
}
.hero > .card:first-child{
  align-self: flex-start;
}
.hero{
  align-items: flex-start;
}
.rulesAgree{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap; /* allows wrap only if screen is VERY small */
}

.rulesAgree span,
.rulesAgree a{
  white-space: nowrap;
}
p, li{
  letter-spacing: .15px;
  line-height: 1.6;
}

.muted{
  color: rgba(220,230,255,.72);
}
.card.secondary,
.cardSection{
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.06);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  border-color: rgba(102,217,255,.22);
}
.btn.primary{
  position: relative;
  overflow: hidden;
}

.btn.primary::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
  opacity:.35;
  pointer-events:none;
}
a.inline-link{
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(102,217,255,.5);
}

a.inline-link:hover{
  text-decoration-color: rgba(102,217,255,.85);
}
@media (max-width: 480px){
  .hero h2{
    letter-spacing: -.02em;
  }

  .card{
    border-radius: 22px;
  }

  .btn{
    border-radius: 18px;
  }
}
footer{
  opacity:.7;
  font-size:11.5px;
}
.card.right{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.rowItem{
  letter-spacing: .12px;
}

.rowItem b{
  font-weight: 550;
}
a.inline-link{
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
footer{
  opacity: .65;
  letter-spacing: .2px;
}
.page::before{
  content:"";
  position:absolute;
  inset: -40px;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 20%, rgba(255,255,255,.035), transparent 70%);
  pointer-events:none;
}