/* Goodluck Labs – Anchorage-inspired multi-page site styles (HTML/CSS/JS only) */

/* THEME TOKENS (dark default) */
:root { 
  --bg: #0b0f14;
  --bg-elev: #0e141b;
  --surface: rgba(11,15,20,0.6);
  --text: #e6e9ee;
  --muted: #a7b1c2;
  --brand: #5b8cff;
  --brand-2: #7a5cff;
  --accent: #24e1c6;
  --card: #0d131a;
  --border: rgba(255,255,255,0.08);
  --shadow: rgba(0,0,0,0.45);
  --radius: 14px;
  --grid-line: rgba(255,255,255,.04);
}

:root[data-theme="light"]{
  --bg: #f6f8fb;
  --bg-elev: #ffffff;
  --surface: rgba(255,255,255,0.75);
  --text: #0b0f14;
  --muted: #576176;
  --brand: #3a6bff;
  --brand-2: #7257ff;
  --accent: #06c3a9;
  --card: #ffffff;
  --border: rgba(0,0,0,0.08);
  --shadow: rgba(0,0,0,0.12);
  --grid-line: rgba(0,0,0,.06);
}

/* Material Symbols */
.material-symbols-rounded{
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{display:inline-block}

/* Layout util */
.container{ width:min(1160px, 92%); margin-inline:auto; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--surface);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header.scrolled{ box-shadow:0 8px 24px -16px var(--shadow) }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; }
.logo-img{ height: 60px; width:auto; display:block; }
.footer .logo-img{ height:22px }
.logo-text{ letter-spacing:.2px }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{ color:var(--muted); position:relative; font-weight:600 }
.nav-links a:hover{ color:var(--text) }
.nav-links a.active{ color:var(--text) }
.nav-links a.active::after{
  content:""; position:absolute; left:0; bottom:-8px; width:100%; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:12px }
.nav-toggle{
  width:44px;height:40px;border:1px solid var(--border);border-radius:10px;
  background:transparent;color:var(--text);display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);opacity:.9}
.mobile-menu{
  display:none; background:color-mix(in oklab, var(--bg) 92%, black 0%);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:14px;
}
.mobile-menu a,.mobile-menu button{display:block;padding:12px;border-radius:10px;color:var(--text)}
.mobile-menu a:hover,.mobile-menu button:hover{background:rgba(255,255,255,.06)}
.mobile-menu[hidden]{display:none}

/* Background layers */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.orb{position:absolute;width:60vmax;height:60vmax;filter:blur(60px);opacity:.33;border-radius:50%}
.orb-a{left:-20vmax;top:-10vmax;background:radial-gradient(closest-side, color-mix(in oklab, var(--brand) 60%, white 0%) , transparent 70%)}
.orb-b{right:-25vmax;top:-5vmax;background:radial-gradient(closest-side, color-mix(in oklab, var(--accent) 55%, white 0%), transparent 70%)}
.orb-c{right:-10vmax;bottom:-20vmax;background:radial-gradient(closest-side, color-mix(in oklab, var(--brand-2) 60%, white 0%), transparent 70%)}
.grid{
  position:absolute;inset:-1px;background:
  linear-gradient(var(--bg),transparent 20% 80%,var(--bg)),
  repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 120px),
  repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 120px);
  opacity:.6;pointer-events:none
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:12px;padding:12px 16px;border:1px solid var(--border);transition:transform .2s ease, background .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#0b0f14;border-color:transparent}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;color:var(--text)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text)}
.theme-toggle{width:44px;height:40px;display:grid;place-items:center;padding:0}

/* Hero */
.hero{ display:grid; place-items:center; min-height:88vh; position:relative }
.hero.home-hero{ min-height:92vh }
.hero-inner{ padding:8vh 0 10vh }
.kicker{ letter-spacing:.25em; color:var(--muted); font-weight:700; margin:0 0 12px 2px }
.display{
  margin:0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight:700;
  line-height:.9;
  font-size: clamp(56px, 10vw, 128px);
  letter-spacing:-.02em;
  background:linear-gradient(180deg, #fff, #cfd6e4 60%, #a7b1c2);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-theme="light"] .display{
  background:linear-gradient(180deg, #0b0f14, #273245 60%, #4c5a74);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{ max-width:760px; color:var(--muted); font-size:1.125rem; margin:18px 0 24px }
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero-note{ color:var(--muted); font-size:.95rem; margin-top:18px }

/* Hero media strip */
.hero-media{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:26px; }
.media-card{ position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--border); background:var(--card); }
.media-card img{ width:100%; height:180px; object-fit:cover; transform:scale(1.05); transition:transform .6s ease, filter .6s ease }
.media-card:hover img{ transform:scale(1.12); filter:saturate(1.1) }
.media-cap{ position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.45); color:#fff; font-weight:700; padding:6px 10px; border-radius:999px; font-size:.85rem; border:1px solid rgba(255,255,255,.15) }
:root[data-theme="light"] .media-cap{ background:rgba(0,0,0,.6) }

/* Trust marquee */
.trust{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); margin:20px 0 }
.trust-inner{ display:flex; align-items:center; gap:18px; padding:18px 0; }
.marquee{ overflow:hidden; flex:1 }
.track{ display:inline-flex; gap:18px; white-space:nowrap; animation:scroll 20s linear infinite }
.logo-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03); font-weight:700; color:var(--muted) }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* Sections */
.section{ padding:84px 0 }
.section.alt{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent) }
.section-head{ margin-bottom:28px }
.h2{ font-size: clamp(28px, 4.6vw, 42px); margin:0 0 8px; letter-spacing:-.01em }
.h3{ font-size: clamp(20px, 3.6vw, 26px); margin:0 0 8px }
.muted{ color:var(--muted) }

