/* ============================================================
   WizShard – styles.css
   Palette: #004E5A, #2F8D8D, #A6D9D5, #D8F0EE, #000, #FFF
   Type: Luminary (display) + Inter (body)
   ============================================================ */

/* ------------------------------
   1) Design Tokens
   ------------------------------ */
:root{
  /* Brand palette */
  --teal-900:#004E5A; /* deep teal */
  --teal-700:#2F8D8D; /* mid teal */
  --teal-300:#A6D9D5; /* light aqua */
  --teal-100:#D8F0EE; /* mint haze */
  --black:#000000;
  --white:#FFFFFF;

  /* Semantic colors */
  --bg: var(--white);
  --surface: #F6FBFA;
  --text: #112426;
  --text-muted: #3A5356;
  --primary: var(--teal-900);
  --primary-contrast: var(--white);
  --accent: var(--teal-700);
  --border: #DDE8E8;

  /* Gradient */
  --grad-wizard: linear-gradient(135deg,var(--teal-900),var(--teal-700) 50%,var(--teal-300));

  /* Typography */
  --ff-display: "Luminary", "Cinzel", "Garamond", serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid type scale */
  --step--1: clamp(0.85rem, 0.80rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.3vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.05rem + 0.6vw, 1.40rem);
  --step-2:  clamp(1.44rem, 1.15rem + 1.0vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.25rem + 1.6vw, 2.25rem);
  --step-4:  clamp(2.07rem, 1.35rem + 2.4vw, 2.80rem);
  --step-5:  clamp(2.49rem, 1.45rem + 3.6vw, 3.60rem);

  /* Spacing (4pt base) */
  --space-1: .25rem;  /* 4px */
  --space-2: .5rem;   /* 8px */
  --space-3: .75rem;  /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  /* Radii & shadows */
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14);

  /* Layout */
  --container: 1200px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#071516;
    --surface:#0E1D1F;
    --text:#EAF6F6;
    --text-muted:#A6C3C6;
    --border:#1F3336;
    --primary:#9BE3DE;
    --primary-contrast:#061113;
    --accent:#73C9C6;
    --shadow-sm: 0 2px 6px rgba(0,0,0,.40);
    --shadow-md: 0 8px 24px rgba(0,0,0,.50);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.60);
  }
}

/* ------------------------------
   2) Base & Typography
   ------------------------------ */
@font-face{
  font-family:"Luminary";
  src: url("/fonts/Luminary.woff2") format("woff2");
  font-display: swap;
}
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 var(--step-0)/1.6 var(--ff-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:.25rem;
}
h1,h2,h3,h4{
  margin:0 0 var(--space-4);
  font-family:var(--ff-display);
  letter-spacing:.2px;
  color:var(--text);
}
h1{ font-size:var(--step-5); line-height:1.1; }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-3); }
h4{ font-size:var(--step-2); }
p{ margin:0 0 var(--space-4); }
small{ font-size:var(--step--1); color:var(--text-muted); }

/* ------------------------------
   3) Layout Helpers
   ------------------------------ */
