/*
Theme Name: TheLaunchWise
Theme URI: https://thelaunchwise.com
Author: TheLaunchWise
Author URI: https://thelaunchwise.com
Description: Official TheLaunchWise landing page theme — mobile apps, web platforms & AWS cloud.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: thelaunchwise
*/

:root {
  --ink: #0a0e17;
  --ink-2: #141b2b;
  --paper: #f4f1ea;
  --paper-2: #ece7db;
  --amber: #ff7a18;
  --amber-deep: #e85d04;
  --sky: #3da9fc;
  --line: rgba(255, 255, 255, 0.08);
  --muted: #8a93a6;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Sora', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: var(--body); background: var(--ink); color: var(--paper); overflow-x: hidden; line-height: 1.6 }
::selection { background: var(--amber); color: var(--ink) }
a { color: inherit; text-decoration: none }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px }

/* ---------- Atmospheric background ---------- */
.bg-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow { position: fixed; border-radius: 50%; filter: blur(120px); z-index: 0; pointer-events: none }
.glow-1 { width: 520px; height: 520px; background: rgba(255,122,24,.18); top: -160px; right: -120px }
.glow-2 { width: 480px; height: 480px; background: rgba(61,169,252,.14); bottom: 10%; left: -180px }

/* ---------- Nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(14px); background: rgba(10,14,23,.65);
  border-bottom: 1px solid var(--line); transition: padding .3s
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px }
.logo { font-family: var(--display); font-weight: 900; font-size: 1.45rem; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px }
.logo-img { height: 70px; width: auto; border-radius: 6px; mix-blend-mode: screen }
.nav-links { display: flex; gap: 34px; align-items: center; font-size: .92rem; font-weight: 600 }
.nav-links a { color: var(--muted); transition: color .2s }
.nav-links a:hover { color: var(--paper) }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .92rem; padding: 13px 24px; border-radius: 100px; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s }
.btn-primary { background: linear-gradient(135deg,var(--amber),var(--amber-deep)); color: var(--ink); box-shadow: 0 8px 28px rgba(255,122,24,.35) }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,122,24,.5) }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--paper) }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber) }
.btn-dark { background: var(--ink); color: var(--paper); box-shadow: 0 12px 34px rgba(10,14,23,.35) }
.btn-dark:hover { transform: translateY(-2px) }

/* ---------- Hero ---------- */
header { position: relative; z-index: 2; padding: 170px 0 90px }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255,122,24,.3); padding: 8px 16px; border-radius: 100px; margin-bottom: 30px }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: pulse 2s infinite }

@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }

h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.8rem,6.5vw,5.2rem); line-height: 1.02; letter-spacing: -1.5px; max-width: 18ch }
h1 .accent { font-style: italic; color: var(--amber); position: relative }
h1 .accent::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 100%; height: 10px; background: rgba(255,122,24,.22); z-index: -1; transform: skew(-12deg); animation: underline-pulse 3s ease-in-out infinite }
@keyframes underline-pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }

.lede { font-size: 1.18rem; color: var(--muted); max-width: 54ch; margin: 30px 0 40px; line-height: 1.7 }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center }
.hero-meta { display: flex; gap: 34px; margin-top: 56px; flex-wrap: wrap }
.hero-meta .stat .num { font-family: var(--display); font-weight: 900; font-size: 2.1rem; color: var(--paper) }
.hero-meta .stat .lbl { font-size: .82rem; color: var(--muted); font-weight: 600 }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(24px); animation: rise .9s forwards }
@keyframes rise { to { opacity:1; transform:none } }
.d1 { animation-delay: .05s }
.d2 { animation-delay: .18s }
.d3 { animation-delay: .31s }
.d4 { animation-delay: .44s }
.d5 { animation-delay: .57s }

/* ---------- Marquee ---------- */
.marquee { position: relative; z-index: 2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; overflow: hidden; background: rgba(255,255,255,.015) }
.marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: scroll 28s linear infinite; width: max-content }
.marquee-track span { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 60px }
.marquee-track span::after { content: "◆"; color: var(--amber); font-size: .7rem }
@keyframes scroll { to { transform: translateX(-50%) } }

