/* Tareeeq landing · style.css */
:root{
  --teal:#2D5F5F; --teal-dark:#1E4241; --night:#14302F;
  --canvas:#F4E4BC; --canvas-soft:#FBF6E8; --paper:#FFFFFF;
  --gold:#9A7B2F; --gray:#8B8680; --ink:#26302E; --red:#C0392B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ font-family:'Outfit',system-ui,sans-serif; color:var(--ink); background:var(--canvas-soft); line-height:1.6; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{ max-width:1180px; margin:0 auto; padding:0 28px; }
section{ padding:96px 0; }
@media(max-width:760px){ section{padding:64px 0;} }

/* type system: Outfit only, weight contrast */
.label{ font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.label-gold{ color:#D4AE58; }
h1{ font-weight:300; font-size:clamp(2.6rem,5.6vw,4.4rem); line-height:1.06; letter-spacing:-.01em; color:var(--teal); }
h2{ font-weight:300; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.15; color:var(--teal); margin-bottom:18px; }
h2 b, h1 b{ font-weight:600; }
.accent{ color:var(--gold); }
.body-l{ font-size:1.08rem; color:#57534a; max-width:640px; }
.upper-sub{ font-size:.86rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); line-height:1.8; }

/* nav */
nav{
  position:sticky; top:0; z-index:100; background:rgba(251,246,232,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(45,95,95,.12);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand-logo{ height:38px; width:auto; }
.nav-links{ display:flex; gap:30px; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.nav-links a{ color:#5b564c; }
.nav-links a:hover{ color:var(--teal); }
.nav-ctas{ display:flex; gap:10px; }
.btn{ display:inline-block; border-radius:999px; font-family:inherit; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:13px 24px; cursor:pointer; border:0; transition:transform .15s ease, background .2s ease; }
.btn:active{ transform:scale(.97); }
.btn-teal{ background:var(--teal); color:#fff; }
.btn-teal:hover{ background:var(--teal-dark); }
.btn-ghost{ background:transparent; color:var(--teal); border:1.5px solid rgba(45,95,95,.4); }
.btn-ghost:hover{ border-color:var(--teal); }
.btn-ghost-light{ color:var(--canvas); border-color:rgba(244,228,188,.4); }
.btn-canvas{ background:var(--canvas); color:var(--teal-dark); }
@media(max-width:900px){ .nav-links{display:none;} }
@media(max-width:560px){ .nav-ctas .btn{ padding:11px 14px; font-size:.68rem; } .brand-logo{height:30px;} }

/* hero */
.hero{ padding:84px 0 70px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero .upper-sub{ margin:22px 0 12px; max-width:520px; }
.hero .founder{ font-size:.9rem; color:var(--gray); font-style:italic; margin-top:18px; }
.hero-cta-row{ display:flex; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.cta-note{ font-size:.78rem; color:var(--gray); letter-spacing:.06em; }
.hero-visual{ position:relative; border-radius:28px; overflow:hidden; min-height:440px; }
.hero-mockup{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* placeholder pattern: image hides on error, fallback shows */
.ph-fallback{
  display:none; position:absolute; inset:0; border:2px dashed rgba(45,95,95,.35); border-radius:28px;
  background:linear-gradient(140deg, rgba(45,95,95,.07), rgba(154,123,47,.08));
  flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:20px;
}
.hero-visual.missing .hero-mockup{ display:none; }
.hero-visual.missing .ph-fallback{ display:flex; }
.ph-label{ font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.ph-hint{ font-size:.78rem; color:var(--gray); }

/* stats band */
.stats{ background:var(--teal); color:var(--canvas); padding:64px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; text-align:center; }
@media(max-width:760px){ .stats-grid{ grid-template-columns:1fr; gap:28px; } }
.stat .num{ font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:300; line-height:1; }
.stat .num b{ font-weight:600; }
.stat .lbl{ font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,228,188,.75); margin-top:12px; line-height:1.7; }
.stats .closing{ text-align:center; margin-top:52px; font-size:1.05rem; color:rgba(244,228,188,.9); max-width:640px; margin-left:auto; margin-right:auto; }

/* two options */
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; }
@media(max-width:860px){ .split-grid{grid-template-columns:1fr;} }
.opt{
  border-radius:26px; padding:40px 36px; display:flex; flex-direction:column; min-height:380px;
  background:var(--paper); border:1px solid rgba(45,95,95,.14);
}
.opt.dark{ background:var(--night); color:#F0EDE2; border-color:transparent; }
.opt .tag{ font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.opt.dark .tag{ color:#D4AE58; }
.opt h3{ font-size:1.6rem; font-weight:600; color:var(--teal); margin-bottom:12px; line-height:1.2; }
.opt.dark h3{ color:var(--canvas); }
.opt p{ font-size:.98rem; color:#5c5850; margin-bottom:10px; }
.opt.dark p{ color:rgba(240,237,226,.8); }
.opt .push{ flex:1; }
.opt .btn{ align-self:flex-start; margin-top:20px; }

/* journey */
.journey{ background:var(--paper); }
.j-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:46px 0; border-bottom:1px solid rgba(45,95,95,.1); }
.j-row:last-of-type{ border-bottom:0; }
.j-row:nth-child(even) .j-visual{ order:-1; }
@media(max-width:860px){ .j-row{ grid-template-columns:1fr; gap:26px;} .j-row:nth-child(even) .j-visual{order:0;} }
.j-step{ font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.j-row h3{ font-size:1.7rem; font-weight:600; color:var(--teal); margin-bottom:12px; }
.j-row p{ color:#57534a; max-width:480px; }
.j-visual{ border-radius:22px; min-height:230px; position:relative; overflow:hidden;
  background:linear-gradient(140deg, rgba(45,95,95,.1), rgba(154,123,47,.12)); border:1px solid rgba(45,95,95,.12);
  display:flex; align-items:center; justify-content:center; }
.j-line{ background:rgba(20,48,47,.85); color:#F0EDE2; border-radius:14px; padding:13px 18px; font-size:.9rem; max-width:82%; line-height:1.5; }
.j-line .who{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#8FD0C8; font-weight:700; margin-bottom:3px; }
.journey .close-line{ text-align:center; margin-top:46px; font-size:1rem; color:var(--teal); font-weight:500; }

/* noura lines marquee */
.voices{ background:var(--canvas); padding:80px 0; overflow:hidden; }
.voices .label,.voices h2{ text-align:center; }
.marquee{ display:flex; gap:22px; width:max-content; animation:scroll 46s linear infinite; margin-top:40px; }
.voices:hover .marquee{ animation-play-state:paused; }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){ .marquee{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }
.quote{ flex-shrink:0; width:330px; background:var(--paper); border:1px solid rgba(45,95,95,.14); border-radius:20px; padding:24px 24px 20px; }
.quote p{ font-size:1rem; color:var(--ink); line-height:1.55; }
.quote .src{ margin-top:14px; font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.voices .note{ text-align:center; margin-top:26px; font-size:.76rem; color:var(--gold); letter-spacing:.08em; }

/* trust */
.trust{ background:var(--paper); padding:70px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media(max-width:820px){ .trust-grid{grid-template-columns:1fr;} }
.trust-item{ border-left:3px solid var(--teal); padding-left:20px; }
.trust-item h4{ font-size:.95rem; font-weight:600; color:var(--teal); margin-bottom:6px; }
.trust-item p{ font-size:.88rem; color:#5c5850; }

/* mission */
.mission{ background:var(--night); color:var(--canvas); text-align:center; }
.mission h2{ color:var(--canvas); max-width:820px; margin:0 auto; }

/* fleet strip */
.fleet{ background:var(--paper); padding:54px 0; border-top:1px solid rgba(45,95,95,.1); }
.fleet-inner{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.fleet p{ max-width:640px; color:#57534a; }
.fleet h4{ font-size:1.15rem; font-weight:600; color:var(--teal); margin-bottom:6px; }

/* footer */
footer{ background:var(--teal-dark); color:rgba(244,228,188,.85); padding:80px 0 36px; }
.foot-cta{ text-align:center; margin-bottom:56px; }
.foot-cta h2{ color:var(--canvas); }
.foot-cta .btn-row{ display:flex; gap:14px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.foot-badge{ display:flex; align-items:center; justify-content:center; margin-bottom:44px; }
.el-badge{ width:160px; display:block; opacity:.85; transition:opacity .2s; }
.el-badge:hover{ opacity:1; }
.foot-grid{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; border-top:1px solid rgba(244,228,188,.15); padding-top:34px; font-size:.82rem; }
.foot-grid a{ color:rgba(244,228,188,.7); margin-right:20px; }
.foot-grid a:hover{ color:var(--canvas); }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-symbol{ height:34px; width:auto; background:var(--canvas-soft); border-radius:9px; padding:4px; }
.foot-brand .word{ font-size:1.15rem; color:var(--canvas); letter-spacing:.04em; }
.foot-tag{ font-size:.82rem; color:rgba(244,228,188,.6); font-style:italic; }

/* drawers */
.veil{ position:fixed; inset:0; background:rgba(20,40,40,.5); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.veil.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--paper); z-index:210;
  transform:translateX(105%); transition:transform .35s cubic-bezier(.2,.8,.25,1);
  padding:34px 32px; overflow-y:auto;
}
.drawer.open{ transform:none; }
@media(max-width:560px){
  .drawer{ top:auto; height:88vh; width:100%; border-radius:24px 24px 0 0; transform:translateY(105%); }
  .drawer.open{ transform:none; }
}
.drawer .close-x{ background:none; border:0; font-size:1.5rem; color:var(--gray); cursor:pointer; position:absolute; top:18px; right:20px; }
.drawer h3{ font-size:1.4rem; font-weight:600; color:var(--teal); margin-bottom:8px; padding-right:30px; }
.drawer .intro{ font-size:.88rem; color:#5c5850; margin-bottom:22px; }
.drawer label{ display:block; font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin:16px 0 6px; }
.drawer input, .drawer select, .drawer textarea{
  width:100%; border:1.5px solid rgba(45,95,95,.25); border-radius:12px; padding:12px 14px; font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff;
}
.drawer input:focus,.drawer select:focus,.drawer textarea:focus{ outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.drawer .row2{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.drawer .row2 span{ color:var(--gray); }
.drawer .submit{ width:100%; margin-top:26px; padding:15px; }
.drawer .micro{ font-size:.72rem; color:var(--gold); margin-top:6px; }
.drawer .success{ display:none; text-align:center; padding:60px 10px; }
.drawer .success h4{ color:var(--teal); font-size:1.2rem; font-weight:600; margin-bottom:8px; }
.drawer .success p{ color:#5c5850; font-size:.9rem; }
.drawer.sent form{ display:none; }
.drawer.sent .success{ display:block; }
.hidden-field{ display:none; }
.form-error{ font-size:.82rem; color:var(--red); margin-top:14px; }

/* legal pages */
.legal{ background:var(--paper); padding:70px 0 90px; }
.legal .container{ max-width:760px; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:8px; }
.legal .updated{ font-size:.8rem; color:var(--gray); margin-bottom:36px; }
.legal h2{ font-size:1.3rem; font-weight:600; margin:36px 0 10px; }
.legal p, .legal li{ font-size:.95rem; color:#4a463f; }
.legal ul{ padding-left:22px; margin:8px 0; }
.legal li{ margin-bottom:6px; }
.back-link{ display:inline-block; margin-top:40px; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }