/* Kazeway — kazeway.com */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#07060E;
  --surface:#100C18;
  --surface-2:#171122;
  --border:rgba(255,255,255,.07);
  --border-hover:rgba(200,149,106,.35);

  --text:#F5E6D3;
  --text-bright:#FFFFFF;
  --text-secondary:#9C8A78;
  --text-muted:#6F6357;

  --amber:#C8956A;
  --gold:#D9A66A;
  --rose:#A87070;
  --warm:#F0D3A6;
  --gradient:linear-gradient(135deg,#F0D3A6 0%,#C8956A 55%,#A87070 100%);

  /* system rounded — no external font request, keeps the privacy claim honest */
  --font:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;

  --shell:1120px;
  --pad-x:clamp(20px,5vw,40px);
  --section:clamp(80px,11vw,140px);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.gradient-bg{
  position:fixed;inset:0;height:100vh;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 78% 48% at 50% -16%, rgba(200,149,106,.11), transparent 64%),
    radial-gradient(ellipse 52% 38% at 84% 46%, rgba(168,112,112,.05), transparent 64%);
}

/* ---------- nav ---------- */
.navbar{
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--shell);margin:0 auto;
  padding:clamp(20px,3vw,28px) var(--pad-x);
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo img{width:34px;height:34px;display:block}
.logo-text{font-weight:600;font-size:1.2rem;letter-spacing:-.02em;color:var(--text-bright)}
.nav-link{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--text-secondary);text-decoration:none;
  font-size:.92rem;font-weight:500;
  padding:.5rem .9rem;border-radius:9px;
  transition:color .2s ease,background .2s ease;
}
.nav-link:hover{color:var(--text);background:var(--surface)}

/* ---------- layout ---------- */
main{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad-x)}

.badge{
  display:inline-block;padding:.42rem 1rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:100px;font-size:.82rem;font-weight:500;
  color:var(--amber);letter-spacing:.01em;
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr minmax(290px,430px);
  gap:clamp(40px,6vw,72px);align-items:center;
  padding-block:clamp(48px,7vw,88px) var(--section);
}
.hero-content{max-width:560px}
.hero h1{
  font-size:clamp(2.3rem,5.2vw,3.6rem);font-weight:700;
  line-height:1.08;letter-spacing:-.03em;color:var(--text-bright);
  margin:clamp(20px,3vw,28px) 0 clamp(18px,2.4vw,24px);
  text-wrap:balance;
}
.gradient-text{
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-description{
  font-size:clamp(1.02rem,1.8vw,1.16rem);color:var(--text-secondary);
  line-height:1.7;margin-bottom:clamp(30px,4vw,42px);max-width:52ch;
}
.cta-section{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.cta-button{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.6rem;border-radius:13px;
  background:var(--gradient);color:#1A1206;
  font-weight:600;font-size:1rem;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(200,149,106,.24)}
.cta-note{font-size:.9rem;color:var(--text-muted)}

/* ---------- device ---------- */
/* Proportions are taken from an iPhone 15/16 Pro: 393 x 852pt screen,
   ~55pt display corner radius, ~125 x 37pt Dynamic Island, and a bezel
   just under 3% of body width. Everything below is a percentage of the
   device width so it stays correct at any size. */
.hero-visual,
.goals-visual{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  perspective:1800px;
  perspective-origin:60% 42%;
}
.hero-visual::before,
.goals-visual::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-22% -16%;
  background:
    radial-gradient(46% 42% at 58% 42%, rgba(200,149,106,.20), transparent 68%),
    radial-gradient(38% 34% at 38% 66%, rgba(168,112,112,.11), transparent 70%);
  filter:blur(30px);
}

.device{
  position:relative;z-index:1;
  width:min(288px,76vw);
  transform-style:preserve-3d;
  transform:rotateY(-19deg) rotateX(7deg) rotateZ(-3.5deg);
  transition:transform 1s cubic-bezier(.22,.7,.3,1);
}
.device:hover{transform:rotateY(-11deg) rotateX(4deg) rotateZ(-2deg) scale(1.015)}

/* mirrored: leans the other way so it opens toward the copy beside it */
.device--left{transform:rotateY(19deg) rotateX(7deg) rotateZ(3.5deg)}
.device--left:hover{transform:rotateY(11deg) rotateX(4deg) rotateZ(2deg) scale(1.015)}

/* Frame. Deliberately restrained: dark, low-contrast, one quiet highlight.
   Elaborate gradients read as fake at this size — real device photography is
   mostly dark rail with a single specular line. For a genuinely photoreal
   frame, drop in Apple's official device art (see README) instead. */
.device-frame{
  position:relative;
  padding:4%;
  border-radius:17.5%/8.1%;
  background:linear-gradient(152deg, #35323B 0%, #1E1C24 30%, #191720 62%, #2C2933 100%);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.09),
    0 26px 54px rgba(0,0,0,.62),
    0 72px 100px rgba(0,0,0,.44);
}
/* single hairline chamfer — one quiet catch of light, nothing more */
.device-frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(152deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.06) 18%,
    transparent 42%,
    transparent 66%,
    rgba(255,255,255,.14) 92%,
    rgba(255,255,255,.03) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

.device-screen{
  position:relative;
  border-radius:12.4%/5.6%;             /* eased slightly — see note above */
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 .5px rgba(0,0,0,.9) inset;
}
.phone-shot{display:block;width:100%;height:auto}

/* Dynamic Island — 125x37pt on a 393pt-wide screen, 11pt from the top */
.device-island{
  position:absolute;left:50%;transform:translateX(-50%);
  top:1.3%;
  width:31.8%;aspect-ratio:125/37;
  background:#000;border-radius:100px;
  box-shadow:0 0 0 .5px rgba(255,255,255,.05);
}
.device-glare{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,.018) 25%, transparent 45%);
}

