/* ============================================================
   Alien Tech Pro — shared base styles
   Light theme · Outfit typeface. Page-specific styles in
   assets/css/<page>.css
   ============================================================ */

/* Smooth cross-fade between pages in supporting browsers (Chrome/Edge 126+).
   Pure progressive enhancement — unsupported browsers just navigate normally. */
@view-transition{
  navigation:auto;
}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none;}
}

:root{
  --navy-950:#05061c;
  --navy-900:#0a0e35;
  --navy-800:#12184a;
  --navy-700:#1b2260;
  --black:#0a0a0a;
  --orange-500:#f5871f;
  --orange-400:#ffa947;
  --orange-300:#ffcf94;
  --orange-200:#ffd9ac;
  --accent-green:#22b573;
  --accent-blue:#2f6bd8;
  --ink-white:#ffffff;
  --ink-soft:#c7cae8;
  --ink-faint:#8d92c2;
  --line:rgba(255,255,255,0.10);
  --radius-lg:22px;
  --radius-md:14px;

  --paper:#f6f7fb;
  --paper-line:#e6e8f4;
  --ink-dark:#0b0e2e;
  --ink-dark-soft:#5a5f8a;
  --mint:#e7f7ef;
  --mint-line:#c9ecdb;
  --lavender:#eaf0fb;
  --lavender-line:#d4e0f6;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink-dark);
  font-family:'Outfit',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,.font-display{font-family:'Outfit',sans-serif;letter-spacing:-0.015em;font-weight:700;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* ===== Scroll reveal ===== */
html.no-js .reveal,
html.no-js .reveal-stagger > *{opacity:1 !important;transform:none !important;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *{opacity:1;transform:translateY(0) scale(1);}
.reveal-stagger > *{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);}
.reveal-stagger > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger > *:nth-child(2){transition-delay:.14s;}
.reveal-stagger > *:nth-child(3){transition-delay:.23s;}
.reveal-stagger > *:nth-child(4){transition-delay:.32s;}
.reveal-stagger > *:nth-child(5){transition-delay:.41s;}

/* ===== Keyframes ===== */
/* These three use the independent `translate`/`scale` properties rather than
   `transform`, on purpose — it keeps `transform` free for hover lifts and the
   per-card tilt effect below to compose with the float instead of fighting it. */
@keyframes float-sm{0%,100%{translate:0 0;}50%{translate:0 -10px;}}
@keyframes float-med{0%,100%{translate:0 0;}50%{translate:8px -18px;}}
@keyframes float-slow{0%,100%{translate:0 0;scale:1;}50%{translate:18px -24px;scale:1.06;}}
@keyframes float-tiny{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-4px) rotate(1.5deg);}}
@keyframes word-up{to{transform:translateY(0);}}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes eyebrow-in{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
@keyframes hero-in{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse-scroll{0%,100%{opacity:.3}50%{opacity:1}}

.abstract-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;animation:float-slow 14s ease-in-out infinite;}
.abstract-blob:nth-of-type(odd){animation-duration:17s;animation-direction:reverse;}
.orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(11,14,46,0.08);pointer-events:none;animation:float-med 12s ease-in-out infinite;}
.orbit-ring.on-dark{border-color:rgba(255,255,255,0.08);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
  white-space:nowrap;position:relative;
}
.btn svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(135deg,var(--orange-400),var(--orange-500));
  color:#1a0e00;box-shadow:0 10px 30px -10px rgba(245,135,31,.5);overflow:hidden;
}
.btn-primary::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .6s ease;
}
.btn-primary:hover::before{left:130%;}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px -8px rgba(245,135,31,.7);}
.btn-primary:active{transform:translateY(-1px) scale(.99);}
.btn-outline{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.28);color:var(--ink-white);}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.5);transform:translateY(-3px);}
.btn-outline-dark{background:transparent;border-color:rgba(11,14,46,0.22);color:var(--ink-dark);}
.btn-outline-dark:hover{background:rgba(11,14,46,0.05);border-color:rgba(11,14,46,0.4);transform:translateY(-3px);}
.btn-dark{background:var(--navy-950);color:#fff;box-shadow:0 10px 24px -12px rgba(5,6,28,.5);}
.btn-dark:hover{transform:translateY(-3px);background:#0d1140;}
.btn-sm{padding:11px 19px;font-size:14px;}
.btn-block{width:100%;}

/* Magnetic button glow */
.btn-magnetic{position:relative;}
.btn-magnetic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.btn-magnetic:hover::after{opacity:1;}

/* ===== Section eyebrow (— Label —) ===== */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange-500);margin-bottom:18px;
}
.section-eyebrow::before,
.section-eyebrow.center::after{
  content:"";width:34px;height:2px;border-radius:2px;background:var(--accent-green);
  animation:eyebrow-pulse 2.6s ease-in-out infinite;
}
@keyframes eyebrow-pulse{0%,100%{opacity:1;width:34px;}50%{opacity:.45;width:20px;}}
.section-eyebrow:not(.center)::after{content:none;}
.eyebrow-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--orange-500);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--orange-400),var(--orange-500));
  border-bottom:1px solid rgba(26,14,0,0.14);
  box-shadow:0 4px 20px -8px rgba(245,135,31,.45);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;max-width:1300px;margin:0 auto;}