/* Cards */
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 10px 30px -20px var(--shadow);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{ transform: translateY(-4px); border-color: color-mix(in oklab, var(--text) 18%, transparent) }
.card .icon{ font-size:28px; margin-bottom:8px }
.ticks{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px }
.ticks li{ position:relative; padding-left:22px; color:var(--muted) }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900 }
.ticks-inline{ display:flex; gap:18px; flex-wrap:wrap }

/* Feature grid */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.feature{ border:1px solid var(--border); background:var(--card); border-radius:14px; padding:18px; overflow:hidden }
.feature img{ width:100%; height:220px; object-fit:cover; border-radius:12px; margin-top:10px; filter:saturate(1.05) }
.f-head{ display:flex; align-items:center; gap:10px; }
.f-icon{ font-size:22px }

/* Cases */
.cases{ display:grid; gap:18px }
.case{ display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; align-items:stretch }
.case-media{ border-radius:14px; overflow:hidden; border:1px solid var(--border) }
.case-media img{ width:100%; height:100%; max-height:320px; object-fit:cover }
.case-body{ border:1px solid var(--border); border-radius:14px; padding:18px; background:var(--card) }

/* About */
.about-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:start }
.about-aside{ display:grid; gap:14px }
.stat{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:16px 18px }
.stat-num{ font-weight:800; font-size:26px }
.stat-label{ display:block; color:var(--muted) }

/* Image grid (gallery/collage) */
.image-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px }
.shot{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card) }
.shot img{ width:100%; height:200px; object-fit:cover }
.shot figcaption{ padding:10px 12px; color:var(--muted); font-weight:600 }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{ padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.02); color:var(--text); font-weight:600; font-size:.92rem }

/* Panel */
.panel{ margin-top:22px; border:1px solid var(--border); border-radius:14px; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) }

/* CTA section */
.cta .cta-inner{
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  background:
    radial-gradient(1200px 400px at 10% -20%, color-mix(in oklab, var(--brand) 25%, transparent), transparent 60%),
    radial-gradient(1200px 400px at 90% 120%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 60%),
    rgba(255,255,255,.02);
}
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }

/* Footer */
.footer{ border-top:1px solid var(--border); padding:26px 0; background:rgba(0,0,0,.1) }
:root[data-theme="light"] .footer{ background:rgba(0,0,0,.04) }
.foot{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; }
.foot-links{ display:flex; gap:18px }
.copyright{ color:var(--muted); margin:0 }
.socials{ display:flex; gap:10px; align-items:center }
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--border); border-radius:50%; background:rgba(255,255,255,.03) }
.socials a:hover{ background:rgba(255,255,255,.06) }

/* Slider */
.slider{ position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--card) }
.slides{ display:flex; transition:transform .5s ease; }
.slide{ min-width:100%; padding:26px 56px; display:grid; gap:8px } /* extra inline padding to avoid overlap with arrows */
.slide blockquote{ font-size:clamp(18px, 2.2vw, 22px); margin:0; line-height:1.5 }
.slide figcaption{ color:var(--muted) }
.slide-nav{ position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--border); 
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); 
  color:var(--text); border-radius:999px; width:36px; height:36px; display:grid; place-items:center; z-index:2;
  box-shadow: 0 8px 16px -10px var(--shadow);
}
.slide-nav.prev{ left:8px } .slide-nav.next{ right:8px }

/* Forms (Contact) */
.form{ display:grid; gap:14px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev); color:var(--text);
}
textarea{ min-height:140px; resize:vertical }
.help{ color:var(--muted); font-size:.9rem }

/* Contact page layout */
.contact-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:18px }
.info-card{ border:1px solid var(--border); border-radius:16px; background:var(--card); padding:18px }
.info-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.info-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border) }
.info-list li:last-child{ border-bottom:0 }
.map{ height:260px; border-radius:12px; overflow:hidden; border:1px solid var(--border) }

