/* ScalarShift shared styles */
:root{
  --bg:#f6fbfb;
  --ink:#102C34;         /* deep teal (text) */
  --ink-2:#163D45;       /* logo body */
  --accent:#E1892A;      /* orange accent */
  --muted:#5D7C85;       /* secondary text */
  --card:#ffffff;        /* card bg */
  --ring:rgba(16,44,52,.08); /* wave rings */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1120px; margin:0 auto; padding:0 24px}

header{
  position:sticky; top:0;
  backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(to bottom, rgba(246,251,251,.9), rgba(246,251,251,.7));
  border-bottom:1px solid rgba(16,44,52,.06);
  z-index:50;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}

header nav{display:flex; gap:10px; align-items:center}

.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.brand h1{font-size:1.125rem; letter-spacing:.2px; margin:0; font-weight:700}
.badge{font-size:.7rem; color:var(--muted); letter-spacing:.4px}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem;
  border-radius:14px;
  border:1px solid rgba(16,44,52,.12);
  background:#fff; color:var(--ink); text-decoration:none; font-weight:600;
  box-shadow:0 1px 1px rgba(16,44,52,.04)
}
.btn.primary{background:var(--ink); color:#fff; border-color:transparent}

/* Logo */
.logo{height:32px; width:auto; display:block}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero-inner{display:grid; grid-template-columns:1fr; gap:28px; align-items:center; padding:72px 0}
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr; padding:56px 0} }
.headline{font-size:clamp(1.9rem, 3.5vw, 3rem); line-height:1.1; margin:0 0 12px; font-weight:800}
.sub{color:var(--muted); font-size:1.05rem; margin-bottom:24px}
.section-title{margin:0 0 16px; font-size:1.6rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* Scalar waves background motif */
.waves{position:absolute; inset:-20% -10% auto -10%; height:520px; pointer-events:none; z-index:-1;}
.waves:before{
  content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 25% 45%, var(--ring) 0 80px, transparent 81px),
    radial-gradient(circle at 25% 45%, var(--ring) 0 140px, transparent 141px),
    radial-gradient(circle at 25% 45%, var(--ring) 0 220px, transparent 221px),
    radial-gradient(circle at 25% 45%, var(--ring) 0 300px, transparent 301px),
    radial-gradient(circle at 25% 45%, var(--ring) 0 380px, transparent 381px);
  mask: radial-gradient(ellipse at 25% 45%, #000 0 60%, transparent 70%);
}

/* Sections / Cards */
.section{padding:56px 0}
.grid{display:grid; gap:18px; grid-template-columns:repeat(12, 1fr)}
.card{grid-column:span 6; background:var(--card); border:1px solid rgba(16,44,52,.08); border-radius:18px; padding:22px; box-shadow:0 6px 14px rgba(16,44,52,.06)}
.card h3{margin:0 0 8px; font-size:1.1rem}
.card p{margin:0; color:var(--muted)}
@media (max-width:860px){ .card{grid-column:span 12} }

/* Creds strip */
.strip{display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; padding:20px; border:1px dashed rgba(16,44,52,.14); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.7))}
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* CTA */
.cta{background:linear-gradient(180deg, #102C34, #163D45); color:#fff; border-radius:22px; padding:36px; display:grid; gap:10px; align-items:center}
.cta p{margin:0; color:rgba(255,255,255,.88)}

/* Forms */
.form-grid{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.input, .textarea{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
}
.input::placeholder, .textarea::placeholder{color:rgba(255,255,255,.82)}
.col-span-2{grid-column:span 2}
.justify-center{justify-content:center}
@media (max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .col-span-2{grid-column:auto}
}

/* Footer */
footer{padding:32px 0 56px; color:var(--muted)}
.footer-row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:inherit}

/* Privacy page specifics */
body.privacy main{padding:40px 0 0}
.page-hero{
  padding:40px 0 12px;
  border-bottom:1px solid rgba(16,44,52,.08);
  background: radial-gradient(circle at 25% 45%, var(--ring) 0 120px, transparent 121px)
}
.page-title{margin:0; font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.15; font-weight:800}
.page-sub{color:var(--muted); margin-top:6px}
body.privacy .section{padding:28px 0}

.policy{background:var(--card); border:1px solid rgba(16,44,52,.08); border-radius:18px; padding:22px; box-shadow:0 6px 14px rgba(16,44,52,.06)}
.policy h2{margin:18px 0 8px; font-size:1.2rem}
.policy p{margin:8px 0; color:var(--ink)}
.policy ul{margin:8px 0 8px 18px}

.muted{color:var(--muted)}