/* ============================================================================
   GIGPEACH — Marketing Design System
   One shared stylesheet for every marketing page (home, mission, landing pages).
   Apple-grade: San Francisco / Inter typography, generous whitespace, light &
   airy, restrained palette, peach accent used sparingly, purposeful motion.

   USAGE: <link rel="stylesheet" href="/assets/css/gigpeach.css">
          then use the classes below. Change a token here → whole site updates.
   ============================================================================ */

/* ---- Apple-style font stack ----
   Real San Francisco on Apple devices (already installed there), Inter as the
   near-identical web fallback everywhere else. This is how you get the genuine
   Apple feel without licensing SF Pro. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* palette — light & airy, near-monochrome with ONE warm accent */
  --bg:            #fbfbfd;   /* off-white canvas (Apple's exact tone) */
  --bg-2:          #f5f5f7;   /* light gray section block */
  --bg-dark:       #000000;   /* dramatic dark sections */
  --surface:       #ffffff;
  --text:          #1d1d1f;   /* near-black, not pure black */
  --text-soft:     #6e6e73;
  --text-mute:     #86868b;
  --text-on-dark:  #f5f5f7;
  --text-on-dark-soft:#a1a1a6;
  --line:          #d2d2d7;
  --line-soft:     #e8e8ed;

  /* peach accent — used sparingly, the way Apple uses blue */
  --accent:        #ff7a45;
  --accent-2:      #ff5d73;
  --accent-deep:   #e8531f;
  --grad-peach:    linear-gradient(120deg,#ff8a4d,#ff5d73 60%,#d24bc8);

  /* type scale (Apple-ish) */
  --fs-hero:    clamp(40px, 7vw, 80px);
  --fs-h1:      clamp(34px, 5.5vw, 56px);
  --fs-h2:      clamp(28px, 4vw, 44px);
  --fs-h3:      clamp(21px, 2.4vw, 26px);
  --fs-lead:    clamp(19px, 2.2vw, 26px);
  --fs-body:    17px;
  --fs-small:   14px;

  --maxw: 1024px;        /* Apple keeps marketing copy in a fairly tight column */
  --maxw-wide: 1200px;
  --r: 18px;
  --ease: cubic-bezier(.28,.11,.32,1);   /* Apple-like easing */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
              "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.5;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.gp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.gp-wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 22px}

/* ---------- TYPOGRAPHY ---------- */
.gp-hero-title{font-size:var(--fs-hero);font-weight:700;line-height:1.05;letter-spacing:-.025em}
h1,.gp-h1{font-size:var(--fs-h1);font-weight:700;line-height:1.08;letter-spacing:-.02em}
h2,.gp-h2{font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.018em}
h3,.gp-h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.gp-lead{font-size:var(--fs-lead);font-weight:400;line-height:1.38;color:var(--text-soft);letter-spacing:-.005em}
.gp-eyebrow{font-size:var(--fs-small);font-weight:600;letter-spacing:.01em;color:var(--accent-deep)}
.gp-accent-text{background:var(--grad-peach);-webkit-background-clip:text;background-clip:text;color:transparent}
.gp-muted{color:var(--text-soft)}

/* ---------- BUTTONS (Apple pill style) ---------- */
.gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:17px;font-weight:500;line-height:1;padding:13px 24px;border-radius:980px;
  transition:transform .25s var(--ease),background .25s var(--ease),opacity .25s,box-shadow .3s var(--ease);cursor:pointer}