.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}
.grid{ display:grid; gap: var(--space-5); }
@media (width >= 768px){
  .grid.cols-2{ grid-template-columns:1fr 1fr; }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
}
.stack > * + *{ margin-top: var(--space-4); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.center{ display:grid; place-items:center; }

/* ------------------------------
   4) Components
   ------------------------------ */
.btn{
  --_bg: var(--primary);
  --_fg: var(--primary-contrast);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1.1rem;
  border-radius: var(--radius-md);
  border:1px solid transparent;
  background: var(--_bg); color: var(--_fg);
  box-shadow: var(--shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}
.btn:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn--ghost{ --_bg: transparent; --_fg: var(--primary); border-color: var(--primary); color: var(--primary); }
.btn--accent{ --_bg: var(--accent); }
.btn--block{ width:100%; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.badge{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  font-weight:600;
  font-size: .85em;
  background:rgba(47,141,141,.15);
  color:var(--primary);
  border:1px solid rgba(47,141,141,.25);
}

/* Navbar */
.nav{
  display:flex; align-items:center; gap:var(--space-5);
  padding: var(--space-4) 0;
}
.nav a{ color:var(--text); font-weight:600; }
.nav a[aria-current="page"]{ color:var(--primary); }

/* Forms */
.input, select, textarea{
  width:100%; padding:.75rem 1rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg); color:var(--text);
}
.input:focus{ outline:3px solid rgba(47,141,141,.35); border-color:var(--accent); }

/* ------------------------------
   5) Shard Hero Background
   ------------------------------ */
.shard-bg{
  position:relative; isolation:isolate; background:var(--teal-900);
  color:var(--white); overflow:hidden;
}
.shard-bg::before{
  content:""; position:absolute; inset:-20% -10%;
  background:
    radial-gradient(1200px 800px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
    conic-gradient(from 45deg at 50% 50%,
      rgba(255,255,255,.05) 0 10%, transparent 10% 20%,
      rgba(255,255,255,.05) 20% 30%, transparent 30% 40%,
      rgba(255,255,255,.05) 40% 50%, transparent 50% 60%,
      rgba(255,255,255,.05) 60% 70%, transparent 70% 80%,
      rgba(255,255,255,.05) 80% 90%, transparent 90% 100%);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.25));
  transform: skewY(-4deg);
  z-index:-1;
}
.shard-overlay{
  background: linear-gradient(160deg, rgba(0,0,0,.00), rgba(0,0,0,.28));
  border-radius: var(--radius-lg);
}

/* CTA banner */
.banner{
  background: var(--grad-wizard);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

/* ------------------------------
   6) Utilities
   ------------------------------ */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.mt-4{margin-top:var(--space-4)} .mb-4{margin-bottom:var(--space-4)}
.p-0{padding:0} .p-4{padding:var(--space-4)} .p-6{padding:var(--space-6)}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.radius{border-radius:var(--radius-md)}
.shadow{box-shadow:var(--shadow-md)}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ------------------------------
   7) Motion & A11y
   ------------------------------ */
*[data-anim]{ transition: all .3s var(--ease); }
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.landing-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4); /* adds vertical space between buttons */
}

.btn {
  font-family: var(--ff-body);
  color: var(--white) !important;
  background-color: var(--teal-700);
  border-radius: var(--radius-lg);
  padding: 1rem 2rem;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.3s ease;
  width: 100%;
  max-width: 280px;
  text-align: center;
  display: block;
}

.btn:hover {
  background-color: var(--teal-900);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------
   Mobile-Friendly Adjustments
   --------------------------------------- */
html, body {
  min-height: 100dvh; /* use dynamic viewport height for mobile */
}

/* Landing page tweaks */
.slogan {
  white-space: normal;       /* allow wrapping on small screens */
  overflow: visible;
  text-overflow: clip;
}

/* Responsive layout for small screens */
@media (max-width: 480px) {
  .landing {
    padding: 1.5rem;
  }

  .logo-img {
    max-width: 72vw;
    margin-bottom: 1.5rem;
  }

  .slogan {
    font-size: var(--step-2);
    margin-bottom: 1.5rem;
  }

  /* Buttons stack and fit width */
  .landing-buttons,
  .stack {
    gap: var(--space-3);
  }

  .landing .btn,
  .landing-btn,
  .btn {
    max-width: 320px;
    width: 100%;
  }

  /* QR code smaller on phones */
  .qr-img {
    max-width: 80vw;
  }
}


/* ------------------------------
   8) Example hero (optional)
   Usage:
   <section class="shard-bg">
     <div class="container" style="padding: min(12vh, var(--space-8)) 0;">
       <span class="badge">Tech Solutions • Consulting</span>
       <h1>We turn bold ideas into pixel-perfect realities.</h1>
       <p class="text-muted">Web • Mobile • Web3 — delivered with speed, clarity and wizard-level craft.</p>
       <div class="cluster mt-4">
         <a class="btn" href="/book">Book a discovery call</a>
         <a class="btn btn--ghost" href="/work">See our work</a>
       </div>
     </div>
   </section>
   ------------------------------ */