/* ============================================================
   alwize — marketing that runs itself
   Premium static site. Brand-exact.
   ============================================================ */

:root{
  --ink:#0E3A46;
  --ink-2:#0A2C36;        /* darker ink for footer */
  --teal:#12808E;
  --aqua:#2DD4BF;
  --aqua-ink:#0E3A46;     /* text on aqua */
  --gold:#F2B33D;
  --graphite:#14232B;
  --slate:#647C85;
  --mist:#F3F6F7;
  --white:#FFFFFF;
  --line:#E2E8EA;

  --maxw:1180px;
  --pad:clamp(22px,5vw,40px);
  --sect:clamp(76px,11vw,130px);
  --radius:20px;

  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--white);
  line-height:1.65;
  font-size:clamp(16px,1.15vw,18px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;line-height:1.05;text-transform:lowercase}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.eyebrow{
  font-family:var(--font-head);font-weight:500;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
}
.section-dark .eyebrow{color:var(--aqua)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--slate);max-width:60ch}
.section-dark .lead{color:#C7D6DA}

h2.title{font-size:clamp(2rem,4.6vw,3.15rem);margin:.5rem 0 1rem}
h3{font-size:1.28rem;letter-spacing:-.01em}

/* backgrounds / rhythm */
.section-dark{background:var(--ink);color:var(--white)}
.section-mist{background:var(--mist)}
.section-white{background:var(--white)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-head);font-weight:500;font-size:.98rem;
  padding:.86em 1.5em;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--aqua);color:var(--aqua-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(45,212,191,.6)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:var(--white)}
.btn-ghost:hover{border-color:var(--aqua);color:var(--aqua);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(14,58,70,.5)}

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex;align-items:center;gap:.42em;font-family:var(--font-head);
  font-weight:600;font-size:1.32rem;letter-spacing:-.02em;text-transform:lowercase}
.wordmark .dot{width:.55em;height:.55em;border-radius:50%;background:var(--aqua);flex:none;margin-top:.12em}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.nav .wordmark{color:var(--white)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.95rem;color:rgba(255,255,255,.82);transition:color .18s}
.nav-links a:hover{color:var(--white)}
.nav.scrolled{background:rgba(10,44,54,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-cta{padding:.62em 1.15em;font-size:.92rem}
.nav-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;
  padding-block:clamp(140px,20vh,220px) clamp(90px,13vw,150px)}
.hero::before{ /* dot grid */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.2px);
  background-size:26px 26px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 78%);
}
.hero::after{ /* aqua glow */
  content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:min(760px,90vw);height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,191,.20),transparent 62%);filter:blur(20px);pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.1rem);margin:1.1rem 0 1.3rem;max-width:16ch}