/* ---------- Sections ---------- */
section { position: relative; z-index: 2; padding: 100px 0 }
.sec-head { margin-bottom: 60px; max-width: 60ch }
.sec-tag { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px }
h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem,4.5vw,3.4rem); line-height: 1.05; letter-spacing: -1px }
.sec-sub { color: var(--muted); font-size: 1.08rem; margin-top: 18px; max-width: 52ch }

/* ---------- Services Grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px }
@media(max-width:780px) { .grid { grid-template-columns: 1fr } }

.card { background: linear-gradient(160deg,var(--ink-2),rgba(20,27,43,.4)); border: 1px solid var(--line); border-radius: 22px; padding: 38px 34px; position: relative; overflow: hidden; transition: transform .35s, border-color .35s }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,122,24,.1),transparent 60%); opacity: 0; transition: opacity .4s }
.card:hover { transform: translateY(-6px); border-color: rgba(255,122,24,.35) }
.card:hover::before { opacity: 1 }
.card .ic { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,122,24,.12); display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(255,122,24,.2) }
.card .ic svg { width: 26px; height: 26px; stroke: var(--amber); fill: none; stroke-width: 1.8 }
.card h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin-bottom: 12px }
.card p { color: var(--muted); font-size: .98rem }
.card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px }
.card .tags span { font-size: .74rem; font-weight: 600; color: var(--paper); background: rgba(255,255,255,.05); padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line) }
.card.wide { grid-column: 1/-1 }

/* ---------- Portfolio ---------- */
.port-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px }
@media(max-width:960px) { .port-grid { grid-template-columns: 1fr 1fr } }
@media(max-width:600px) { .port-grid { grid-template-columns: 1fr } }

.port-card { background: linear-gradient(160deg,var(--ink-2),rgba(20,27,43,.4)); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: transform .35s, border-color .35s; display: flex; flex-direction: column }
.port-card:hover { transform: translateY(-6px); border-color: rgba(255,122,24,.35) }
.port-thumb { width: 100%; aspect-ratio: 16/9; background: var(--ink-2); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.6rem; font-weight: 900; letter-spacing: -.5px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line) }
.port-thumb .overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,122,24,.18),rgba(61,169,252,.12)) }
.port-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%); background-size: 200% 100%; animation: shimmer 2.8s linear infinite }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.port-body { padding: 26px 28px 28px; flex: 1; display: flex; flex-direction: column; gap: 10px }
.port-body h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 700 }
.port-body p { color: var(--muted); font-size: .94rem; flex: 1 }
.port-body .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px }
.port-body .tags span { font-size: .74rem; font-weight: 600; color: var(--paper); background: rgba(255,255,255,.05); padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line) }
.port-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .86rem; font-weight: 700; color: var(--sky); transition: color .2s }
.port-link:hover { color: var(--amber) }
.port-footer { margin-top: 48px; text-align: center }

.store-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px }
.store-btn { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--paper); transition: border-color .2s, background .2s; white-space: nowrap }
.store-btn:hover { border-color: var(--amber); background: rgba(255,122,24,.08); color: var(--amber) }
.store-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0 }
.store-btn.aws { border-color: rgba(61,169,252,.3); color: var(--sky) }
.store-btn.aws:hover { border-color: var(--sky); background: rgba(61,169,252,.08) }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px }
@media(max-width:780px) { .steps { grid-template-columns: 1fr 1fr } }
.step { border-top: 2px solid var(--amber); padding-top: 22px }
.step .n { font-family: var(--display); font-weight: 900; font-size: 2.4rem; color: var(--amber); line-height: 1 }
.step h4 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 8px }
.step p { color: var(--muted); font-size: .9rem }

/* ---------- Why band ---------- */
.band { background: linear-gradient(135deg,var(--ink-2),rgba(20,27,43,.3)); border: 1px solid var(--line); border-radius: 28px; padding: 60px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center }
@media(max-width:780px) { .band { grid-template-columns: 1fr; padding: 38px } }
.why-list { display: flex; flex-direction: column; gap: 22px }
.why-item { display: flex; gap: 16px; align-items: flex-start }
.why-item .chk { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: rgba(61,169,252,.15); display: grid; place-items: center; color: var(--sky); font-weight: 800; font-size: .85rem; border: 1px solid rgba(61,169,252,.3) }
.why-item h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: 3px }
.why-item p { color: var(--muted); font-size: .92rem }