.logo{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:21px;letter-spacing:-0.01em;
  color:#1a0e00;white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links > a{font-size:15px;font-weight:600;color:rgba(26,14,0,0.72);transition:color .15s ease;position:relative;padding-bottom:4px;}
.nav-links > a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#1a0e00;transition:width .25s ease;}
.nav-links > a:hover{color:#1a0e00;}
.nav-links > a:hover::after{width:100%;}
.nav-links > a.active{color:#1a0e00;font-weight:700;}
.nav-links > a.active::after{width:100%;}
.nav-links .nav-links-cta{display:none;}
.burger{display:none;background:none;border:none;color:#1a0e00;font-size:26px;cursor:pointer;line-height:1;}

/* ===== Section shells ===== */
section{padding:104px 0;position:relative;}
.section-tight{padding:80px 0;}
.bg-paper{background:var(--paper);}
.bg-white{background:#fff;}
.bg-mint{background:var(--mint);border-top:1px solid var(--mint-line);border-bottom:1px solid var(--mint-line);}
.bg-lavender{background:var(--lavender);border-top:1px solid var(--lavender-line);border-bottom:1px solid var(--lavender-line);}

.section-wedge{position:absolute;top:-1px;left:0;width:100%;height:64px;z-index:2;pointer-events:none;}
.wedge-a{clip-path:polygon(0 0,100% 0,100% 100%,0 46%);}
.wedge-b{clip-path:polygon(0 0,100% 0,100% 46%,0 100%);}

/* ===== Icon badge (legacy kicker, still used by a few blocks) ===== */
.icon-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--acc, var(--orange-500)) 10%, white);
  border:1px solid color-mix(in srgb, var(--acc, var(--orange-500)) 24%, white);
  margin-bottom:18px;
}
.icon-badge .icon-dot{
  width:30px;height:30px;border-radius:50%;background:var(--acc, var(--orange-500));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--acc, var(--orange-500)) 70%, transparent);
}
.icon-badge span{font-size:13px;font-weight:700;color:var(--ink-dark);letter-spacing:.01em;}

