/* Atlas Asistan — Premium design layer (Talimat 37A) */
/* Fonts: Inter (body) + Space Grotesk (headings) — loaded via <link> in head */

:root{
  --premium-bg:#05070A;
  --premium-fg:#E2E8F0;
  --premium-muted:#94A3B8;
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--premium-fg);
  font-size:16px;
  line-height:1.75;
}
h1,h2,h3,.sec-head h2,.chat-head b{
  font-family:'Space Grotesk','Inter',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.02em;
}
.hero h1{font-size:clamp(2.125rem,6vw,3.5rem);line-height:1.12;font-weight:700}
p{font-size:16px;line-height:1.75}

/* ---- Header: sticky glass ---- */
.nav{
  position:sticky;top:0;
  background:rgba(5,7,10,.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .brand > span, .nav .brand span[style]{color:#fff !important}

/* ---- Glass cards ---- */
.card,.demo-panel,.plan,.glass-card{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 80px rgba(0,0,0,.5);
  border-radius:16px;
  transition:transform .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14)}

/* ---- Aurora blobs (injected by premium.js into .hero) ---- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:.6;will-change:transform}
.aurora i:nth-child(1){width:42rem;height:42rem;left:-10rem;top:-12rem;background:#00D1B2;animation:aurora1 36s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:38rem;height:38rem;right:-8rem;top:-6rem;background:#2F80FF;animation:aurora2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:34rem;height:34rem;left:30%;bottom:-14rem;background:#8B5CF6;animation:aurora3 40s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:30rem;height:30rem;right:20%;bottom:-10rem;background:#05070A;animation:aurora1 44s ease-in-out infinite alternate-reverse}
@keyframes aurora1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6rem,4rem) scale(1.15)}}
@keyframes aurora2{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-5rem,5rem) scale(.95)}}
@keyframes aurora3{0%{transform:translate(0,0) scale(.95)}100%{transform:translate(4rem,-4rem) scale(1.2)}}

/* ---- Grid pattern overlay (injected) ---- */
.bg-grid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.04;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000 0%,transparent 100%);
  mask-image:radial-gradient(60% 60% at 50% 40%,#000 0%,transparent 100%);
}

/* ---- Mesh gradient (no flat black) ---- */
.section.alt,.section{background-image:radial-gradient(50rem 26rem at 10% 0%,rgba(0,209,178,.05),transparent 60%),radial-gradient(44rem 24rem at 95% 30%,rgba(139,92,246,.05),transparent 60%),radial-gradient(40rem 22rem at 50% 100%,rgba(47,128,255,.05),transparent 60%)}
body{background:radial-gradient(120rem 60rem at 50% -10%,#0A1220 0%,#05070A 55%) fixed,#05070A}

/* ---- Film grain (canvas injected, .grain-overlay) ---- */
.grain-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03}

/* ---- Package cards: mouse-follow glow (JS sets --mx/--my) ---- */
.plan{position:relative;overflow:hidden;--mx:50%;--my:50%}
.plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(14rem 14rem at var(--mx,50%) var(--my,50%),rgba(47,128,255,.14),transparent 70%)}
.plan:hover::after{opacity:1}

/* ---- Pro card: rotating conic light border ---- */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan.featured{position:relative}
.plan.featured::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--angle),transparent 0%,#00D1B2 12%,#2F80FF 25%,transparent 40%,transparent 60%,#8B5CF6 75%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin-border 6s linear infinite}
@keyframes spin-border{to{--angle:360deg}}

/* ---- Buttons: glow on hover, magnetic (JS) ---- */
.btn.blue,.btn.green,.btn.demo-al,.btn.outline-blue{
  transition:transform .3s ease,box-shadow .3s ease,background .2s
}
.btn.blue:hover,.btn.green:hover,.btn.demo-al:hover{
  box-shadow:0 0 20px rgba(47,128,255,.3)
}
.btn.blue{border-radius:12px}
.btn{border-radius:12px}
.btn.blue.is-magnetic{transition:transform .3s ease}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---- Mobile perf ---- */
@media(max-width:768px){
  .grain-overlay{display:none}
  .aurora i{filter:blur(48px);opacity:.45}
  .aurora i:nth-child(4){display:none}
  .hero h1{font-size:2.125rem}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .aurora i{animation:none}
  .plan.featured::before{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn.blue,.btn.green,.btn.demo-al,.btn.outline-blue{transition:none}
  html{scroll-behavior:auto}
}