/* Side buttons. One element each, extra buttons drawn with box-shadow so
   the markup stays at two spans. Pushed back in Z so they read as sitting
   on the side rail rather than on the front face. */
.device-btn{
  position:absolute;width:2.4%;border-radius:2px;
  background:linear-gradient(180deg,#3E3A45,#232028 45%,#332F3A);
  transform:translateZ(-6px);
}
.device-btn-left{                        /* action button + volume up/down */
  left:-1.2%;top:19%;height:4.2%;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.07),
    0 26px 0 0 #2C2933,                  /* volume up */
    0 52px 0 0 #2C2933;                  /* volume down */
}
.device-btn-right{                       /* side/power button */
  right:-1.2%;top:27%;height:9.5%;
  box-shadow:0 0 0 .5px rgba(255,255,255,.07);
}

@media (prefers-reduced-motion:no-preference){
  .device{animation:float 7s ease-in-out infinite}
  .device--left{animation-delay:-3.2s}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -11px}}
  .device:hover{animation-play-state:paused}
}

@media (max-width:960px){
  .device{transform:rotateY(-8deg) rotateX(3deg) rotateZ(-1.5deg);width:min(276px,72vw)}
  .device--left{transform:rotateY(8deg) rotateX(3deg) rotateZ(1.5deg)}
  .hero-visual::before,
  .goals-visual::before{inset:-14% -8%}
}
@media (max-width:560px){
  .device,.device--left{transform:none;animation:none;width:min(262px,70vw)}
}

/* ---------- sections ---------- */
.section-head{text-align:center;margin-bottom:clamp(38px,5vw,56px)}
.section-head h2{
  font-size:clamp(1.7rem,3.4vw,2.2rem);font-weight:700;
  letter-spacing:-.02em;color:var(--text-bright);text-wrap:balance;
}
.section-head p{
  margin-top:.9rem;color:var(--text-secondary);
  font-size:1.02rem;max-width:52ch;margin-inline:auto;
}

.features{padding-block:var(--section);border-top:1px solid var(--border)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.feature-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:clamp(24px,3vw,32px);
  transition:border-color .3s ease,transform .3s ease;
}
.feature-card:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.feature-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;margin-bottom:1.1rem;
  background:rgba(200,149,106,.1);border:1px solid rgba(200,149,106,.22);
  color:var(--amber);font-size:.86rem;font-weight:600;
}
.feature-card h3{
  font-size:1.16rem;font-weight:600;letter-spacing:-.01em;
  color:var(--text-bright);margin-bottom:.6rem;
}
.feature-card p{color:var(--text-secondary);font-size:.96rem;line-height:1.65}

.goals{padding-block:var(--section);border-top:1px solid var(--border)}
.goals-layout{
  display:grid;
  grid-template-columns:minmax(264px,400px) 1fr;
  gap:clamp(40px,6vw,80px);
  align-items:center;
}
.section-head--start{text-align:left;margin-bottom:clamp(28px,3.5vw,38px)}
.section-head--start p{margin-inline:0}
.goals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:.9rem}
.goal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:15px;padding:1.3rem 1.45rem;
}
.goal b{display:block;color:var(--text-bright);font-weight:600;font-size:1.02rem;margin-bottom:.35rem}
.goal span{color:var(--text-secondary);font-size:.92rem;line-height:1.55}