/* Accordion (FAQ) */
.faq{ display:grid; gap:10px }
.acc{ border:1px solid var(--border); border-radius:12px; background:var(--card); overflow:hidden }
.acc + .acc{ margin-top:0 }
.acc summary{ cursor:pointer; padding:14px 16px; list-style:none; font-weight:700; display:flex; align-items:center }
.acc summary::-webkit-details-marker{ display:none }
.acc summary::after{
  content:"expand_more"; margin-left:auto; font-family:'Material Symbols Rounded'; font-size:22px;
  display:inline-block; transition:transform .2s ease;
}
.acc[open] summary::after{ content:"expand_less" }
.acc[open] summary{ border-bottom:1px solid var(--border) }
.acc .acc-body{ padding:14px 16px; color:var(--muted) }

/* Page hero for subpages */
.page-hero{ min-height:46vh; display:grid; place-items:center; }
.page-hero .display{ font-size: clamp(40px, 8vw, 92px) }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px) scale(.98); will-change:transform,opacity }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease }

/* Responsive */
@media (max-width: 1060px){
  .feature-grid{ grid-template-columns: 1fr 1fr }
  .cards{ grid-template-columns: 1fr 1fr }
  .case{ grid-template-columns: 1fr; }
  .hero-media{ grid-template-columns: 1fr 1fr; }
  .image-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 960px){
  .nav-links{ display:none }
  .nav-toggle{ display:inline-flex }
  .mobile-menu{ display:block }
  .cards{ grid-template-columns: 1fr }
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .hero-inner{ padding:10vh 0 12vh }
  .section{ padding:64px 0 }
  .row{ grid-template-columns:1fr }
  .image-grid{ grid-template-columns: 1fr }
  .shot img{ height:180px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .card, .reveal.in, .slides{ transition:none }
}
/* Footer layout/responsive overrides */
.footer .foot{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px }
.footer .foot .copyright{ grid-column:1 / -1; justify-self:center; text-align:center; margin-top:10px }

@media (max-width: 720px){
  .footer{ padding:22px 0 }
  .footer .foot{ grid-template-columns:1fr; justify-items:center; gap:12px }
  .footer .logo{ justify-self:center }
  .footer .foot-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
  .footer .socials{ justify-content:center }
  .footer .copyright{ margin-top:6px }
}
/* --- Mobile polish overrides (requested) --- */

/* Use logo image only; hide adjacent text, and size logo to 60px globally */
.logo-text{ display:none !important }
.logo-img{ height:60px !important; width:auto; display:block }

/* Hide primary CTA button in header on mobile */
@media (max-width: 960px){
  .nav-cta .btn.btn-primary{ display:none !important }
}

/* Prevent hero headline overflow on small screens */
@media (max-width: 960px){
  .hero .display{ font-size: clamp(32px, 9.5vw, 56px) }
}
@media (max-width: 640px){
  .hero .display{ font-size: clamp(28px, 9vw, 48px) }
}

/* Hero media: single column on phones */
@media (max-width: 960px){
  .hero-media{ grid-template-columns: 1fr !important }
  .media-card img{ height:200px }
}

/* Feature grid and service cards: single column on phones */
@media (max-width: 960px){
  .feature-grid{ grid-template-columns: 1fr !important }
  .cards{ grid-template-columns: 1fr !important }
}

/* Trust marquee: place label on top so marquee gets full width/height on small screens */
@media (max-width: 960px){
  .trust-inner{ flex-direction: column; align-items:flex-start; gap:8px }
  .trust .muted{ font-size:.9rem }
  .logo-pill{ padding:6px 10px; font-size:.85rem }
}

/* Testimonials: adjust padding so text doesn't collide with arrows on small screens */
@media (max-width: 960px){
  .slider .slide{ padding:20px 40px }
}
@media (max-width: 640px){
  .slider .slide{ padding:18px 32px }
}
/* --- Mobile polish v2 (overflow, slider centering, marquee room) --- */
.display{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto }
.trust .marquee{ width:100%; min-height:40px }

.slider .slide{ text-align:center }
.slider .slide blockquote{ max-width:680px; margin:0 auto }
.slider .slide figcaption{ text-align:center }
/* Social icon size */
.social-icon{ width:18px; height:18px; display:block }
/* Light theme: make white SVG icons dark for contrast */
:root[data-theme="light"] .social-icon{ filter: invert(1) }
/* Theme-aware logo swap and footer alignment */
.logo-img{ height:60px !important; width:auto; display:block }
.logo-img.logo-dark{ display:block }          /* default dark theme */
.logo-img.logo-light{ display:none }
:root[data-theme="light"] .logo-img.logo-dark{ display:none }
:root[data-theme="light"] .logo-img.logo-light{ display:block }

/* Footer socials to right on desktop, centered on mobile */
.footer .socials{ justify-self:end }
@media (max-width: 720px){
  .footer .socials{ justify-self:center }
}
/* Overlap media section into hero so the 3 cards peek above the fold */
.section.media-overlap{
  padding-top:0;
  margin-top: clamp(-120px, -12svh, -80px); /* ~half of card height, responsive */
}
.section.media-overlap .hero-media{ position:relative; z-index:1 }

@media (max-width: 640px){
  .section.media-overlap{
    margin-top: clamp(-100px, -10svh, -64px);
  }
}