/* Trilvex IT — Custom UI (no SVG) */
:root{
  --bg:#060816;
  --bg2:#0a1030;
  --surface:#0e173b;
  --surface2:#142352;

  --text:#eef2ff;
  --muted:#c3cff5;
  --line: rgba(255,255,255,.12);

  /* New vivid palette */
  --accent:#ff2d9b;   /* neon pink */
  --accent2:#00d4ff;  /* electric cyan */
  --accent3:#ffd24d;  /* bright amber */
  --accent4:#7c5cff;  /* violet */
  --accent5:#2af598;  /* mint */

  --shadow: 0 22px 60px rgba(0,0,0,.52);
  --radius: 18px;
  --radius2: 28px;
  --max: 1160px;
}

*{ box-sizing:border-box; }
html{ font-size:16px; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 12%, rgba(0,212,255,.22), transparent 62%),
    radial-gradient(820px 520px at 92% 18%, rgba(255,45,155,.18), transparent 60%),
    radial-gradient(900px 650px at 45% 112%, rgba(255,210,77,.14), transparent 58%),
    radial-gradient(720px 520px at 68% 78%, rgba(124,92,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

.container{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}

/* Helpers */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.mt{ margin-top:1rem; }
.h3{ font-size:1.125rem; margin:0 0 .25rem; }

/* Topbar */
.topbar{
  background: rgba(10,16,30,.55);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0;
  font-size:.95rem;
  color: var(--muted);
}
.topbar__left, .topbar__right{ display:flex; gap:.65rem; flex-wrap:wrap; }
.topbar__link{ color: var(--muted); display:inline-flex; align-items:center; gap:.5rem; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.3rem .55rem;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.04);
}

/* Header / Nav */
.site-header{ position:sticky; top:0; z-index:50; }
.navwrap{
  background: rgba(7,12,23,.70);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(12px);
}
.navwrap__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width: 230px;
}
.brand__mark{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg, rgba(0,212,255,.95), rgba(255,45,155,.88));
  box-shadow: 0 16px 44px rgba(255,45,155,.16), 0 14px 36px rgba(0,212,255,.10);
}
.brand__mark i{ font-size:1.2rem; color:#0b0f1a; }
.brand__name{
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.05rem;
}
.brand__sub{
  display:block;
  font-size:.82rem;
  color:var(--muted);
  margin-top:-.1rem;
}
.nav{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.nav__link{
  padding:.55rem .75rem;
  border-radius: 999px;
  color: var(--muted);
  border:1px solid transparent;
}
.nav__link[aria-current="page"]{
  color: var(--text);
  background: rgba(255,255,255,.05);
  border-color: var(--line);
}
.nav__link:hover{
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  text-decoration:none;
}
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding:.55rem .65rem;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block;
  width:22px; height:2px;
  background: var(--text);
  border-radius: 999px;
}
.nav-toggle__bar + .nav-toggle__bar{ margin-top:5px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 999px;
  padding:.85rem 1.1rem;
  border: 1px solid var(--line);
  cursor:pointer;
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:700;
  letter-spacing:.2px;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn--accent:hover{ background-position: 100% 0; filter: saturate(1.08); }
.btn--accent{
  border-color: transparent;
  color:#0b0f1a;
  background: linear-gradient(135deg, var(--accent2), var(--accent), var(--accent3));
  background-size: 200% 200%;
  box-shadow: 0 18px 55px rgba(255,45,155,.22), 0 18px 55px rgba(0,212,255,.14);
}
.btn--ghost{
  background: rgba(255,255,255,.03);
}
.btn--small{ padding:.55rem .85rem; font-weight:700; }
.btn--wide{ width:100%; }

/* Sections */
.section{ padding: 4.5rem 0; position:relative; overflow:hidden; }
.section .container{ position:relative; z-index:1; }
.section::before,
.section::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .16;
  pointer-events:none;
}
.section::before{
  left:-240px;
  top:-220px;
  background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.85), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(124,92,255,.85), transparent 60%);
}
.section::after{
  right:-260px;
  bottom:-260px;
  background: radial-gradient(circle at 30% 30%, rgba(255,45,155,.85), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255,210,77,.85), transparent 60%);
}
.section--alt::before{ opacity:.10; }
.section--alt::after{ opacity:.10; }
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{
  max-width: 820px;
  margin: 0 0 2rem;
}
.section-head h2{
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  margin:0 0 .55rem;
}
.section-head h2::after{
  content:"";
  display:block;
  width: 96px;
  height: 7px;
  margin-top: .65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--accent3));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,212,255,.12);
}

.section-head p{ color: var(--muted); margin:0; }