.hero .lead{color:#C7D6DA;max-width:56ch;margin-inline:auto;font-size:clamp(1.08rem,1.7vw,1.35rem)}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}

/* ---------- generic content ---------- */
.stat{font-family:var(--font-head);font-weight:600;color:var(--ink);
  font-size:clamp(3rem,9vw,6rem);letter-spacing:-.03em;line-height:1}
.section-dark .stat{color:var(--white)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:3rem}
.step{display:flex;gap:1.1rem;align-items:flex-start}
.step .num{font-family:var(--font-head);font-weight:600;color:var(--teal);font-size:1.05rem;
  border:1.6px solid var(--teal);width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;flex:none}
.section-dark .step .num{color:var(--aqua);border-color:var(--aqua)}
.step h3{margin-bottom:.25rem}
.step p{color:var(--slate);font-size:.98rem}
.section-dark .step p{color:#AEC2C7}

/* included grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.6vw,2rem);margin-top:3rem}
.feat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:1.6rem 1.5rem;transition:transform .2s,border-color .2s,background .2s}
.feat:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5);background:rgba(255,255,255,.06)}
.feat .ico{color:var(--aqua);margin-bottom:.9rem}
.feat h3{font-size:1.12rem;margin-bottom:.3rem}
.feat p{color:#AEC2C7;font-size:.93rem}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:3rem;align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.7rem;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(14,58,70,.35)}
.card.feature{border:2px solid var(--aqua);box-shadow:0 24px 50px -26px rgba(14,58,70,.42)}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--aqua);
  color:var(--aqua-ink);font-family:var(--font-head);font-weight:500;font-size:.72rem;
  letter-spacing:.06em;padding:.36em 1em;border-radius:100px;text-transform:lowercase}
.card .tier{font-family:var(--font-head);font-weight:600;color:var(--teal);font-size:1.1rem;text-transform:lowercase}
.card .price{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:2.6rem;letter-spacing:-.02em;margin:.2rem 0}
.card .price span{font-family:var(--font-body);font-weight:400;font-size:1rem;color:var(--slate)}
.card .best{color:var(--slate);font-size:.86rem;margin-bottom:1.2rem}
.card ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:1.1rem 0 1.6rem;flex:1}
.card li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;color:var(--graphite)}
.card li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aqua);flex:none;margin-top:.55em}
.card .btn{justify-content:center;width:100%}
.enterprise{margin-top:1.3rem;background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:1.5rem 2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.enterprise .tier{color:var(--aqua)}
.enterprise p{color:#C7D6DA;font-size:.95rem}
.fineprint{text-align:center;color:var(--slate);font-size:.85rem;margin-top:1.6rem}

/* founding band */
.founding .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.founding .limited{color:var(--gold);font-family:var(--font-head);font-weight:500;letter-spacing:.02em;margin-top:.6rem}

/* two-col */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-img img{width:100%;border-radius:20px;box-shadow:0 26px 54px -28px rgba(14,58,70,.42)}

/* faq */
.faq{max-width:820px;margin:2.5rem auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:500;font-size:1.08rem;color:var(--ink);
  padding:1.35rem 2.5rem 1.35rem 0;position:relative;text-transform:lowercase}
.faq-q::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  color:var(--teal);font-size:1.5rem;transition:transform .25s}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{color:var(--slate);padding:0 0 1.35rem;max-width:70ch}

/* contact */
.contact .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.form{margin-top:2.4rem;width:100%;max-width:620px;text-align:left;display:grid;gap:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{font-size:.82rem;color:#C7D6DA;font-family:var(--font-head);font-weight:500;display:block;margin-bottom:.35rem}
.form input,.form textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:.85em 1em;color:#fff;font-family:var(--font-body);font-size:.98rem;transition:border-color .18s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--aqua)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-content:center;margin-top:.4rem}
.form-status{font-size:.92rem;min-height:1.2em}
.form-status.ok{color:var(--aqua)}
.form-status.err{color:var(--gold)}
.contact .email{margin-top:1.4rem;color:#C7D6DA}
.contact .email a{color:var(--aqua)}

/* footer */
.footer{background:var(--ink-2);color:#fff;padding-block:clamp(48px,7vw,72px)}
.footer .top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer .wordmark{color:#fff;margin-bottom:.6rem}
.footer .tagline{color:#8FA6AC;font-size:.95rem}
.footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer nav a{color:#C7D6DA;font-size:.95rem}
.footer nav a:hover{color:var(--aqua)}
.footer .meta{display:flex;flex-wrap:wrap;gap:1.4rem;color:#8FA6AC;font-size:.9rem;
  margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.09);justify-content:space-between}
.footer .meta a:hover{color:var(--aqua)}

/* ---------- eyebrow dot motif (echoes the logo dot) ---------- */
.eyebrow::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--aqua);margin-right:.55em;vertical-align:middle;transform:translateY(-1px)}

/* ---------- our work ---------- */
.project{margin-top:2.8rem;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.12)}
.project:first-of-type{border-top:0;padding-top:0;margin-top:2.6rem}
.project-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;justify-content:space-between}
.project-head h3{font-size:1.5rem}
.project-tags{font-family:var(--font-head);font-weight:500;font-size:.82rem;color:var(--aqua);text-transform:lowercase}
.project-desc{color:#AEC2C7;margin-top:.45rem;max-width:62ch}
.video-row{display:flex;gap:1rem;margin-top:1.6rem;flex-wrap:wrap}
.clip{width:clamp(170px,40%,250px);aspect-ratio:9/16;border-radius:16px;object-fit:cover;
  background:#0A2C36;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.gallery{column-count:3;column-gap:1rem;margin-top:1.6rem}
.gallery img{width:100%;margin:0 0 1rem;border-radius:14px;background:#0A2C36;display:block;
  break-inside:avoid;cursor:zoom-in;transition:transform .2s,box-shadow .2s}
.gallery img:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(0,0,0,.6)}
.gallery-label{font-family:var(--font-head);font-weight:500;font-size:.8rem;color:var(--aqua);
  text-transform:lowercase;letter-spacing:.02em;margin:1.5rem 0 .2rem}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,44,54,.93);display:none;align-items:center;
  justify-content:center;z-index:100;padding:5vw;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.site-card{display:block;margin-top:1.6rem;border-radius:16px;overflow:hidden;
  transition:transform .2s,box-shadow .2s;max-width:540px}
.site-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -24px rgba(0,0,0,.6)}
.site-card-inner{background:#174B3A;padding:1.8rem 2rem;display:flex;flex-direction:column;gap:.25rem}
.site-name{font-family:var(--font-head);font-weight:600;font-size:1.4rem;color:#F8F3EA}
.site-url{color:#C79B3B;font-size:.95rem}
.site-go{color:#F8F3EA;font-family:var(--font-head);font-weight:500;font-size:.95rem;margin-top:.7rem}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .nav-links{position:fixed;inset:72px 0 auto 0;background:rgba(10,44,54,.97);backdrop-filter:blur(14px);
    flex-direction:column;gap:0;padding:1rem var(--pad) 1.6rem;transform:translateY(-120%);transition:transform .3s;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links.open{transform:none}
  .nav-links a{padding:.9rem 0;width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links .nav-cta{margin-top:.8rem;width:100%;justify-content:center}
  .nav-toggle{display:block}
  .steps,.feat-grid,.pricing,.split,.form .row{grid-template-columns:1fr}
  .card.feature{transform:none}
  .gallery{column-count:2}
}
@media(max-width:520px){
  .gallery{column-count:1}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.feat:hover,.step:hover{transform:none}
}