/* =========================
   Auri Fell — site.css (clean, unified)
   ========================= */

/* ---------------- TOKENS ---------------- */
:root{
  --bg:#0b0920;           /* deep indigo-black */
  --bg-2:#120d33;         /* darker violet */
  --panel:#1a143f;        /* panel violet */
  --muted:#b6b1d6;        /* muted lilac text */
  --text:#f2eaff;         /* near-white with lilac tint */

  --accent:#c44bff;       /* magenta-violet */
  --accent-2:#5c6bff;     /* indigo */

  --red:#d33b53;
  --green:#26c27a;
  --blue:#5aa3ff;
  --yellow:#ffd36a;

  --outline:3px;
  --radius:18px;
  --shadow:0 10px 35px rgba(14,9,50,.6);
  --border:rgba(255,255,255,.08);
  --maxw:1100px;
  --gutter:20px;

  --inner-pad-x:24px;     /* content-well inner pad */
  --inner-pad-y:16px;

  --footer-h:64px;        /* visible height reserved for floating footer */
}

/* ---------------- BASE ---------------- */
html,body{height:100%}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}           /* kill sideways scroll */

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

/* Base gradient layer (deepest) */
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120vmax 70vmax at 10% -10%, var(--accent-2) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-repeat:no-repeat;
}

/* Aurora / stars (bright by default) */
.theme-aurora::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    /* bigger spark stars */
    radial-gradient(3px 3px at 8% 22%,  rgba(255,255,255,.22) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 28% 38%, rgba(255,255,255,.18) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 70% 18%, rgba(255,255,255,.20) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 82% 72%, rgba(255,255,255,.16) 0 50%, transparent 51%),
    radial-gradient(2px 2px at 18% 78%, rgba(255,255,255,.20) 0 50%, transparent 51%),
    radial-gradient(2px 2px at 54% 64%, rgba(255,255,255,.18) 0 50%, transparent 51%),

    /* blue-forward blobs + magenta support */
    radial-gradient(90vmax 60vmax at 85% 8%,  rgba(90,160,255,.70),  transparent 60%),
    radial-gradient(75vmax 50vmax at 10% -6%, rgba(196,75,255,.62), transparent 62%),
    radial-gradient(100vmax 90vmax at 30% 110%, rgba(80,30,150,.58), transparent 62%),

    linear-gradient(180deg, var(--bg-2), var(--bg));
  filter:saturate(120%) brightness(1.22);
}

/* micro-stars + bokeh tint + gentle drift */
.theme-aurora::after{
  content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.22) 1px, transparent 1.2px),
    radial-gradient(1px 1px at 60px 80px, rgba(255,255,255,.16) 1px, transparent 1.2px),
    radial-gradient(1px 1px at 100px 140px, rgba(255,255,255,.12) 1px, transparent 1.2px),
    radial-gradient(18vmax 12vmax at 10% 8%, rgba(88,146,255,.20), transparent 60%),
    radial-gradient(14vmax 10vmax at 35% 28%, rgba(120,170,255,.16), transparent 62%),
    radial-gradient(12vmax 9vmax  at 65% 18%, rgba(120,170,255,.14), transparent 62%),
    radial-gradient(20vmax 14vmax at 80% 40%, rgba(96,120,255,.18), transparent 65%);
  background-size:220px 220px, 180px 180px, 140px 140px, auto, auto, auto, auto;
  background-repeat:repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  animation:star-drift 40s linear infinite, twinkle 6s steps(2,end) infinite alternate;
  opacity:.95;
}
@keyframes star-drift{ to{ transform: translate3d(-40px,-30px,0) } }
@keyframes twinkle{ 0%{filter:brightness(.92)} 100%{filter:brightness(1.18)} }
@media (prefers-reduced-motion:reduce){ .theme-aurora::after{ animation:none } }

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.visually-hidden{position:absolute!important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}

a{color:inherit; text-decoration:none}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
img{display:block; max-width:100%; height:auto}

/* ---------------- HEADER ---------------- */
header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, rgba(8,7,22,.95), rgba(10,9,28,.75));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px var(--gutter); width:100%; max-width:var(--maxw)}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand .logo,.brand img{width:48px; height:48px; flex:0 0 auto; border-radius:10px; box-shadow:0 6px 20px rgba(14,9,50,.55); object-fit:contain; user-select:none; -webkit-user-drag:none}
.brand .title{font-weight:900; letter-spacing:.4px; font-size:30px; margin:0; background:linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Desktop nav */
nav{display:flex; align-items:center; gap:18px}
#site-nav .nav-link{
  padding:0 10px; border:0; background:transparent; box-shadow:none;
  color:#e8ddff; font-weight:900; font-size:18px; letter-spacing:.3px;
  text-shadow:0 1px 16px rgba(140,80,255,.25);
}
#site-nav .nav-link:hover{color:#fff; text-shadow:0 2px 22px rgba(180,120,255,.45)}
#site-nav .nav-link.active{
  color:#f3e7ff; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px;
}