/* Hero */
.hero{
  position:relative;
  padding: 4.8rem 0 3.2rem;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-30% -20% auto -20%;
  height:420px;
  background:
    radial-gradient(closest-side, rgba(0,212,255,.22), transparent 70%),
    radial-gradient(closest-side, rgba(255,45,155,.20), transparent 70%),
    radial-gradient(closest-side, rgba(255,210,77,.14), transparent 70%),
    radial-gradient(closest-side, rgba(124,92,255,.14), transparent 72%);
  filter: blur(6px);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.3rem;
  align-items:center;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color: var(--text);
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, rgba(0,212,255,.55), rgba(255,45,155,.45), rgba(255,210,77,.40)) border-box;
  padding:.35rem .7rem;
  border-radius: 999px;
  margin:0 0 1rem;
  font-weight:800;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);

}
.hero h1{
  font-size: clamp(2.05rem, 3.2vw, 3.2rem);
  line-height:1.1;
  margin:0 0 1rem;
}
.lead{
  font-size: 1.05rem;
  color: var(--muted);
  margin:0 0 1.5rem;
}
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .85rem;
  margin-top: 1.2rem;
}
.stat{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(0,212,255,.50), rgba(255,45,155,.40), rgba(255,210,77,.34)) border-box;
  border-radius: var(--radius);
  padding: .95rem 1.05rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.stat:hover{ transform: translateY(-1px); }
.stat{ transition: transform .18s ease, box-shadow .18s ease; }

.stat__num{
  font-weight:900;
  font-size: 1.15rem;
}
.stat__label{ color: var(--muted); font-size: .92rem; }

.media-card{
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.media-card img{ width:100%; height: 340px; object-fit: cover; }
.media-card__caption{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  padding: .85rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .7rem;
  border-radius: 999px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, rgba(255,45,155,.50), rgba(0,212,255,.45), rgba(255,210,77,.35)) border-box;
  color: var(--text);
  font-size:.93rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.badge i{ opacity:.95; }


/* Cards / grids */
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.card, .tile, .pillcard, .panel, .review{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(0,212,255,.55), rgba(255,45,155,.45), rgba(255,210,77,.38), rgba(124,92,255,.45)) border-box;
  border-radius: var(--radius2);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.card:hover, .tile:hover, .pillcard:hover, .panel:hover, .review:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,.36), 0 16px 44px rgba(0,212,255,.10);
}
.card, .tile, .pillcard, .panel, .review{ transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }

.card{
  padding: 1.35rem 1.25rem 1.25rem;
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:auto -30% -50% -30%;
  height:240px;
  background: radial-gradient(closest-side, rgba(0,212,255,.14), transparent 70%);
  pointer-events:none;
}
.card__icon{
  width:48px; height:48px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg, rgba(0,212,255,.22), rgba(255,45,155,.18)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  margin-bottom: .95rem;
  box-shadow: 0 16px 40px rgba(255,45,155,.10), 0 14px 32px rgba(0,212,255,.08);
}
.card:nth-child(3n+2) .card__icon{ background: linear-gradient(135deg, rgba(255,210,77,.22), rgba(124,92,255,.18)) padding-box, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box; }
.card:nth-child(3n) .card__icon{ background: linear-gradient(135deg, rgba(42,245,152,.18), rgba(0,212,255,.20)) padding-box, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box; }
.card__icon i{ text-shadow: 0 10px 26px rgba(0,0,0,.25); }

.card h3{ margin:.1rem 0 .5rem; font-size:1.15rem; }
.card p{ margin:0 0 .85rem; color: var(--muted); }
.card--compact p{ margin:0; }
.card--compact{ padding: 1.1rem 1.1rem; }

.checklist{ list-style:none; padding:0; margin:0; color: var(--muted); }
.checklist li{ position:relative; padding-left:1.6rem; margin:.35rem 0; }
.checklist li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:.1rem; top:.15rem;
  color: var(--accent5); text-shadow: 0 12px 30px rgba(42,245,152,.18);
}

.pillcard{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: 1.1rem 1rem;
}
.pillcard__icon{
  width:44px; height:44px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg, rgba(0,212,255,.22), rgba(255,45,155,.18)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  flex:0 0 auto;
  box-shadow: 0 14px 34px rgba(0,212,255,.10);
}
.pillcard:nth-child(2) .pillcard__icon{ background: linear-gradient(135deg, rgba(255,210,77,.22), rgba(255,45,155,.16)) padding-box, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box; }
.pillcard:nth-child(3) .pillcard__icon{ background: linear-gradient(135deg, rgba(124,92,255,.20), rgba(0,212,255,.18)) padding-box, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box; }
.pillcard:nth-child(4) .pillcard__icon{ background: linear-gradient(135deg, rgba(42,245,152,.18), rgba(255,210,77,.18)) padding-box, linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box; }

.pillcard__title{ font-weight:800; margin:0 0 .2rem; }
.pillcard__text{ color: var(--muted); font-size:.98rem; }

