/* ============================================================
   FrameLab AI — Design System
   Aesthetic: "Aurora Studio" — deep ink surfaces, an aurora
   gradient signature (azure → violet → rose → amber), glass
   panels, editorial display type paired with a clean grotesk.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=general-sans@400,500,600,700&display=swap');

:root{
  /* ---- Aurora gradient (signature) ---- */
  --aurora-1:#4F7CFF;
  --aurora-2:#9B5CFF;
  --aurora-3:#FF5C8A;
  --aurora-4:#FFB25C;
  --aurora: linear-gradient(115deg,var(--aurora-1) 0%,var(--aurora-2) 38%,var(--aurora-3) 68%,var(--aurora-4) 100%);
  --aurora-soft: linear-gradient(115deg, rgba(79,124,255,.18) 0%, rgba(155,92,255,.18) 38%, rgba(255,92,138,.18) 68%, rgba(255,178,92,.18) 100%);

  /* ---- Surfaces (dark default) ---- */
  --bg:#08080D;
  --bg-elevated:#0E0E16;
  --surface:#12121C;
  --surface-2:#181826;
  --glass: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.09);
  --glass-strong: rgba(255,255,255,0.08);

  --text-1:#F3F3F7;
  --text-2:#A9A9BC;
  --text-3:#6E6E82;
  --border:rgba(255,255,255,0.08);

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:28px;
  --radius-xl:36px;

  --shadow-soft: 0 8px 30px rgba(0,0,0,.35);
  --shadow-lift: 0 20px 60px rgba(0,0,0,.5);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(107,92,255,.18);

  --ease: cubic-bezier(.16,1,.3,1);
  --font-display:'Clash Display', 'General Sans', sans-serif;
  --font-body:'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-theme="light"]{
  --bg:#FBFAF9;
  --bg-elevated:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F3F2F8;
  --glass: rgba(255,255,255,0.6);
  --glass-border: rgba(20,20,30,0.08);
  --glass-strong: rgba(20,20,30,0.05);
  --text-1:#131320;
  --text-2:#55556B;
  --text-3:#8A8A9C;
  --border:rgba(20,20,30,0.08);
  --shadow-soft: 0 8px 30px rgba(20,20,40,.08);
  --shadow-lift: 0 20px 60px rgba(20,20,40,.12);
  --shadow-glow: 0 0 0 1px rgba(20,20,30,.05), 0 20px 60px rgba(107,92,255,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
}
p{margin:0; color:var(--text-2); line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:rgba(155,92,255,.35);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.container{max-width:1240px; margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-2);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--aurora); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:999px; border:none;
  font-size:15px; font-weight:600; transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--aurora); color:#fff;
  box-shadow:0 8px 24px rgba(155,92,255,.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(155,92,255,.45);}
.btn-ghost{
  background:var(--glass); color:var(--text-1);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
}
.btn-ghost:hover{background:var(--glass-strong); transform:translateY(-2px);}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}

/* ---- Form controls ---- */
.input, .select{
  appearance:none; -webkit-appearance:none;
  background:var(--surface); color:var(--text-1);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 16px; font-size:14.5px; font-family:var(--font-body);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.input::placeholder{color:var(--text-3);}
.input:focus, .select:focus{
  border-color:var(--aurora-2);
  box-shadow:0 0 0 3px rgba(155,92,255,.18);
}
.select{
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9A9BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  cursor:pointer;
}
.select option{background:var(--surface); color:var(--text-1);}

/* ---- Glass panel ---- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}

/* ---- Nav ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0;
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:10px 14px 10px 22px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(24px) saturate(140%);
  border-radius:999px; box-shadow:var(--shadow-soft);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px;}
.brand-mark{
  width:30px; height:30px; border-radius:10px; background:var(--aurora);
  display:grid; place-items:center; color:#fff; font-size:14px; font-weight:700;
  box-shadow:0 4px 14px rgba(155,92,255,.4);
}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--text-2); transition:color .2s;}
.nav-links a:hover{color:var(--text-1);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border);
  background:var(--glass-strong); display:grid; place-items:center; color:var(--text-1);
  transition:transform .2s, background .2s;
}
.icon-btn:hover{transform:translateY(-2px); background:var(--glass-border);}
.nav-toggle{display:none;}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:grid;}
}

/* ---- Section scaffolding ---- */
section{position:relative; padding:120px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,4vw,44px); margin-top:14px;}
.section-head p{margin-top:16px; font-size:17px;}

/* ---- Aurora glow backdrop ---- */
.glow{
  position:absolute; border-radius:50%; filter:blur(100px); opacity:.35; z-index:0; pointer-events:none;
}

/* ---- Cards ---- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--glass-border);}

.tag{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--surface-2); color:var(--text-2);
  border:1px solid var(--border);
}
.tag.gold{background:linear-gradient(120deg, rgba(255,178,92,.18), rgba(255,92,138,.14)); color:#FFB25C; border-color:rgba(255,178,92,.3);}

/* ---- Footer ---- */
footer{border-top:1px solid var(--border); padding:64px 0 32px; margin-top:60px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
.footer-col h4{font-size:13px; color:var(--text-3); font-family:var(--font-body); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;}
.footer-col a{display:block; font-size:14.5px; color:var(--text-2); margin-bottom:12px; transition:color .2s;}
.footer-col a:hover{color:var(--text-1);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:56px; padding-top:24px; border-top:1px solid var(--border); font-size:13px; color:var(--text-3); flex-wrap:wrap; gap:12px;}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr; }
  section{padding:80px 0;}
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface-2); border-radius:10px;}

/* ---- Utility ---- */
.flex{display:flex;}
.center{align-items:center; justify-content:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-40{margin-top:40px;}
.text-center{text-align:center;}
.hidden{display:none !important;}

/* ---- Reveal-on-scroll ---- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* ---- Skip link (a11y) ---- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--surface); color:var(--text-1);
  padding:12px 18px; border-radius:8px; z-index:1000;
}
.skip-link:focus{left:16px; top:16px;}

/* ---- Ad slot placeholders (AdSense-ready, lazy, reserved space) ---- */
.ad-slot{
  width:100%; border-radius:var(--radius-md); border:1px dashed var(--border);
  background:var(--surface-2); color:var(--text-3); font-size:12.5px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:100px; content-visibility:auto;
}
.ad-slot[data-slot="banner"]{min-height:90px;}
.ad-slot[data-slot="sidebar"]{min-height:250px;}
.ad-slot[data-slot="in-article"]{min-height:120px; margin:32px 0;}