/* ---------- CTA Box ---------- */
.cta-box { text-align: center; background: linear-gradient(135deg,var(--amber),var(--amber-deep)); border-radius: 32px; padding: 80px 40px; color: var(--ink); position: relative; overflow: hidden }
.cta-box::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(10,14,23,0.06)' stroke-width='1'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0 }
.cta-box .btn-dark { position: relative; z-index: 2; background: var(--ink); color: var(--paper); box-shadow: 0 12px 34px rgba(10,14,23,.35) }
.cta-box .btn-dark:hover { transform: translateY(-2px) }

/* ---------- CTA box entrance ---------- */
.cta-animate {
  animation: cta-in .9s cubic-bezier(.22,1,.36,1) both;
  animation-timeline: view();
  animation-range: entry 10% entry 40%;
}
@supports not (animation-timeline: view()) {
  .cta-animate { animation: cta-fade .8s ease both }
}
@keyframes cta-in { from { opacity:0; scale:.95 } to { opacity:1; scale:1 } }
@keyframes cta-fade { from { opacity:0 } to { opacity:1 } }
.cta-box h2 { position: relative; color: var(--ink) }
.cta-box p { position: relative; font-size: 1.1rem; margin: 18px auto 36px; max-width: 46ch; color: rgba(10,14,23,.75); font-weight: 500 }
.cta-contact { position: relative; margin-top: 24px; font-weight: 700; font-size: 1.05rem }
.cta-contact a { border-bottom: 2px solid rgba(10,14,23,.3) }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s }
.modal-overlay.open { opacity: 1; pointer-events: all }
.modal { background: var(--ink-2); border: 1px solid rgba(255,122,24,.2); border-radius: 28px; padding: 48px; max-width: 660px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(28px); transition: transform .35s }
.modal-overlay.open .modal { transform: none }
.modal-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; cursor: pointer; transition: color .2s, border-color .2s; line-height: 1 }
.modal-close:hover { color: var(--paper); border-color: var(--amber) }
.modal-head { margin-bottom: 34px }
.modal-head h2 { font-size: clamp(1.5rem,3vw,2rem) }
.modal-head p { color: var(--muted); font-size: .95rem; margin-top: 10px }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
@media(max-width:560px) { .form-row { grid-template-columns: 1fr } }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px }
.form-group label { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .07em; text-transform: uppercase }
.form-group input, .form-group select, .form-group textarea { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; color: var(--paper); font-family: var(--body); font-size: .95rem; outline: none; transition: border-color .25s; width: 100% }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--amber) }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted) }
.form-group select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a93a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center }
.form-group select option { background: var(--ink-2) }
.form-group textarea { resize: vertical; min-height: 110px }
.form-status { margin-top: 14px; text-align: center; font-size: .9rem; font-weight: 600; min-height: 22px }
.form-status.ok { color: #4ade80 }
.form-status.err { color: #f87171 }

/* ---------- Page Loader ---------- */
#page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity .6s ease, visibility .6s ease }
#page-loader.hidden { opacity: 0; visibility: hidden }
.loader-logo { font-family: var(--display); font-weight: 900; font-size: 1.6rem; letter-spacing: -.5px; color: var(--paper); animation: loader-fade-in .5s ease forwards }
.loader-logo span { color: var(--amber) }
@keyframes loader-fade-in { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
.loader-bar-wrap { width: 160px; height: 3px; background: rgba(255,255,255,.08); border-radius: 100px; overflow: hidden }
.loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg,var(--amber),var(--sky)); border-radius: 100px; animation: loader-fill .9s cubic-bezier(.4,0,.2,1) .2s forwards }
@keyframes loader-fill { to { width:100% } }
.loader-dots { display: flex; gap: 8px }
.loader-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: dot-bounce .8s ease infinite }
.loader-dots span:nth-child(2) { animation-delay: .15s; background: var(--sky) }
.loader-dots span:nth-child(3) { animation-delay: .3s }
@keyframes dot-bounce { 0%,80%,100% { transform:translateY(0);opacity:.4 } 40% { transform:translateY(-8px);opacity:1 } }