/* Header hamburger (dots ⇄ lines) */
.hamburger{
  display:none; width:40px; height:40px;
  background:none; border:0; padding:8px; border-radius:10px; cursor:pointer; color:var(--text);
  transition:opacity .2s ease;
}
.hamburger:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}

/* If you use an inline SVG with <g class="dots/lines"> */
.hamburger svg .lines{opacity:0; transform:scaleX(.8); transform-origin:center; transition:opacity .22s ease, transform .22s ease}
.hamburger svg .dots{opacity:1; transform:scale(1); transform-origin:center; transition:opacity .22s ease, transform .22s ease}
.hamburger.is-open svg .lines{opacity:1; transform:scaleX(1)}
.hamburger.is-open svg .dots{opacity:0; transform:scale(.6)}

@media (max-width:700px){
  nav{display:none}
  .hamburger{display:inline-flex; align-items:center; justify-content:center}
}

/* ---------------- MOBILE DRAWER ---------------- */
.menu-card{
  position:fixed; top:0; right:0; 
  height:auto; width:min(86vw,320px);
  z-index:10010; overflow:hidden; /* above the backdrop */
  border-left:1px solid var(--border); border-radius:18px 0 0 18px;
  transform:translateX(102%); opacity:0; pointer-events:none;
  transition:transform .40s cubic-bezier(.22,.9,.31,1), opacity .18s ease-out, box-shadow .25s ease;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.menu-card::before{
  content:""; position:absolute; inset:-10% -20% -10% -20%; z-index:-1;
  background:
    radial-gradient(3px 3px at 16% 22%, rgba(255,255,255,.22) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 72% 12%, rgba(255,255,255,.18) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 40% 64%, rgba(255,255,255,.16) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 88% 78%, rgba(255,255,255,.14) 0 50%, transparent 51%),
    radial-gradient(140% 90%  at 15% 10%, rgba(92,107,255,.55), transparent 60%),
    radial-gradient(140% 100% at 80% 25%, rgba(196,75,255,.45), transparent 62%),
    radial-gradient(120% 90%  at 50% 85%, rgba(127,83,255,.40), transparent 60%),
    linear-gradient(180deg, rgba(26,20,63,.98), rgba(18,13,51,.98));
  filter:saturate(1.15) brightness(1.05);
}
.menu-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 110% at 50% 50%, transparent 60%, rgba(0,0,0,.25) 100%);
}
.menu-card.open{transform:translateX(0); opacity:1; pointer-events:auto; box-shadow:0 28px 80px rgba(0,0,0,.55)}

.menu-card .hamburger.inside{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  color:var(--text); background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
}

.menu-list{display:flex; flex-direction:column; gap:10px; padding:60px 18px 18px}
.menu-list a{
  padding:6px 2px; border-radius:8px; background:transparent; border:0;
  font-weight:900; letter-spacing:.3px; color:var(--text); font-size:20px;
  text-shadow:0 1px 16px rgba(140,80,255,.25);
}
.menu-list a:hover{color:#fff; text-shadow:0 2px 22px rgba(180,120,255,.45)}
.menu-list a.active,
.menu-list a[aria-current="page"]{
  color:#f3e7ff;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
}
.menu-list a:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  .menu-card,.hamburger,.menu-card .hamburger.inside{transition:none!important}
}