.tile{
  padding: 1.25rem 1.15rem;
}
.tile--soft{
  background: rgba(255,255,255,.02);
}
.tile__icon{
  width:48px; height:48px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg, rgba(255,45,155,.18), rgba(0,212,255,.20)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  box-shadow: 0 16px 40px rgba(255,210,77,.10);
  margin-bottom: .85rem;
}

.tile h3{ margin:.1rem 0 .45rem; }
.tile p{ margin:0 0 .65rem; color: var(--muted); }
.mini-list{ margin:0; padding-left:1.05rem; color: var(--muted); }

/* Split */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items:center;
}
.img{
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.img--rounded{ border-radius: 30px; }
.mini-note{
  margin-top:.8rem;
  padding:.75rem .9rem;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  display:flex;
  gap:.6rem;
  align-items:flex-start;
}

/* Steps */
.steps{ margin-top:1rem; }
.step{
  display:flex;
  gap: .85rem;
  padding: .85rem 0;
  border-bottom:1px dashed rgba(255,255,255,.14);
}
.step:last-child{ border-bottom:0; }
.step__dot{
  width:12px; height:12px;
  border-radius: 999px;
  margin-top:.35rem;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  box-shadow: 0 0 0 6px rgba(0,212,255,.14);
  flex:0 0 auto;
}
.step__title{ font-weight:800; }
.step__text{ color: var(--muted); }

/* Reviews */
.reviews{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
.review{
  padding: 1.2rem 1.2rem 1.1rem;
  position:relative;
}
.review blockquote{
  margin:0 0 .85rem;
  color: var(--text);
  font-size: 1.02rem;
}
.review blockquote::before{
  content:"“";
  font-size: 2.4rem;
  line-height:1;
  color: rgba(255,255,255,.22);
  margin-right:.2rem;
}
.review__name{ font-weight:800; display:block; }
.review__meta{ color: var(--muted); font-size:.92rem; }

/* FAQ */
.faq{ max-width: 920px; }
.faq__item{
  border:1px solid transparent;
  border-radius: var(--radius2);
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(0,212,255,.45), rgba(255,45,155,.38), rgba(255,210,77,.30)) border-box;
  padding: .25rem 0;
  margin-bottom: .85rem;
  position:relative;
  overflow:hidden;
}
.faq__item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: linear-gradient(180deg, var(--accent2), var(--accent), var(--accent3));
  opacity:.9;
}

.faq__item summary{
  cursor:pointer;
  padding: 1rem 1.15rem 1rem 1.35rem;
  list-style:none;
  font-weight:900;
  position:relative;
}
.faq__item summary::before{
  content:"\f059";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:.75rem; top: 1.05rem;
  color: rgba(0,212,255,.95);
  text-shadow: 0 18px 40px rgba(0,212,255,.18);
}

.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:1rem; top:1.05rem;
  color: rgba(255,255,255,.60);
  transition: transform .2s ease;
}
.faq__item[open] summary::after{ transform: rotate(180deg); }
.faq__content{
  padding: 0 1.15rem 1rem;
  color: var(--muted);
}

/* CTA panel */
.cta-panel{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.2rem;
  border-radius: 34px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(255,45,155,.16), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(42,245,152,.14), transparent 60%),
    rgba(255,255,255,.02);
  padding: 1.35rem;
}
.cta-panel--simple{
  grid-template-columns: .95fr 1.05fr;
}
.cta-panel__text h2{ margin:.1rem 0 .55rem; }
.cta-panel__text p{ margin:0 0 .8rem; color: var(--muted); }
.bullets{ list-style:none; padding:0; margin:0; }
.bullets li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color: var(--muted);
  margin:.4rem 0;
}
.bullets i{ color: var(--accent5); text-shadow: 0 12px 30px rgba(42,245,152,.18); margin-top:.15rem; }

/* Forms */
.form label{ display:block; font-weight:700; margin: 0 0 .35rem; }
.form input, .form textarea{
  width:100%;
  padding: .85rem .9rem;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,12,23,.55);
  color: var(--text);
  outline: none;
}
.form input:focus, .form textarea:focus{
  border-color: rgba(42,245,152,.55);
  box-shadow: 0 0 0 4px rgba(42,245,152,.10);
}
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .85rem;
  margin-bottom: .9rem;
}
.form-grid .full{ grid-column: 1 / -1; }
.form-hint{ margin:.65rem 0 0; color: var(--muted); font-size:.92rem; }
.form.compact input{ padding:.75rem .85rem; border-radius: 14px; }
.form-row{ display:flex; gap:.6rem; align-items:center; }
.form-row input{ flex:1 1 auto; }

/* Page hero */
.page-hero{
  padding: 3.9rem 0 2.8rem;
}
.page-hero--small{ padding: 3.1rem 0 1.8rem; }
.page-hero__inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.4rem;
  align-items:center;
}
.page-hero__media{ display:flex; justify-content:flex-end; }

