/* ============================================================
   Riptide Creative LLC — coastal-tech / studio identity
   Deep navy · sand · sea-glass aqua accent
   Display: Cabinet Grotesk · Body: Satoshi
   ============================================================ */

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1.1rem; --radius-xl:1.5rem; --radius-full:9999px;
  --transition:200ms cubic-bezier(.16,1,.3,1);
  --content-wide:1160px;

  --font-display:'Cabinet Grotesk','Satoshi',system-ui,sans-serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;

  /* LIGHT — sand / off-white surfaces */
  --color-bg:#f4f0e8;
  --color-surface:#faf7f0;
  --color-surface-2:#ffffff;
  --color-border:#e0d8c8;
  --color-divider:#e8e1d3;

  --color-text:#122029;
  --color-text-muted:#54626b;
  --color-text-faint:#8b968d;
  --color-text-inverse:#f7f3ea;

  --color-navy:#0b1a24;
  --color-navy-2:#132a38;

  --color-accent:#1f8f88;        /* sea-glass aqua, darkened for AA on light */
  --color-accent-soft:#7fd4c8;
  --color-accent-highlight:#dcefea;

  --wave-1:rgba(31,143,136,.10);
  --wave-2:rgba(31,143,136,.16);
  --wave-3:rgba(11,26,36,.06);

  --shadow-sm:0 1px 2px rgba(11,26,36,.06);
  --shadow-md:0 8px 24px rgba(11,26,36,.09);
  --shadow-lg:0 24px 60px rgba(11,26,36,.14);

  --hero-text:#eaf5f1;
  --hero-muted:#a9c4bf;
}

[data-theme="dark"] {
  --color-bg:#0a161e;
  --color-surface:#0f1e28;
  --color-surface-2:#14242f;
  --color-border:#213541;
  --color-divider:#1a2c37;

  --color-text:#e6edef;
  --color-text-muted:#9db0b8;
  --color-text-faint:#63757e;
  --color-text-inverse:#0a161e;

  --color-navy:#050d13;
  --color-navy-2:#0d1c26;

  --color-accent:#7fd4c8;         /* brighter sea-glass on dark */
  --color-accent-soft:#4fb3a9;
  --color-accent-highlight:#12312e;

  --wave-1:rgba(127,212,200,.06);
  --wave-2:rgba(127,212,200,.10);
  --wave-3:rgba(233,224,207,.04);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);

  --hero-text:#eaf5f1;
  --hero-muted:#9db8b3;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem;
}
body{
  min-height:100dvh;line-height:1.6;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);
  transition:background var(--transition),color var(--transition);
}
img,svg{display:block;max-width:100%;height:auto;}
ul[role="list"]{list-style:none;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;line-height:1.08;letter-spacing:-.02em;}
p{text-wrap:pretty;max-width:66ch;}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit;}
a,button{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition);}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm);}
::selection{background:var(--color-accent-soft);color:var(--color-navy);}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem);}
.skip-link{position:absolute;left:-999px;top:0;background:var(--color-accent);color:var(--color-navy);padding:.6rem 1rem;border-radius:var(--radius-sm);z-index:200;}
.skip-link:focus{left:1rem;top:1rem;}

.eyebrow{
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.18em;
  font-weight:700;color:var(--color-accent);margin-bottom:var(--space-4);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);
  padding:.75rem 1.4rem;border-radius:var(--radius-full);white-space:nowrap;
}
.btn--primary{background:var(--color-accent);color:var(--color-navy);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(31,143,136,.35);}
[data-theme="dark"] .btn--primary:hover{box-shadow:0 10px 28px rgba(127,212,200,.25);}
.btn--ghost{border:1px solid var(--color-border);color:var(--color-text);}
.btn--ghost:hover{border-color:var(--color-accent);color:var(--color-accent);}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color var(--transition),background var(--transition);
}
.header--scrolled{border-bottom-color:var(--color-divider);}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:4.5rem;gap:var(--space-6);}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--color-text);}
.brand__mark{color:var(--color-text);flex:none;}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;}
.brand__sub{color:var(--color-accent);font-weight:700;margin-left:.12em;}
.nav{display:flex;gap:var(--space-6);}
.nav a{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;}
.nav a:hover{color:var(--color-text);}
.header__actions{display:flex;align-items:center;gap:var(--space-4);}
.theme-toggle{
  width:2.4rem;height:2.4rem;display:grid;place-items:center;flex:none;
  border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);
}
.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent);}
@media (max-width:820px){
  .nav{display:none;}
  .header__cta{display:none;}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--color-navy);color:var(--hero-text);isolation:isolate;}
.hero__bg{position:absolute;inset:0;z-index:-1;}
.hero__glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(900px,120%);height:600px;
  background:radial-gradient(ellipse at center, rgba(127,212,200,.18), transparent 62%);
}
.hero__waves{position:absolute;bottom:0;left:0;width:100%;height:min(42vh,320px);}
.hero__inner{padding-block:clamp(5rem,14vh,9rem) clamp(6rem,16vh,10rem);max-width:900px;}
.hero .eyebrow{color:var(--color-accent-soft);}
.hero__title{font-size:var(--text-3xl);font-weight:800;max-width:15ch;margin-bottom:var(--space-6);}
.hero__lead{font-size:var(--text-lg);color:var(--hero-muted);max-width:56ch;margin-bottom:var(--space-8);line-height:1.55;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);}
.hero .btn--ghost{border-color:rgba(255,255,255,.22);color:var(--hero-text);}
.hero .btn--ghost:hover{border-color:var(--color-accent-soft);color:var(--color-accent-soft);}