.gp-btn-primary{background:var(--text);color:#fff}
.gp-btn-primary:hover{background:#000;transform:scale(1.02)}
.gp-btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 22px rgba(255,93,55,.28)}
.gp-btn-accent:hover{background:var(--accent-deep);transform:scale(1.02);box-shadow:0 10px 30px rgba(255,93,55,.36)}
.gp-btn-ghost{background:transparent;color:var(--accent-deep)}
.gp-btn-ghost:hover{opacity:.7}
.gp-btn-lg{font-size:19px;padding:16px 30px}
.gp-link-arrow{color:var(--accent-deep);font-weight:500;display:inline-flex;align-items:center;gap:5px;transition:gap .25s var(--ease)}
.gp-link-arrow:hover{gap:9px}

/* ---------- NAV (Apple's translucent bar) ---------- */
.gp-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:52px;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s}
.gp-nav.scrolled{border-bottom:1px solid var(--line-soft)}
.gp-brand{font-size:19px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.gp-brand .gp-dot{width:9px;height:9px;border-radius:50%;background:var(--grad-peach)}
.gp-nav-links{display:flex;gap:28px;font-size:14px;color:var(--text-soft)}
.gp-nav-links a{transition:color .2s}.gp-nav-links a:hover{color:var(--text)}
.gp-nav-cta{font-size:14px;font-weight:500;color:#fff;background:var(--accent);padding:7px 16px;border-radius:980px;transition:background .25s,transform .25s}
.gp-nav-cta:hover{background:var(--accent-deep);transform:scale(1.03)}
@media(max-width:760px){.gp-nav-links{display:none}}

/* ---------- SECTIONS ---------- */
.gp-section{padding:120px 0}
.gp-section-tight{padding:88px 0}
.gp-section-dark{background:var(--bg-dark);color:var(--text-on-dark)}
.gp-section-dark .gp-lead,.gp-section-dark .gp-muted{color:var(--text-on-dark-soft)}
.gp-section-gray{background:var(--bg-2)}
.gp-center{text-align:center}
.gp-section-head{max-width:62ch;margin:0 auto 64px}
.gp-section-head.gp-left{margin-left:0}

/* ---------- HERO (Apple marketing hero: big centered headline, light) ---------- */
.gp-hero{padding:140px 22px 90px;text-align:center}
.gp-hero .gp-lead{max-width:30ch;margin:18px auto 30px}
.gp-hero-cta{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap}
/* full-bleed image hero variant (for product-style pages) */
.gp-hero-media{position:relative;min-height:88vh;display:flex;align-items:flex-end;justify-content:center;
  text-align:center;overflow:hidden;color:var(--text-on-dark)}
.gp-hero-media .gp-hero-bg{position:absolute;inset:0;z-index:0;--img:none;background-image:var(--img);
  background-size:cover;background-position:center;background-color:#111}
.gp-hero-media .gp-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.gp-hero-media .gp-hero-inner{position:relative;z-index:1;padding:0 22px 90px;max-width:900px}

/* ---------- GRID CARDS ---------- */
.gp-grid{display:grid;gap:20px}
.gp-grid-3{grid-template-columns:repeat(3,1fr)}
.gp-grid-2{grid-template-columns:repeat(2,1fr)}
.gp-card{background:var(--surface);border-radius:var(--r);padding:38px 32px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.gp-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.gp-card .gp-num{font-size:15px;font-weight:600;color:var(--accent-deep);margin-bottom:14px}
.gp-card h3{margin-bottom:8px}
.gp-card p{color:var(--text-soft);font-size:16px}
@media(max-width:860px){.gp-grid-3{grid-template-columns:1fr}.gp-grid-2{grid-template-columns:1fr}}

/* ---------- FEATURE SPLIT ---------- */
.gp-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.gp-split.gp-flip .gp-split-media{order:-1}
.gp-split-media{--img:none;position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background-image:var(--img);background-size:cover;background-position:center;background-color:var(--bg-2)}
.gp-split-media .gp-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:var(--text-mute);font-size:14px;text-align:center;padding:20px}
.gp-split-media .gp-ph b{font-weight:600;color:var(--text-soft);font-size:16px}
.gp-feature-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px}
.gp-feature-list li{display:flex;gap:11px;align-items:flex-start;color:var(--text-soft);font-size:16px}
.gp-feature-list .gp-ic{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;margin-top:2px}
@media(max-width:860px){.gp-split,.gp-split.gp-flip{grid-template-columns:1fr;gap:30px}.gp-split.gp-flip .gp-split-media{order:0}}

/* ---------- GALLERY SLIDER ---------- */
.gp-slider{position:relative;border-radius:22px;overflow:hidden;background:var(--bg-2)}
.gp-slides{display:flex;transition:transform .7s var(--ease)}
.gp-slide{min-width:100%;position:relative;aspect-ratio:16/9}
.gp-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;background:linear-gradient(135deg,#e9e9ee,#f5f5f7)}
.gp-slide-bg.alt1{background:linear-gradient(135deg,#ffe6da,#f5f5f7)}
.gp-slide-bg.alt2{background:linear-gradient(135deg,#ffe0e6,#f5f5f7)}
.gp-slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.gp-slide-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-mute);font-size:14px;z-index:1}
.gp-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:38px;z-index:2;color:#fff}
.gp-slide-cap .tag{font-size:13px;font-weight:600;letter-spacing:.02em;color:#ffd9c2;margin-bottom:8px;display:block}
.gp-slide-cap h3{color:#fff;font-size:clamp(22px,3.4vw,34px)}
.gp-slide-cap p{color:rgba(255,255,255,.82);max-width:44ch;margin-top:6px;font-size:16px}
.gp-slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.85);color:#1d1d1f;font-size:20px;display:grid;place-items:center;
  cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform .2s;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.gp-slider-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.gp-slider-nav.prev{left:16px}.gp-slider-nav.next{right:16px}
.gp-dots{display:flex;gap:8px;justify-content:center;margin-top:22px}
.gp-dots button{width:8px;height:8px;border-radius:50%;border:none;background:#c7c7cc;cursor:pointer;transition:background .3s,width .3s}
.gp-dots button.active{background:var(--accent);width:24px;border-radius:5px}

/* ---------- PRICING ---------- */
.gp-price{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:40px}
.gp-price.feature{border-color:var(--accent);box-shadow:0 10px 40px rgba(255,122,69,.12)}
.gp-price .tag{font-size:14px;font-weight:600;color:var(--accent-deep);margin-bottom:12px}
.gp-price .big{font-size:46px;font-weight:700;letter-spacing:-.02em;margin:12px 0}
.gp-price .big span{font-size:17px;color:var(--text-soft);font-weight:400}
.gp-price p{color:var(--text-soft);font-size:16px}

/* ---------- FOOTER ---------- */
.gp-footer{background:var(--bg-2);border-top:1px solid var(--line-soft);padding:54px 0 36px;font-size:13px;color:var(--text-mute)}
.gp-foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:36px}
.gp-foot-links{display:flex;gap:44px;flex-wrap:wrap}
.gp-foot-col h4{color:var(--text);font-size:13px;margin-bottom:11px;font-weight:600}
.gp-foot-col a{display:block;color:var(--text-mute);margin-bottom:7px;transition:color .2s}
.gp-foot-col a:hover{color:var(--text)}

/* ---------- MOTION (subtle, Apple-purposeful — fade+rise on scroll) ---------- */
.gp-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gp-reveal.in{opacity:1;transform:none}
.gp-d1{transition-delay:.08s}.gp-d2{transition-delay:.16s}.gp-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.gp-reveal{opacity:1;transform:none}}