/* Timeline */
.timeline{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
.timeline__item{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  padding: 1.15rem 1.15rem 1.05rem;
}
.timeline__tag{
  display:inline-flex;
  align-items:center;
  padding:.28rem .6rem;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-weight:700;
  font-size:.9rem;
  margin-bottom:.7rem;
}
.timeline__item h3{ margin:0 0 .4rem; }
.timeline__item p{ margin:0; color: var(--muted); }

/* Contact cards / panel */
.contact-cards{ display:grid; gap:.75rem; margin-top:.8rem; }
.contact-card{
  display:flex; gap:.85rem; align-items:flex-start;
  padding: .95rem 1rem;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.contact-card__icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.contact-card__title{ font-weight:800; }
.contact-card__text{ color: var(--muted); }
.panel{
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
}

/* Callout */
.callout{
  margin-top: 1.4rem;
  display:flex;
  gap: .85rem;
  align-items:flex-start;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.callout--thin{ margin-top:1.1rem; padding:.95rem 1rem; }
.callout__icon{
  width:42px; height:42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
  flex:0 0 auto;
}
.callout h3{ margin:0 0 .35rem; }
.callout p{ margin:0; color: var(--muted); }
.callout__actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }

/* Prose */
.prose{
  max-width: 860px;
}
.prose h2{ margin: 1.6rem 0 .5rem; }
.prose p, .prose li{ color: var(--muted); }
.prose strong{ color: var(--text); }

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.18);
  padding: 3rem 0 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr .7fr 1.1fr;
  gap: 1.1rem;
}
.footer-title{ font-weight:900; margin: 0 0 .6rem; }
.footer-note{ color: var(--muted); margin: .3rem 0 .9rem; }
.footer-brand{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom: .85rem; }
.footer-list, .footer-links{ list-style:none; padding:0; margin:0; }
.footer-list li{ display:flex; gap:.6rem; align-items:flex-start; color: var(--muted); margin:.5rem 0; }
.footer-links li{ margin:.4rem 0; }
.footer-links a{ color: var(--muted); }
.footer-links a:hover{ color: var(--text); text-decoration:none; }
.footer-bottom{
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display:flex;
  gap:1rem;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-small{ font-size:.92rem; }

/* Cookie banner (home only) */
.cookie{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  padding: .85rem 0;
  background: rgba(7,12,23,.86);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.cookie__inner{
  display:flex;
  gap: 1rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cookie__text p{ margin:.25rem 0 0; color: var(--muted); max-width: 720px; }
.cookie__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 1.1rem;
  z-index: 80;
}
.modal.is-open{ display:flex; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.modal__panel{
  position:relative;
  width: min(520px, 100%);
  border-radius: 30px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(900px 400px at 100% 0%, rgba(42,245,152,.14), transparent 55%),
    rgba(15,27,51,.96);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.25rem 1.25rem;
  text-align:center;
}
.modal__icon{
  width:58px; height:58px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  margin: 0 auto .85rem;
  background: rgba(42,245,152,.12);
  border:1px solid rgba(42,245,152,.35);
}
.modal__icon i{ font-size:1.55rem; color: var(--accent5); text-shadow: 0 12px 30px rgba(42,245,152,.18); }
.modal__title{ margin:.1rem 0 .35rem; }
.modal__text{ color: var(--muted); margin:0 0 1rem; }

/* Responsive */
@media (max-width: 980px){
  .hero__inner, .split, .page-hero__inner, .cta-panel{ grid-template-columns: 1fr; }
  .media-card img{ height: 300px; }
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3, .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .reviews{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:absolute;
    top: calc(100% + 1px);
    right: 0;
    left:0;
    margin:0;
    padding: .85rem;
    background: rgba(7,12,23,.94);
    border-bottom:1px solid var(--line);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .nav.is-open{ display:flex; }
  .nav__link{ padding:.75rem .85rem; border-radius: 16px; }
  .hero__meta{ grid-template-columns: 1fr; }
  .grid-3, .cards, .grid-4{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .form-row{ flex-direction:column; align-items:stretch; }
  .footer-grid{ grid-template-columns: 1fr; }
}


/* Reviews stars */
.review__stars{
  display:flex;
  gap:.25rem;
  margin: .9rem 1.15rem 0;
  color: rgba(255,210,77,.95);
  text-shadow: 0 18px 44px rgba(255,210,77,.16);
}
.review blockquote{ margin-top:.75rem; }

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

/* Badge rows */
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin: 1.05rem 0 0;
}
.badge-row--small{ margin-top:.85rem; gap:.55rem; }
.badge--mini{
  font-size:.88rem;
  padding:.35rem .6rem;
}