/* ===== Unified "dog + ad mockups" CTA (home / about / services) ===== */
.cta-final{background:var(--paper);position:relative;overflow:hidden;}
.cta-final .wrap{position:relative;z-index:1;}
.cta-final-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.cta-final h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;line-height:1.22;color:var(--ink-dark);margin-bottom:26px;max-width:520px;}
.cta-final .cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.cta-visual{position:relative;}
.cta-dog{
  display:block;margin-left:auto;width:74%;max-width:420px;aspect-ratio:560/620;
  object-fit:cover;border-radius:18px;
  filter:drop-shadow(0 30px 50px rgba(11,14,46,.28));
}
.fb-mock{
  position:absolute;width:210px;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid var(--paper-line);
  box-shadow:0 26px 54px -20px rgba(11,14,46,.35);
  animation:float-med 8s ease-in-out infinite;
}
.fb-mock.m1{top:6%;left:0;animation-delay:0s;}
.fb-mock.m2{bottom:2%;left:16%;animation-delay:1.2s;z-index:2;}
.fb-mock .fb-head{display:flex;align-items:center;gap:8px;padding:9px 11px;}
.fb-mock .fb-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--orange-400),var(--accent-blue));flex-shrink:0;}
.fb-mock .fb-meta{font-size:10.5px;line-height:1.25;color:var(--ink-dark);}
.fb-mock .fb-meta b{display:block;font-weight:700;font-size:11.5px;}
.fb-mock .fb-meta span{color:var(--ink-dark-soft);}
.fb-mock .fb-copy{font-size:10.5px;color:var(--ink-dark-soft);padding:0 11px 8px;}
.fb-mock .fb-img{width:100%;height:104px;object-fit:cover;display:block;background:#eef0fa;}
.fb-mock .fb-cta{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:#f0f2f7;}
.fb-mock .fb-cta small{font-size:10px;color:var(--ink-dark-soft);}
.fb-mock .fb-cta .fb-btn{font-size:10px;font-weight:700;color:#fff;background:var(--accent-blue);border-radius:6px;padding:4px 9px;}
.fb-mock .fb-react{display:flex;gap:10px;padding:8px 11px;border-top:1px solid var(--paper-line);}
.fb-mock .fb-react i{width:32px;height:6px;border-radius:3px;background:var(--paper-line);}

/* ===== Footer ===== */
footer{background:var(--navy-950);color:#fff;border-top:1px solid var(--line);padding:74px 0 0;overflow:hidden;position:relative;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding:0 32px 54px;max-width:1240px;margin:0 auto;position:relative;z-index:1;}
.footer-brand .logo{display:inline-block;margin-bottom:16px;}
.footer-brand p{color:var(--ink-faint);font-size:14px;line-height:1.8;max-width:300px;margin-bottom:20px;}
.footer-col h4{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;margin-bottom:18px;}
.footer-col p, .footer-col li{color:var(--ink-faint);font-size:13.5px;line-height:1.85;margin-bottom:10px;}
.footer-col a:hover{color:#fff;}
.subscribe-row{display:flex;gap:0;margin-top:10px;border-bottom:1px solid rgba(255,255,255,0.22);}
.subscribe-row input{flex:1;background:transparent;border:none;padding:10px 2px;color:#fff;font-size:13.5px;font-family:'Outfit',sans-serif;}
.subscribe-row input::placeholder{color:var(--ink-faint);}
.subscribe-row input:focus{outline:none;}
.subscribe-row button{
  background:none;border:none;padding:10px 2px 10px 14px;font-weight:700;font-size:12px;letter-spacing:.08em;
  color:var(--orange-400);cursor:pointer;font-family:'Outfit',sans-serif;text-transform:uppercase;
  border-bottom:2px solid var(--orange-500);margin-bottom:-1px;transition:color .2s ease;
}
.subscribe-row button:hover{color:#fff;}
.socials{display:flex;gap:12px;}
.socials a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:all .25s cubic-bezier(.34,1.56,.64,1);}
.socials a:hover{background:var(--orange-500);color:#1a0e00;border-color:var(--orange-500);transform:translateY(-4px) rotate(-6deg);}
.footer-legal{background:var(--accent-blue);text-align:center;padding:16px 20px;position:relative;z-index:1;}
.footer-legal p{color:#fff;font-size:13px;font-weight:500;letter-spacing:.01em;}

/* ===== Scroll progress + cursor glow ===== */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;z-index:100;width:0%;
  background:linear-gradient(90deg,var(--orange-400),var(--orange-500),#7b5cff);
}
.cursor-glow{
  position:fixed;top:0;left:0;width:360px;height:360px;border-radius:50%;
  pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(245,135,31,0.10), transparent 70%);
  opacity:0;transition:opacity .4s ease;
}
@media (hover:hover) and (pointer:fine){.cursor-glow.on{opacity:1;}}

/* ===== Spotlight hover cards ===== */
.spotlight{position:relative;overflow:hidden;}
.spotlight::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%), rgba(245,135,31,0.12), transparent 70%);
  opacity:0;transition:opacity .35s ease;
}
.spotlight:hover::before{opacity:1;}
.spotlight > *{position:relative;z-index:1;}
/* Decorative children manage their own absolute positioning — don't let the
   rule above pull them into normal flow (it previously did, inflating any
   .spotlight container that had an .abstract-blob/.orbit-ring direct child). */
.spotlight > .abstract-blob,
.spotlight > .orbit-ring{position:absolute;z-index:0;}

/* ===== Tilt-on-hover (desktop pointer only — progressive enhancement) =====
   Cards track the cursor and tilt in 3D via the --tx/--ty custom properties
   main.js sets on mousemove. Safe to combine with the float-sm/med/slow
   animations above since those now animate `translate`/`scale`, not
   `transform` — this is the only rule claiming `transform` on these cards. */
@media (hover:hover) and (pointer:fine){
  .tilt-hover{
    transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
    transition:transform .4s cubic-bezier(.16,.84,.44,1);
  }
}

/* ===== Shared responsive ===== */
@media (max-width:1040px){
  .nav{padding:18px 28px;}
  .nav-links{gap:22px;}
  .nav-links > a{font-size:14px;}
}
@media (max-width:960px){
  .cta-final-grid{grid-template-columns:1fr;gap:36px;}
  .cta-visual{margin-top:8px;}
  .cta-dog{margin-left:auto;margin-right:auto;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .burger{display:block;}
  .wrap{padding:0 20px;}
  section{padding:64px 0;}
  .footer-grid{grid-template-columns:1fr;gap:34px;}

  /* Mobile nav panel */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(165deg,var(--orange-400),var(--orange-500));
    border-bottom:1px solid rgba(26,14,0,0.14);
    padding:8px 24px 22px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  header.nav-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links > a{font-size:16px;padding:15px 4px;border-bottom:1px solid rgba(26,14,0,0.12);}
  .nav-links > a::after{display:none;}
  .nav-links .nav-links-cta{display:inline-flex;margin-top:16px;border-bottom:none;background:var(--navy-950);color:#fff;box-shadow:0 10px 24px -12px rgba(5,6,28,.5);}
  .nav-links .nav-links-cta:hover{background:#0d1140;}
}
@media (max-width:520px){
  .fb-mock{width:170px;}
  .cta-dog{width:66%;}
}