/* Backdrop that darkens & blurs the page (not the drawer) */
.backdrop{
  position:fixed; inset:0; z-index:10000;
  pointer-events:none; opacity:0; visibility:hidden;
  background:rgba(0,0,0,0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  will-change: opacity, backdrop-filter;
  transition:opacity .24s ease, backdrop-filter .24s ease, background .24s ease, visibility .24s;
}
.backdrop.show{
  opacity:1; visibility:visible; pointer-events:auto;
  background:rgba(0,0,0,.36);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

/* ---------------- HERO ---------------- */
.hero{padding:0}
.hero .top{display:grid; grid-template-columns:1fr; align-items:center; gap:24px; justify-items:center}
.hero .wordmark{max-width:900px; width:min(86vw,900px); filter:drop-shadow(0 22px 40px rgba(0,0,0,.6)) drop-shadow(0 2px 16px rgba(150,70,255,.25))}
.hero .sub{margin-top:6px; color:#cbb3ff; font-weight:700; letter-spacing:.2px}
.hero::after{content:none}

/* ---------------- CARDS / GRID ---------------- */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.card{
  background:linear-gradient(180deg, rgba(196,75,255,.12), rgba(26,20,63,.9));
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; border:1px solid var(--border)
}
.card h3{margin:0 0 10px; font-size:16px; font-weight:800}
.card p{margin:0 0 12px; color:var(--muted)}
.card .mini-btn{display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg, #5aa3ff, #4877ed); font-weight:700}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* ---------------- SOCIALS ---------------- */
.socials{
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0;
}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:12px; border:1px solid var(--border);
  background:rgba(26,20,63,.55); box-shadow:var(--shadow)
}
.socials a:hover{background:rgba(26,20,63,.85)}
.socials svg{ width:30px; height:30px }

/* ---------------- TESTIMONIALS ---------------- */
:root {--t-card-h:260px}
.testimonials { 
  position: relative; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:0px 0; 
}
.testimonial-card { 
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: var(--t-card-h); 
  height: auto;
  padding: 0 100px;
}

.t-content { transition: opacity .28s ease; }
.t-content.is-fading { opacity: 0; }
.testimonial-card .quote { font-size: 19px; line-height: 1.55; margin: 0 0 14px; font-style: italic; }
.testimonial-card .author { font-size: 15px; font-weight: 600; color: var(--muted); margin: 0; }

/* Mobile tweaks */
@media (max-width: 700px) {
  .testimonial-card {
    padding: 12px 70px 20px;    /* reduce side padding so text has room */
    min-height: 0;              /* no enforced min-height on mobile */
    height: auto;               /* grow naturally with text */
  }

  .testimonial-card .quote {
    font-size: 17px;            /* a touch smaller for better fit */
  }

  /* keep arrows usable but not in the way */
  .testimonials .arrow {
    width: 38px;
    height: 38px;
  }
}

/* arrows */
.testimonials .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
  color: var(--text); font-size: 18px; font-weight: 700;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px); cursor: pointer;
  transition: background .25s ease, transform .2s ease;
}
.testimonials .arrow.left  { left: 0; }
.testimonials .arrow.right { right: 0; }
.testimonials .arrow:hover { background: rgba(255,255,255,.10); transform: translateY(-50%) scale(1.05); }
.testimonials .arrow:active { transform: translateY(-50%) scale(0.95); }
@media (max-width:700px){ .testimonials .arrow.left{left:8px} .testimonials .arrow.right{right:8px} }

/* ---------------- CONTENT WELL ---------------- */
.page-veil{
  position:fixed; top:0; bottom:0; left:var(--gutter); right:var(--gutter);
  max-width:calc(var(--maxw) + 2*var(--inner-pad-x));
  margin:0 auto; border-radius:28px; pointer-events:none; z-index:900;
  box-shadow:0 0 70px 48px rgba(0,0,0,.32), 0 0 140px 96px rgba(0,0,0,.22);
}
main.wrap{
  position:relative; z-index:10;
  padding-left:calc(var(--gutter) + var(--inner-pad-x));
  padding-right:calc(var(--gutter) + var(--inner-pad-x));
  padding-top:var(--inner-pad-y);
  padding-bottom:calc(var(--footer-h) + 24px);
  clip-path:inset(0 0 calc(var(--footer-h) + 24px) 0 round 28px);
}
@media (max-width:520px){ :root{--inner-pad-x:16px; --inner-pad-y:12px} }

/* ---------------- SOFT / INVISIBLE DIVIDERS ---------------- */
.soft-div {
  height: 1px; max-width: 720px; margin: 24px auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  opacity: 0.6;
}
.soft-div.tight { margin: 10px auto; }
.soft-div.loose { margin: 40px auto; }

.i-div { height:1px; max-width:720px; margin:24px auto; background:transparent; opacity:0; }
.i-div.tight{margin:10px auto;} .i-div.loose{margin:40px auto;}

/* ---------------- FOOTER (floating bar) ---------------- */
footer.floating{
  position:fixed; left:0; right:0; bottom:max(0px, env(safe-area-inset-bottom));
  z-index:1500; text-align:center; background:rgba(10,9,28,.7);
  backdrop-filter:blur(12px) saturate(120%); border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -4px 30px rgba(0,0,0,.4); padding:14px 0; pointer-events:auto;
}
footer.floating .credits{ margin:0; color:var(--muted); font-size:14px; font-weight:500; }
footer.floating .credits a{ color:var(--blue) } footer.floating .credits a:hover{ text-decoration:underline }

/* ---------------- SCROLLBAR ---------------- */
::-webkit-scrollbar{ width:8px; background:transparent }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:rgba(141, 80, 255, 0);
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(195, 75, 255, 0) }
*{ scrollbar-width:thin; scrollbar-color: rgba(255, 255, 255, 0.423) transparent }