.privacy{padding-block:var(--section);border-top:1px solid var(--border)}
.privacy-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:clamp(28px,4vw,42px);max-width:760px;margin-inline:auto;
}
.privacy-card ul{list-style:none;display:grid;gap:1.25rem}
.privacy-card li{
  position:relative;padding-left:1.7rem;
  color:var(--text-secondary);font-size:.99rem;line-height:1.62;
}
.privacy-card li b{color:var(--text);font-weight:600}
.privacy-card li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--amber);
}
.privacy-after{margin-top:1.6rem;text-align:center;color:var(--text-secondary);font-size:.98rem}
.privacy-after a{color:var(--gold)}

/* ---------- notify ---------- */
.notify{padding-block:var(--section);border-top:1px solid var(--border)}
.notify-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:24px;padding:clamp(32px,5vw,56px);
  text-align:center;max-width:600px;margin-inline:auto;
}
.notify-card h2{
  font-size:clamp(1.5rem,3vw,1.95rem);font-weight:700;
  letter-spacing:-.02em;color:var(--text-bright);margin-bottom:.6rem;
}
.notify-card > p{color:var(--text-secondary);margin-bottom:1.9rem}
.notify-form{display:flex;gap:.7rem;max-width:440px;margin:0 auto 1rem}
.notify-form input[type=email]{
  flex:1;padding:.92rem 1.15rem;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  color:var(--text);font-size:1rem;font-family:var(--font);outline:none;
  transition:border-color .2s ease;
}
.notify-form input::placeholder{color:var(--text-muted)}
.notify-form input:focus-visible{border-color:var(--amber)}
.notify-form button{
  padding:.92rem 1.6rem;border:none;border-radius:12px;
  background:var(--gradient);color:#1A1206;
  font-size:1rem;font-weight:600;font-family:var(--font);cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;
}
.notify-form button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(200,149,106,.24)}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.privacy-note{font-size:.86rem;color:var(--text-muted)}
.form-error{
  display:none;margin-top:.9rem;font-size:.9rem;color:var(--rose);
}
.form-error.show{display:block}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:clamp(40px,5vw,56px) var(--pad-x) clamp(28px,4vw,36px)}
.footer-content{
  display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem;
  max-width:var(--shell);margin:0 auto 2.2rem;flex-wrap:wrap;
}
.footer-brand p{color:var(--text-secondary);font-size:.92rem;margin-top:.9rem;max-width:300px}
.footer-links{display:flex;gap:1.9rem;flex-wrap:wrap}
.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.92rem;transition:color .2s ease}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{max-width:var(--shell);margin:0 auto;padding-top:1.7rem;border-top:1px solid var(--border)}
.footer-bottom p{color:var(--text-muted);font-size:.85rem;line-height:1.7}

/* ---------- success ---------- */
.success-container{padding-block:clamp(64px,10vw,120px)}
.success-icon{
  width:76px;height:76px;margin:0 auto 1.8rem;border-radius:50%;
  background:var(--gradient);display:flex;align-items:center;justify-content:center;
  animation:scaleIn .5s cubic-bezier(.22,.7,.3,1) both;
}
.success-icon svg{width:36px;height:36px;color:#1A1206;stroke-width:3}
@keyframes scaleIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

/* ---------- policy ---------- */
.policy-hero{text-align:center;padding-block:clamp(48px,7vw,80px) clamp(32px,4vw,48px)}
.policy-hero h1{
  font-size:clamp(2.1rem,4.6vw,2.9rem);font-weight:700;
  letter-spacing:-.025em;color:var(--text-bright);margin:1.1rem 0 .9rem;
}
.policy-hero > p{color:var(--text-secondary);font-size:1.04rem;max-width:56ch;margin-inline:auto}
.policy-meta{
  display:inline-block;margin-top:1.5rem;padding:.4rem 1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:100px;
  font-size:.8rem;color:var(--text-muted);
}
.policy-content{max-width:760px;margin:0 auto;padding-bottom:clamp(64px,9vw,110px)}
.policy-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:clamp(24px,3.4vw,36px);margin-bottom:1.15rem;
  transition:border-color .25s ease;
}
.policy-section:hover{border-color:var(--border-hover)}
.policy-section h2{
  font-size:1.16rem;font-weight:600;letter-spacing:-.01em;
  color:var(--text-bright);margin-bottom:1.05rem;
}
.policy-section p{color:var(--text-secondary);font-size:.98rem;line-height:1.78;margin-bottom:.85rem}
.policy-section p:last-child{margin-bottom:0}
.policy-section ul{list-style:none;margin:.6rem 0 1rem}
.policy-section li{
  position:relative;padding-left:1.5rem;margin-bottom:.5rem;
  color:var(--text-secondary);font-size:.98rem;line-height:1.7;
}
.policy-section li::before{
  content:"";position:absolute;left:.15rem;top:.72em;
  width:7px;height:7px;border-radius:50%;border:1.5px solid var(--amber);
}
.highlight-box{
  background:linear-gradient(135deg,rgba(200,149,106,.09) 0%,rgba(168,112,112,.05) 100%);
  border:1px solid rgba(200,149,106,.2);border-radius:14px;
  padding:1.2rem 1.45rem;margin-bottom:1.1rem;
}
.highlight-box p{color:var(--text)!important;font-weight:500;margin:0!important}
.contact-link{color:var(--gold);text-decoration:none;font-weight:500}
.contact-link:hover{text-decoration:underline;text-underline-offset:3px}