/* ---------- Sections ---------- */
.section{padding-block:clamp(var(--space-16),9vw,var(--space-32));}
.section--alt{background:var(--color-surface);border-block:1px solid var(--color-divider);}
.section__head{max-width:44ch;}
.section__head--center{margin-inline:auto;text-align:center;margin-bottom:var(--space-16);}
.section__title{font-size:var(--text-2xl);font-weight:700;}
.grid-2{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(var(--space-8),6vw,var(--space-20));align-items:start;}
@media (max-width:820px){.grid-2{grid-template-columns:1fr;gap:var(--space-10);}}

.prose p{color:var(--color-text-muted);margin-bottom:var(--space-5);}
.prose p:first-child{color:var(--color-text);}

.facts{margin-top:var(--space-8);border-top:1px solid var(--color-divider);}
.facts li{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm);}
.facts__k{color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.1em;font-size:var(--text-xs);font-weight:700;}
.facts__v{color:var(--color-text);font-weight:500;text-align:right;}
.facts__v a{color:var(--color-accent);}
.facts__v a:hover{text-decoration:underline;}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
@media (max-width:820px){.cards{grid-template-columns:1fr;}}
.card{
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm);
}
.section--alt .card{background:var(--color-bg);}
[data-theme="dark"] .section--alt .card{background:var(--color-surface-2);}
.card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.card__icon{width:3rem;height:3rem;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-accent-highlight);color:var(--color-accent);margin-bottom:var(--space-5);}
.card__icon svg{width:1.5rem;height:1.5rem;}
.card__title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-3);}
.card p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* ---------- Product (CastPilot) ---------- */
.product{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(var(--space-8),6vw,var(--space-20));align-items:center;}
@media (max-width:820px){.product{grid-template-columns:1fr;}}
.product__media{display:flex;justify-content:center;}
.device{
  position:relative;width:270px;aspect-ratio:9/17;background:var(--color-navy);
  border-radius:2rem;padding:.7rem;box-shadow:var(--shadow-lg);border:1px solid var(--color-navy-2);
}
.device__notch{position:absolute;top:.9rem;left:50%;transform:translateX(-50%);width:34%;height:.42rem;background:#000;border-radius:var(--radius-full);opacity:.6;}
.device__screen{height:100%;background:linear-gradient(180deg,var(--color-navy-2),var(--color-navy));border-radius:1.5rem;padding:1.6rem 1.2rem 1.2rem;color:var(--hero-text);display:flex;flex-direction:column;}
.device__eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--color-accent-soft);font-weight:700;margin-bottom:.4rem;}
.device__h{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:1.1rem;}
.device__sides{display:flex;flex-direction:column;gap:.55rem;flex:1;}
.line{height:.55rem;border-radius:var(--radius-full);background:rgba(255,255,255,.12);}
.line--full{width:100%;}.line--90{width:90%;}.line--80{width:80%;}.line--70{width:70%;}.line--60{width:60%;}
.line--mark{background:rgba(127,212,200,.5);position:relative;}
.device__chips{display:flex;gap:.4rem;margin-top:1rem;}
.chip{font-size:.62rem;font-weight:700;padding:.35rem .55rem;border-radius:var(--radius-full);background:rgba(255,255,255,.08);color:var(--hero-muted);}
.chip--on{background:var(--color-accent);color:var(--color-navy);}

.product__title{font-size:var(--text-2xl);font-weight:800;margin-bottom:var(--space-2);}
.product__tag{font-size:var(--text-lg);color:var(--color-text);font-weight:500;margin-bottom:var(--space-4);}
.product__desc{color:var(--color-text-muted);margin-bottom:var(--space-6);}
.feature-list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6);}
.feature-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--text-sm);color:var(--color-text);}
.feature-list__dot{flex:none;width:.55rem;height:.55rem;margin-top:.5rem;border-radius:var(--radius-full);background:var(--color-accent);}
.product__status{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;}
.badge{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .7rem;border-radius:var(--radius-full);background:var(--color-accent-highlight);color:var(--color-accent);}

/* ---------- Contact ---------- */
.section--contact{background:var(--color-surface);border-top:1px solid var(--color-divider);}
.contact__note{color:var(--color-text-muted);margin-top:var(--space-5);}
.contact__card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-8),4vw,var(--space-12));box-shadow:var(--shadow-md);}
.contact__label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--color-text-faint);margin-bottom:var(--space-2);}
.contact__email{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-accent);word-break:break-all;margin-bottom:var(--space-6);}
.contact__email:hover{text-decoration:underline;}
.contact__btn{width:100%;margin-bottom:var(--space-8);}
.contact__meta{display:grid;gap:var(--space-4);border-top:1px solid var(--color-divider);padding-top:var(--space-6);}
.contact__meta div{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-sm);}
.contact__meta dt{color:var(--color-text-faint);}
.contact__meta dd{color:var(--color-text);font-weight:500;}

/* ---------- Footer ---------- */
.footer{background:var(--color-navy);color:var(--hero-muted);padding-block:var(--space-12);}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);}
.footer__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;color:var(--hero-text);}
.footer__contact a{color:var(--color-accent-soft);}
.footer__contact a:hover{text-decoration:underline;}
.footer__copy{font-size:var(--text-xs);color:var(--hero-muted);width:100%;padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.08);margin-top:var(--space-2);}