/* =========================================================
   NAYLIO — SITE CSS
   Polished landing page / v3
   ========================================================= */

:root{
  --bg:#07090b;
  --bg-soft:#0b0e12;
  --panel:#10141a;
  --panel-2:#151a21;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --text:#f5f7fb;
  --muted:#9da5b0;
  --muted-2:#737c88;
  --light:#f3f5f8;
  --light-text:#11151a;
  --accent:#a8c7ff;
  --accent-2:#d39bff;
  --warm:#e6a77d;
  --max:1180px;
  --radius:18px;
  --shadow:0 24px 80px rgba(0,0,0,.28);
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{font:inherit}

button{color:inherit}

::selection{
  background:rgba(174,150,255,.28);
  color:#fff;
}

.container{
  width:min(calc(100% - 48px),var(--max));
  margin-inline:auto;
}

.section-pad{
  padding:92px 0;
}

.eyebrow{
  margin:0 0 16px;
  color:#8d96a3;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.eyebrow span{color:var(--accent-2)}

h1,h2,h3,p{margin-top:0}

h1,h2,h3{
  letter-spacing:-.045em;
}

h1{
  max-width:690px;
  margin-bottom:22px;
  font-size:clamp(46px,6vw,78px);
  line-height:.98;
  font-weight:750;
}

h2{
  margin-bottom:22px;
  font-size:clamp(38px,4.6vw,64px);
  line-height:1.01;
  font-weight:740;
}

h3{
  font-size:20px;
  line-height:1.08;
  font-weight:700;
}

em{
  color:var(--accent);
  font-style:normal;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 18px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:750;
  letter-spacing:.01em;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-light{
  background:#fff;
  color:#090b0e;
}

.btn-light:hover{background:#edf0f5}

.btn-outline{
  border-color:var(--line-strong);
  background:transparent;
  color:var(--text);
}

.btn-outline:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.05);
}

.dark-btn{
  margin-top:26px;
}

.text-link{
  display:inline-flex;
  gap:7px;
  align-items:center;
  color:#c6cbd3;
  font-size:12px;
  font-weight:650;
}

.text-link:hover{color:#fff}

.max-copy{
  max-width:660px;
  margin:0 auto;
  color:#737b87;
  font-size:14px;
  line-height:1.75;
}

.center{text-align:center}

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:absolute;
  inset:0 0 auto;
  z-index:50;
  width:100%;
  background:transparent;
  border-bottom:1px solid transparent;
}

.site-header .container.nav,
.site-header .nav{
  min-height:76px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  width:min(calc(100% - 48px),var(--max));
  margin-inline:auto;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:850;
  letter-spacing:.18em;
}

.brand i{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px rgba(168,199,255,.65);
}

.nav nav{
  display:flex;
  align-items:center;
  gap:25px;
}

.nav nav a{
  color:#929aa6;
  font-size:12px;
  font-weight:650;
  transition:color .2s ease;
}

.nav nav a:hover{color:#fff}

.nav .nav-cta{
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  color:#090b0e;
}

.menu-btn{
  display:none;
  border:0;
  background:transparent;
  cursor:pointer;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:760px;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 30%,rgba(73,92,125,.15),transparent 27%),
    linear-gradient(180deg,#06080a 0%,#080b0e 100%);
}

.hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 58% 46%,rgba(115,145,190,.08),transparent 25%),
    radial-gradient(circle at 82% 52%,rgba(195,126,219,.07),transparent 20%);
}

.hero-v3-grid{
  position:relative;
  z-index:2;
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  align-items:center;
  gap:20px;
  padding-top:76px;
}

.hero-v3-copy{
  position:relative;
  z-index:3;
  padding-bottom:20px;
}

.hero h1 em{
  color:transparent;
  background:linear-gradient(90deg,#a9c7ff 0%,#d08cff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.hero-lead{
  max-width:520px;
  margin-bottom:22px;
  color:#8e97a3;
  font-size:16px;
  line-height:1.6;
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}

.hero-points span{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#b9c0ca;
  font-size:11px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.hero-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  color:#818a96;
  font-size:11px;
}

.hero-note strong{
  font-weight:550;
}

.hero-note-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a9c7ff;
  box-shadow:0 0 14px rgba(169,199,255,.7);
}

.hero-v3-art{
  position:relative;
  min-height:590px;
  isolation:isolate;
}

.hero-device{
  position:absolute;
  border:1px solid rgba(255,255,255,.15);
  border-radius:28px;
  background:#10161d;
  box-shadow:0 35px 80px rgba(0,0,0,.48);
  overflow:hidden;
}

.hero-device::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.hero-device-front{
  width:265px;
  height:520px;
  top:70px;
  right:105px;
  z-index:3;
  transform:rotate(-5deg);
}

.hero-device-back{
  width:245px;
  height:475px;
  top:108px;
  right:0;
  z-index:2;
  transform:rotate(7deg);
  opacity:.9;
}

.device-screen{
  position:absolute;
  inset:8px;
  overflow:hidden;
  border-radius:21px;
  background:
    radial-gradient(circle at 50% 0%,rgba(85,109,143,.4),transparent 32%),
    linear-gradient(160deg,#18212b,#0d1218 62%,#0a0d11);
}

.device-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 15px 9px;
  color:#f5f7fb;
  font-size:9px;
}

.device-bar span{
  color:#788493;
  letter-spacing:.12em;
}

.stories{
  display:flex;
  gap:7px;
  padding:8px 13px 13px;
}

.stories i{
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  background:linear-gradient(135deg,#23364a,#ba83cc);
}

.feed-photo{
  height:265px;
  margin:0 11px;
  border-radius:13px;
  background:
    linear-gradient(180deg,transparent 30%,rgba(0,0,0,.35)),
    url("../assets/hero-creator.jpg") center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

.feed-caption{
  padding:13px 14px 5px;
}

.feed-caption strong{
  display:block;
  font-size:11px;
}

.feed-caption small{
  display:block;
  margin-top:3px;
  color:#87909c;
  font-size:8px;
}

.feed-actions{
  padding:9px 14px;
  color:#9aa3ae;
  font-size:9px;
}

.device-nav{
  position:absolute;
  inset:auto 9px 8px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:#8e97a4;
  text-align:center;
  font-size:11px;
}

.profile-screen{
  padding:0 12px;
}

.profile-avatar{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin:24px auto 9px;
  border-radius:50%;
  background:linear-gradient(145deg,#d39bff,#718fbd);
  color:#fff;
  font-size:14px;
  font-weight:800;
}

.profile-screen .profile-name,
.profile-screen > small{
  display:block;
  text-align:center;
}

.profile-screen > small{
  color:#8c96a2;
  font-size:8px;
}

.profile-stats{
  display:flex;
  justify-content:center;
  gap:20px;
  margin:22px 0;
}

.profile-stats span{
  text-align:center;
}

.profile-stats b{
  display:block;
  font-size:10px;
}

.profile-stats small{
  display:block;
  color:#818a96;
  font-size:7px;
}

.profile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.profile-grid i{
  aspect-ratio:1;
  border-radius:4px;
  background:linear-gradient(135deg,#26364b,#8f6578);
}

.profile-grid i:nth-child(2){background:linear-gradient(135deg,#151c28,#d2a3dc)}
.profile-grid i:nth-child(3){background:linear-gradient(135deg,#514333,#151c28)}
.profile-grid i:nth-child(4){background:linear-gradient(135deg,#8c5c42,#252c38)}
.profile-grid i:nth-child(5){background:linear-gradient(135deg,#263b4e,#c39c81)}
.profile-grid i:nth-child(6){background:linear-gradient(135deg,#6b7193,#242832)}

.hero-floating{
  position:absolute;
  z-index:5;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(14,18,24,.82);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}

.hero-floating b{
  display:block;
  color:#f4f6f9;
  font-size:9px;
}

.hero-floating small{
  display:block;
  margin-top:2px;
  color:#7f8995;
  font-size:8px;
}

.hf-one{
  top:142px;
  left:30px;
}

.hf-two{
  right:12px;
  bottom:135px;
}

.hero-scribble{
  position:absolute;
  right:12px;
  bottom:52px;
  z-index:4;
  color:rgba(222,228,236,.4);
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:19px;
  line-height:1.02;
  transform:rotate(-7deg);
}

.hero-scribble b{
  color:#d19bff;
}

/* =========================================================
   PROMISE STRIP
   ========================================================= */

.promise-strip{
  position:relative;
  z-index:4;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#090c10;
}

.promise-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.promise-grid > div{
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  align-content:center;
  padding:13px 22px;
  border-right:1px solid var(--line);
}

.promise-grid > div:last-child{border-right:0}

.promise-grid .icon{
  grid-row:span 2;
  color:#d9dfe8;
  font-size:13px;
}

.promise-grid strong{
  font-size:12px;
  font-weight:750;
}

.promise-grid small{
  color:#707986;
  font-size:10px;
}

/* =========================================================
   PRODUCT
   ========================================================= */

.product-lab{
  background:#080b0f;
}

.product-lab-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:end;
  margin-bottom:44px;
}

.product-lab-head h2{
  margin-bottom:0;
}

.product-lab-head h2 em{
  color:#c594ff;
}

.product-lab-head > p{
  max-width:440px;
  margin:0 0 3px auto;
  color:#777f8a;
  font-size:13px;
  line-height:1.75;
}

.product-lab-stage{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);
  gap:48px;
  align-items:center;
}

.product-main-preview{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:#0e1217;
  box-shadow:var(--shadow);
}

.preview-browser-bar{
  display:flex;
  align-items:center;
  gap:5px;
  height:36px;
  padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#717b88;
  font-size:8px;
}

.preview-browser-bar span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#555d68;
}

.preview-browser-bar b{
  margin-left:8px;
  font-size:8px;
  letter-spacing:.1em;
}

.product-main-preview img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.preview-caption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 16px;
}

.preview-caption strong{
  font-size:11px;
}

.preview-caption span{
  color:#727b87;
  font-size:9px;
}

.product-controls{
  min-width:0;
}

.product-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:25px;
}

.product-tabs button{
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:#7e8793;
  cursor:pointer;
  font-size:9px;
}

.product-tabs button.active,
.product-tabs button:hover{
  border-color:rgba(255,255,255,.24);
  background:#fff;
  color:#0a0d11;
}

.product-panel{
  display:none;
}

.product-panel.active{
  display:block;
}

.panel-number{
  display:block;
  margin-bottom:11px;
  color:#777f8b;
  font-size:9px;
  letter-spacing:.15em;
}

.product-panel h3{
  max-width:390px;
  margin-bottom:12px;
  font-size:27px;
}

.product-panel p{
  max-width:440px;
  color:#7f8894;
  font-size:15px;
  line-height:1.65;
}

.panel-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px;
}

.panel-pills span{
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#8f98a4;
  font-size:8px;
}

/* =========================================================
   CONTROL
   ========================================================= */

.control-section{
  background:var(--light);
  color:var(--light-text);
}

.control-section .eyebrow{color:#8d96a0}

.control-section h2{
  max-width:780px;
  margin-inline:auto;
}

.control-section h2 em{
  color:transparent;
  background:linear-gradient(90deg,#a9c7ff,#c38fff);
  -webkit-background-clip:text;
  background-clip:text;
}

.control-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:46px;
}

.control-card{
  min-height:130px;
  padding:22px;
  border:1px solid #e1e4e9;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.control-card:hover{
  transform:translateY(-3px);
  border-color:#d3d8df;
  box-shadow:0 15px 35px rgba(30,35,40,.08);
}

.control-card > span{
  display:block;
  margin-bottom:19px;
  color:#9aa2ac;
  font-size:8px;
}

.control-card h3{
  margin-bottom:5px;
  font-size:13px;
  letter-spacing:-.02em;
}

.control-card p{
  max-width:260px;
  margin:0;
  color:#818995;
  font-size:9px;
  line-height:1.55;
}

/* =========================================================
   CREATOR SURFACES
   ========================================================= */

.surfaces-v3{
  background:#080b0e;
}

.section-heading{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:end;
  margin-bottom:42px;
}

.section-heading h2{
  margin:0;
}

.section-heading p{
  max-width:430px;
  margin:0 0 3px auto;
  color:#7f8894;
  font-size:13px;
  line-height:1.75;
}

.surfaces-grid-v3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.surface-v3{
  min-height:150px;
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

.surface-v3:hover{
  border-color:rgba(255,255,255,.18);
}

.surface-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;
  color:#dce2eb;
  font-size:9px;
}

.surface-v3 h3{
  margin-bottom:6px;
  font-size:13px;
}

.surface-v3 p{
  max-width:270px;
  margin:0;
  color:#777f8b;
  font-size:9px;
  line-height:1.55;
}

/* =========================================================
   CRAFT
   ========================================================= */

.chef-section{
  position:relative;
  min-height:460px;
  overflow:hidden;
  background:#080b0e;
}

.chef-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,5,7,.96) 0%,rgba(3,5,7,.82) 40%,rgba(3,5,7,.48) 75%,rgba(3,5,7,.78) 100%),
    linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.5)),
    url("../assets/hero-creator.jpg") center/cover no-repeat;
  filter:saturate(.8);
  transform:scale(1.02);
}

.chef-inner{
  position:relative;
  z-index:2;
  min-height:460px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:var(--max);
}

.chef-inner h2{
  max-width:570px;
  margin-bottom:16px;
}

.chef-inner h2 em{color:#c08dff}

.chef-inner > p{
  max-width:600px;
  margin-bottom:20px;
  color:#a4acb7;
  font-size:12px;
  line-height:1.75;
}

.chef-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:650px;
  margin-bottom:24px;
}

.chef-tags span{
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  color:#9da6b1;
  font-size:8px;
}

/* =========================================================
   PROFILE
   ========================================================= */

.creator-categories-v3{
  background:#080b0e;
}

.category-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:end;
  margin-bottom:44px;
}

.category-intro h2{margin-bottom:0}

.category-intro p{
  max-width:440px;
  margin:0 0 3px auto;
  color:#7d8692;
  font-size:13px;
  line-height:1.75;
}

.category-image-wrap{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:#0d1116;
  box-shadow:var(--shadow);
}

.category-image-wrap img{
  width:100%;
  max-height:460px;
  object-fit:cover;
  object-position:center;
}

/* =========================================================
   TRUST
   ========================================================= */

.trust-v3{
  background:var(--light);
  color:var(--light-text);
}

.trust-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.trust-grid h2{margin-bottom:18px}

.trust-grid h2 em{
  color:transparent;
  background:linear-gradient(90deg,#a9c7ff,#c58eff);
  -webkit-background-clip:text;
  background-clip:text;
}

.trust-grid > div:first-child > p{
  max-width:560px;
  margin-bottom:24px;
  color:#737b87;
  font-size:13px;
  line-height:1.75;
}

.trust-grid .btn-outline{
  border-color:#cdd2d8;
  color:#15191e;
}

.trust-grid .btn-outline:hover{
  background:#e8ebef;
  border-color:#bbc1c8;
}

.trust-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.trust-cards > div{
  min-height:108px;
  padding:18px;
  border:1px solid #e0e4e9;
  border-radius:13px;
  background:#fff;
}

.trust-cards b{
  display:block;
  margin-bottom:8px;
  font-size:11px;
}

.trust-cards span{
  display:block;
  color:#7e8792;
  font-size:9px;
  line-height:1.5;
}

/* =========================================================
   FOUNDING CTA
   ========================================================= */

.founding-v3{
  background:#080b0e;
  padding-top:72px;
  padding-bottom:72px;
}

.founding-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:30px 34px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:
    radial-gradient(circle at 75% 40%,rgba(86,107,145,.16),transparent 35%),
    linear-gradient(135deg,#10151d,#0c1015);
}

.founding-card .eyebrow{margin-bottom:9px}

.founding-card h2{
  margin-bottom:7px;
  font-size:25px;
}

.founding-card p{
  margin:0;
  color:#7f8894;
  font-size:10px;
}

/* =========================================================
   MANIFESTO
   ========================================================= */

.manifesto{
  background:#06080a;
  border-top:1px solid rgba(255,255,255,.07);
}

.manifesto-inner{
  min-height:390px;
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:80px;
  align-items:center;
}

.manifesto-inner h2{
  max-width:600px;
  margin-bottom:16px;
  font-size:43px;
}

.manifesto-inner p{
  max-width:510px;
  color:#7d8691;
  font-size:12px;
  line-height:1.7;
}

.manifesto-mark{
  justify-self:end;
  color:#f4f6f8;
  font-size:48px;
  line-height:.86;
  font-weight:850;
  letter-spacing:-.07em;
  text-align:right;
}

.manifesto-mark em{
  color:transparent;
  background:linear-gradient(180deg,#a9c7ff,#d49aff);
  -webkit-background-clip:text;
  background-clip:text;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:#06080a;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  padding:55px 0 35px;
}

.footer-tag{
  margin-top:9px;
  color:#747d89;
  font-size:9px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px 18px;
}

.footer-links a,
.socials a{
  color:#7d8691;
  font-size:9px;
}

.footer-links a:hover,
.socials a:hover{color:#fff}

.socials{
  display:flex;
  justify-content:flex-end;
  gap:13px;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.07);
  color:#5f6874;
  font-size:8px;
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:1;
  transform:none;
}

.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;
}

.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

.delay-1{transition-delay:.1s}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1000px){

  .hero{
    min-height:auto;
  }

  .hero-v3-grid{
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:130px;
    padding-bottom:75px;
  }

  .hero-v3-copy{
    max-width:720px;
  }

  .hero-v3-art{
    min-height:530px;
    max-width:620px;
    width:100%;
    margin:0 auto;
  }

  .hero-device-front{
    right:24%;
  }

  .hero-device-back{
    right:7%;
  }

  .promise-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .promise-grid > div:nth-child(2){
    border-right:0;
  }

  .promise-grid > div:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }

  .product-lab-head,
  .section-heading,
  .category-intro{
    grid-template-columns:1fr;
    gap:20px;
  }

  .product-lab-head > p,
  .section-heading p,
  .category-intro p{
    margin-left:0;
  }

  .product-lab-stage{
    grid-template-columns:1fr;
  }

  .product-controls{
    max-width:700px;
  }

  .control-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .trust-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .manifesto-inner{
    grid-template-columns:1fr .55fr;
  }
}

@media (max-width:720px){

  .container{
    width:min(calc(100% - 32px),var(--max));
  }

  .section-pad{
    padding:78px 0;
  }

  h1{
    font-size:clamp(42px,12vw,62px);
  }

  h2{
    font-size:clamp(34px,10vw,48px);
  }

  .site-header{
    background:rgba(7,9,11,.78);
    backdrop-filter:blur(12px);
    border-bottom-color:rgba(255,255,255,.06);
  }

  .nav{
    min-height:64px;
    width:min(calc(100% - 32px),var(--max));
  }

  .nav nav{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 16px 18px;
    background:#090c10;
    border-bottom:1px solid var(--line);
  }

  .nav nav.open{display:flex}

  .nav nav a{
    padding:12px 4px;
    font-size:12px;
  }

  .nav .nav-cta{
    text-align:center;
  }

  .menu-btn{
    display:block;
    font-size:22px;
  }

  .hero-v3-grid{
    padding-top:105px;
  }

  .hero-lead{
    font-size:13px;
  }

  .hero-v3-art{
    min-height:430px;
    transform:scale(.84);
    transform-origin:top center;
    margin-bottom:-55px;
  }

  .hero-device-front{
    width:220px;
    height:430px;
    right:21%;
  }

  .hero-device-back{
    width:200px;
    height:395px;
    right:0;
  }

  .feed-photo{height:215px}

  .hf-one{
    left:0;
    top:115px;
  }

  .hf-two{
    right:0;
    bottom:75px;
  }

  .hero-scribble{
    display:none;
  }

  .promise-grid{
    grid-template-columns:1fr;
  }

  .promise-grid > div,
  .promise-grid > div:nth-child(2){
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .promise-grid > div:last-child{
    border-bottom:0;
  }

  .promise-grid > div{
    min-height:66px;
  }

  .product-lab-head{
    margin-bottom:35px;
  }

  .product-main-preview img{
    aspect-ratio:4/3;
  }

  .preview-caption{
    flex-direction:column;
    gap:5px;
  }

  .control-grid,
  .surfaces-grid-v3{
    grid-template-columns:1fr;
  }

  .control-card{
    min-height:115px;
  }

  .chef-section,
  .chef-inner{
    min-height:540px;
  }

  .chef-bg{
    background-position:65% center;
  }

  .category-image-wrap img{
    max-height:none;
  }

  .trust-cards{
    grid-template-columns:1fr;
  }

  .founding-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .manifesto-inner{
    min-height:auto;
    grid-template-columns:1fr;
    gap:45px;
    padding-top:75px;
    padding-bottom:75px;
  }

  .manifesto-mark{
    justify-self:start;
    text-align:left;
    font-size:42px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .socials{
    justify-content:flex-start;
  }

  .footer-bottom{
    flex-direction:column;
    gap:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  .js .reveal{
    opacity:1;
    transform:none;
  }
}


/* BRAND LOCKUP + SHARING */
.brand-lockup{display:inline-flex;align-items:center;letter-spacing:normal;line-height:0}
.brand-lockup img{width:174px;height:auto}
.footer-lockup img{width:190px}
.nav-actions{display:flex;align-items:center;gap:10px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.025);color:#dce1e8;font-size:11px;font-weight:750;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.share-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}
.share-btn-compact{min-height:38px;padding:8px 12px}
.share-btn-hero{margin-top:0}
.share-icon{font-size:14px;line-height:1}
.share-toast{position:fixed;left:50%;bottom:28px;z-index:100;transform:translate(-50%,18px);padding:11px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#11161d;color:#fff;font-size:12px;font-weight:700;box-shadow:0 16px 50px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.share-toast.show{opacity:1;transform:translate(-50%,0)}
.footer .socials{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer .socials .share-btn{margin-right:4px}
@media(max-width:900px){.nav-actions{gap:7px}.share-btn-compact span:last-child{display:none}.share-btn-compact{width:38px;padding:0}.brand-lockup img{width:150px}.footer-lockup img{width:165px}}
@media(max-width:640px){.brand-lockup img{width:138px}.share-btn-hero{margin-top:4px}.hero-actions{align-items:flex-start;flex-wrap:wrap}}

/* =========================================================
   SUBPAGE / CONTENT PAGES
   Restores the editorial layout used by the home page on
   Creators, Features, Values, FAQ, Join, Contact and Investors.
   ========================================================= */

.page-hero{
  padding:150px 0 92px;
  background:#07090b;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.page-hero .container{position:relative}

.page-hero h1{
  max-width:980px;
  margin-bottom:22px;
}

.page-hero p{
  max-width:920px;
  margin-bottom:0;
  color:#8b94a0;
  font-size:17px;
  line-height:1.65;
}

.feature-full{
  max-width:1000px;
  margin-inline:auto;
}

.feature-block{
  padding:0 0 48px;
  margin-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.feature-block:last-child{
  margin-bottom:0;
  border-bottom:0;
}

.feature-block .num{
  margin-bottom:10px;
  color:#7d8692;
  font-size:10px;
  font-weight:750;
  letter-spacing:.12em;
}

.feature-block h3{
  max-width:760px;
  margin-bottom:12px;
  font-size:27px;
}

.feature-block p{
  max-width:900px;
  margin:0;
  color:#858e9a;
  font-size:15px;
  line-height:1.65;
}

.prose{
  max-width:920px;
}

.prose h2{
  max-width:850px;
  margin-bottom:30px;
  font-size:43px;
}

.prose h3{
  margin:34px 0 8px;
  font-size:22px;
}

.prose p{
  max-width:860px;
  margin-bottom:20px;
  color:#858e9a;
  font-size:16px;
  line-height:1.7;
}

.prose.legal p{max-width:800px}

.faq details{
  padding:25px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.faq details:first-child{border-top:1px solid rgba(255,255,255,.08)}

.faq summary{
  position:relative;
  padding-right:35px;
  color:#f2f4f7;
  cursor:pointer;
  list-style:none;
  font-size:17px;
  font-weight:700;
}

.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:-2px;color:#8d96a2;font-size:22px;font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:14px 0 0;max-width:850px}

.feature-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.feature-list span{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#a2abb7;
  font-size:10px;
}

.join-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,480px);
  gap:80px;
  align-items:start;
  margin-top:20px;
}

.join-wrap > div:first-child p{max-width:650px}

.join-card{
  padding:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:linear-gradient(145deg,#10151c,#0b0e12);
  box-shadow:var(--shadow);
}

.join-card form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
}

.join-card label{
  display:block;
  color:#9ba4af;
  font-size:10px;
  font-weight:700;
}

.join-card input:not([type="checkbox"]),
.join-card select{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  outline:none;
  background:#080b0f;
  color:#eef1f5;
  font-size:12px;
}

.join-card input:not([type="checkbox"]):focus,
.join-card select:focus{
  border-color:rgba(168,199,255,.55);
}

.join-card form > label:not([style]){align-self:end}
.join-card form > input:not([type="checkbox"]),
.join-card form > select{margin-bottom:7px}
.join-card form > label[style]{grid-column:1 / -1}
.join-card .submit{grid-column:1 / -1;justify-self:start;margin-top:6px}

.success,
.error{
  margin-bottom:18px;
  padding:12px 14px;
  border-radius:10px;
  font-size:11px;
  line-height:1.5;
}

.success{border:1px solid rgba(137,224,174,.25);background:rgba(91,180,128,.08);color:#bfe9cd}
.error{border:1px solid rgba(255,150,150,.22);background:rgba(220,80,80,.08);color:#f0b8b8}

.contact-grid,
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.contact-card,
.feature-card{
  min-height:180px;
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

.contact-card h3,
.feature-card h3{margin-bottom:10px;font-size:18px}
.contact-card p,
.feature-card p{color:#818a96;font-size:14px;line-height:1.6}

.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:90px;
  align-items:start;
}

.split h2{font-size:45px}

.dark-section{background:#080b0e}
.light-section{background:var(--light);color:var(--light-text)}
.light-section .feature-block{border-bottom-color:#dfe3e8}
.light-section .feature-block p{color:#737b87}

.investor-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

 .investor-points span{
  min-height:90px;
  display:flex;
  align-items:flex-end;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:#0d1116;
  color:#c6cbd3;
  font-size:13px;
  font-weight:700;
}

.card-grid.six{grid-template-columns:repeat(3,1fr)}
.card-grid.six .feature-card{min-height:190px}

@media(max-width:1000px){
  .join-wrap{grid-template-columns:1fr;gap:45px}
  .split{grid-template-columns:1fr;gap:45px}
  .contact-grid,.card-grid,.card-grid.six{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .page-hero{padding:120px 0 65px}
  .page-hero h1{font-size:clamp(42px,12vw,62px)}
  .page-hero p{font-size:13px}
  .feature-block{padding-bottom:34px;margin-bottom:34px}
  .feature-block h3{font-size:23px}
  .prose h2,.split h2{font-size:34px}
  .contact-grid,.card-grid,.card-grid.six,.investor-points{grid-template-columns:1fr}
  .join-card{padding:20px}
  .join-card form{grid-template-columns:1fr}
  .join-card form > label[style],.join-card .submit{grid-column:1}
}