/* ---------- App Store button ---------- */
.cta-button.appstore svg{width:21px;height:21px;flex:none}
.closing-cta{display:flex;justify-content:center;margin-top:clamp(36px,5vw,52px)}

/* ---------- goal cards: glow on hover ---------- */
.goal{
  position:relative;isolation:isolate;
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.goal::after{
  /* soft amber bloom, painted behind the card */
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:radial-gradient(120% 120% at 50% 0%, rgba(200,149,106,.16), transparent 70%);
  opacity:0;transition:opacity .35s ease;
}
.goal:hover,.goal:focus-within{
  border-color:var(--border-hover);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(200,149,106,.18),
             0 10px 34px rgba(200,149,106,.14),
             0 2px 10px rgba(0,0,0,.4);
}
.goal:hover::after,.goal:focus-within::after{opacity:1}
.goal:hover b{color:var(--warm);transition:color .35s ease}

/* ---------- scroll reveal ---------- */
/* Applied only when reveal.js confirms motion is welcome. Without the
   .reveal-on class on <html>, every rule below is inert and content shows. */
.reveal-on section,
.reveal-on .reveal,
.reveal-on .policy-section{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),
             transform .7s cubic-bezier(.22,.7,.3,1);
  transition-delay:calc(var(--reveal-i, 0) * 60ms);
  will-change:opacity, transform;
}
.reveal-on section.is-visible,
.reveal-on .reveal.is-visible,
.reveal-on .policy-section.is-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}
/* stagger the cards inside a revealed section */
.reveal-on .features-grid > *,
.reveal-on .goals-grid > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),
             transform .6s cubic-bezier(.22,.7,.3,1);
}
.reveal-on .is-visible .features-grid > *,
.reveal-on .is-visible .goals-grid > *{opacity:1;transform:none}
.reveal-on .is-visible .features-grid > *:nth-child(2),
.reveal-on .is-visible .goals-grid > *:nth-child(2){transition-delay:70ms}
.reveal-on .is-visible .features-grid > *:nth-child(3),
.reveal-on .is-visible .goals-grid > *:nth-child(3){transition-delay:140ms}
.reveal-on .is-visible .goals-grid > *:nth-child(4){transition-delay:210ms}
.reveal-on .is-visible .goals-grid > *:nth-child(5){transition-delay:280ms}
.reveal-on .is-visible .goals-grid > *:nth-child(6){transition-delay:350ms}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .goals-layout{grid-template-columns:1fr;gap:clamp(36px,6vw,52px)}
  .goals-copy{order:1}
  .goals-visual{order:2}
  .section-head--start{text-align:center}
  .section-head--start p{margin-inline:auto}
  .hero{grid-template-columns:1fr;text-align:center;gap:3rem}
  .hero-content{max-width:100%;margin-inline:auto}
  .hero-description{margin-inline:auto}
  .cta-section{justify-content:center}
  .features-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
}
@media (max-width:560px){
  .notify-form{flex-direction:column}
  .footer-content{flex-direction:column;gap:2rem}
  .logo-text{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal-on section,.reveal-on .reveal,.reveal-on .policy-section,
  .reveal-on .features-grid > *,.reveal-on .goals-grid > *{opacity:1!important;transform:none!important}
  .device{animation:none!important}
}