/* ---------- Scroll-reveal ---------- */
.sr { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease }
.sr.sr-left { transform: translateX(-32px) }
.sr.sr-right { transform: translateX(32px) }
.sr.sr-scale { transform: scale(.93) }
.sr.visible { opacity: 1; transform: none }
.sr-d1  { transition-delay: .05s }
.sr-d2  { transition-delay: .12s }
.sr-d3  { transition-delay: .19s }
.sr-d4  { transition-delay: .26s }
.sr-d5  { transition-delay: .33s }

/* ---------- Glow float ---------- */
.glow-1 { animation: float-1 9s ease-in-out infinite }
.glow-2 { animation: float-2 11s ease-in-out infinite }
@keyframes float-1 { 0%,100% { transform:translate(0,0) scale(1) } 33% { transform:translate(-30px,20px) scale(1.06) } 66% { transform:translate(20px,-18px) scale(.96) } }
@keyframes float-2 { 0%,100% { transform:translate(0,0) scale(1) } 40% { transform:translate(24px,-28px) scale(1.08) } 70% { transform:translate(-18px,16px) scale(.95) } }

/* ---------- Hamburger ---------- */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform .3s, opacity .3s }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity: 0 }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: rgba(10,14,23,.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); z-index: 49; padding: 24px 28px 32px; flex-direction: column; gap: 20px }
.mobile-menu.open { display: flex }
.mobile-menu a { font-size: 1.1rem; font-weight: 600; color: var(--paper); padding: 10px 0; border-bottom: 1px solid var(--line) }
.mobile-menu a:last-child { border-bottom: none }
.mobile-menu .btn-primary { margin-top: 8px; justify-content: center; border-radius: 100px }

/* ---------- Footer ---------- */
footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 54px 0 40px; margin-top: 40px }
.foot { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start }
.foot .col h5 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px }
.foot .col a { display: block; color: var(--paper); font-size: .94rem; margin-bottom: 9px; opacity: .8; transition: opacity .2s }
.foot .col a:hover { opacity: 1; color: var(--amber) }
.foot-bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .85rem }

/* ---------- Responsive ---------- */
@media(max-width:780px) {
  .hamburger { display: flex }
  .nav-links { display: none }
  .nav-book-btn { display: none }
  .nav-inner { height: 64px }
  .logo-img { height: 48px }
  .logo { font-size: 1.15rem }
  header { padding: 110px 0 60px }
  h1 { font-size: clamp(2.2rem,8vw,3.2rem); letter-spacing: -1px }
  .lede { font-size: 1rem }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 12px }
  .hero-cta .btn { width: 100%; justify-content: center }
  .hero-meta { gap: 20px; margin-top: 40px }
  .hero-meta .stat .num { font-size: 1.5rem }
  section { padding: 64px 0 }
  .sec-head { margin-bottom: 40px }
  h2 { font-size: clamp(1.7rem,6vw,2.4rem) }
  .band { padding: 32px 24px; gap: 32px }
  .cta-box { padding: 48px 24px; border-radius: 20px }
  .cta-box div[style] { flex-direction: column; align-items: center }
  .cta-box .btn { width: 100%; justify-content: center }
  .modal { padding: 28px 20px }
  .form-row { grid-template-columns: 1fr }
  .steps { grid-template-columns: 1fr 1fr; gap: 24px }
  .port-grid { grid-template-columns: 1fr }
}
@media(max-width:480px) {
  .wrap { padding: 0 18px }
  .steps { grid-template-columns: 1fr }
  .hero-meta { flex-direction: column; gap: 16px }
  .foot { flex-direction: column; gap: 28px }
  .foot-bottom { flex-direction: column; text-align: center; gap: 6px }
  .eyebrow { font-size: .7rem; padding: 7px 13px }
  .store-btns { flex-direction: column }
  .store-btn { justify-content: center }
}