/* 
  TraceChain Recovery — Dark theme with blue accents
  Fonts: Inter. Color tokens below.
*/
:root{
  --bg: #0b1020;
  --bg-2:#0d1329;
  --card:#111737cc;
  --muted:#9ab0d6;
  --text:#e6eeff;
  --accent:#3b82f6;
  --accent-2:#60a5fa;
  --success:#22c55e;
  --danger:#ef4444;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, #1b2b67 0%, transparent 60%), var(--bg);
  line-height:1.6;
}

.container{width:min(1280px, 96vw); margin-inline:auto;}

.row{display:flex; gap:1.25rem}
.row.between{justify-content:space-between}
.row.center{align-items:center}
.row.wrap{flex-wrap:wrap}
.gap{gap:2rem}

a{color:#cfe2ff; text-decoration:none}
a:hover{color:#fff; text-decoration:underline}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.8rem 1.1rem; border-radius:999px; border:1px solid #2b3961;
  background:#0d1430aa; color:#e5efff; backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); background:#0f1840cc; border-color:#3b4f8d}
.btn-lg{padding:1rem 1.35rem; font-weight:700}
.btn-primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; border-color:#2c3b6b}

.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(8px);
  background: linear-gradient(180deg, rgba(5,10,20,.75), rgba(5,10,20,.35));
  border-bottom:1px solid #141a33;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; color:#fff}
.brand svg{color:var(--accent)}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{padding:.6rem .4rem; color:#c6d5ff}
.nav a:hover{color:#fff}

.hero{position:relative; padding:8rem 0 6rem; isolation:isolate}
@media (min-width:1400px){.hero{padding:9rem 0 6.5rem}}
.hero__overlay{
  position:absolute; inset:0; background: radial-gradient(800px 500px at 20% 20%, #1b2b67 0%, transparent 60%),
  radial-gradient(900px 600px at 80% 0%, #153b7a 0%, transparent 60%);
  mix-blend: screen; pointer-events:none;
}
.bg-video{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.2; filter: saturate(140%) contrast(110%) brightness(80%);
}
.bg-canvas{
  position:fixed; inset:0; z-index:-3; opacity:.35;
  background: radial-gradient(1200px 800px at 20% -10%, #17306a 0%, transparent 60%), var(--bg);
}
.hero__content{max-width:1080px}
h1{font-size: clamp(2rem, 4.5vw, 3.5rem); line-height:1.1; margin:0 0 1rem; letter-spacing:.3px}
.accent{color: var(--accent-2); text-shadow: 0 8px 40px rgba(48,129,237,.45)}
.lede{font-size:1.15rem; color:#c3d3ff; margin:.25rem 0 1.25rem}
.cta{display:flex; gap:1rem; flex-wrap:wrap}
.cta .btn{padding-inline:1.25rem}
@media (min-width: 900px){
  .cta .btn{padding-inline:1.6rem}
}


.badges{display:flex; gap:1rem; list-style:none; padding:0; margin:1.25rem 0 0; color:#cce; flex-wrap:wrap; justify-content:space-between}
.badges li{flex:1 1 240px; text-align:center; background:#0d1430cc; border:1px solid #23346a; padding:.65rem 1rem; border-radius:999px}
.badges li{background:#0d1430cc; border:1px solid #23346a; padding:.55rem .8rem; border-radius:999px}

.ribbon{border-block:1px solid #131939; padding:.6rem 0; background:#0b1125}
.ribbon__item{opacity:.85; font-size:1rem; padding:.2rem .6rem}

.section-title{font-size: clamp(1.4rem, 2.4vw, 2rem); margin:0 0 1rem}
.cards{padding:4rem 0}
.grid{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.card{grid-column: span 4; min-height: 180px; background: linear-gradient(180deg, #0e1634, #0b1229);
  border:1px solid #1a2750; border-radius:1.25rem; padding:1.1rem; box-shadow: var(--shadow)}
.card__icon{font-size:1.4rem; opacity:.9}
.card h3{margin:.25rem 0 .25rem; font-size:1.15rem}
.card p{color:#c5d4ff; opacity:.9}

.split{padding:4rem 0; background: linear-gradient(180deg, #0b1125, #0a0f1f)}
.split__text{flex:1 1 420px}
.split__panel{flex:1 1 380px; background:linear-gradient(180deg, #0e1634, #0b1229); border:1px solid #1a2750; border-radius:1.25rem; padding:1.25rem}
.steps{list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.8rem}
.steps li{display:flex; align-items:center; gap:.8rem; background:#0d1430aa; border:1px solid #203162; border-radius:.9rem; padding:.8rem 1rem}
.steps span{display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:.6rem; background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#001029; font-weight:800}

.kpi{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; text-align:center}
.kpi strong{display:block; font-size:1.6rem; color:#fff}
.kpi span{color:#a5b8e6; font-size:.9rem}
.fineprint{color:#a4b3da; opacity:.8}

.trust{padding:4rem 0}
.trust__grid{grid-template-columns: repeat(12, minmax(0,1fr)); gap:.8rem}
.pill{grid-column: span 4; padding:.75rem 1rem; border-radius:999px; border:1px solid #203162; background:#0d1430aa; text-align:center}

.quote{margin-top:1.3rem; padding:1rem 1.2rem; background:#0d143088; border:1px solid #25366b; border-radius:1rem; font-style:italic; color:#d8e5ff}

.faq{padding:4rem 0; background:linear-gradient(180deg, #0a0f1f, #0a0e1b)}
details{background:#0d1430aa; border:1px solid #23346a; border-radius:1rem; padding:1rem 1.1rem; margin:.6rem 0}
details summary{cursor:pointer; font-weight:600; color:#dbe7ff}

.contact{padding:4rem 0}
.form{display:grid; gap:1rem}
.form__row{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
label{display:grid; gap:.4rem; color:#c7d7ff}
input,select,textarea{
  background:#0d1430; border:1px solid #1e2c57; color:#e6eeff; border-radius:.8rem; padding:.75rem .9rem; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:#3559b9; box-shadow: 0 0 0 3px #3559b933}
.form__actions{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}

.site-footer{border-top:1px solid #121838; padding:1.2rem 0; background:#090e1b; color:#a8b7da}
.subnav a{color:#a8b7da}
.subnav a:hover{color:#fff}

@media (max-width:900px){
  .card{grid-column: span 6}
  .pill{grid-column: span 6}
}
@media (max-width:600px){
  .card{grid-column: span 12}
  .pill{grid-column: span 12}
  .form__row{grid-template-columns:1fr}
}


/* === Mobile Enhancements === */
:root{ --header-h: 64px; }
.site-header .container{ padding: .4rem .75rem; }
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:.75rem; border:1px solid #223057;
  background:#0d1430aa; color:#e6eeff; box-shadow: var(--shadow);
  align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.menu-toggle span{
  display:block; width:20px; height:2px; background:#cfe2ff; border-radius:2px;
}
@media (max-width: 860px){
  .menu-toggle{display:inline-flex;}
  .nav{ 
    position: fixed; inset: var(--header-h) 0 auto auto; right:.75rem;
    display:flex; flex-direction:column; gap:.4rem; padding:.6rem; width: min(86vw, 320px);
    background:linear-gradient(180deg, #0e1634, #0b1229); border:1px solid #1a2750; border-radius:1rem;
    transform: translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:.18s ease;
  }
  .nav a{ padding:.8rem .9rem; border-radius:.6rem; background:#0d1430aa; border:1px solid #223057; }
  .nav .btn{ width:100%; }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; }
}
/* Layout refinements */
.container{ padding: 0 12px; }
.hero{ padding: 6.5rem 0 4.5rem; }
.hero__content{ max-width: 1080px; }
.lede{ font-size:1.05rem; }
.cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cta .btn{ min-height:44px; }
.badges{ gap:.6rem; }
.badges li{ flex:1 1 200px; padding:.6rem .8rem; }
@media (max-width: 600px){
  h1{ font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .hero{ padding: 5.5rem 0 3.5rem; }
  .cta .btn{ flex:1 1 220px; }
  .ribbon__item{ font-size:.95rem; }
  .split__panel{ padding:1rem; }
  .kpi strong{ font-size:1.4rem; }
  .form__actions{ flex-direction:column; align-items:stretch; }
  .form__actions .btn{ width:100%; }
  .site-footer .row{ gap:.6rem; }
}
/* Improve tap targets in the header on touch */
@media (hover:none){
  .nav a{ padding:.9rem 1rem; }
}
/* Reduce video intensity on mobile to improve legibility/perf */
@media (max-width: 600px){
  .bg-video{ opacity:.16; }
}