/* ---------- Theme ---------- */
:root{
  --bg:#080f1f;
  --text:#e7ecf4;
  --muted:#a7b3c8;
  --brand:#1976f2;
  --brand-2:#6aa8ff;
  --accent:#7fb5ff;
  --card:rgba(15,23,42,.6);
  --border:1px solid rgba(255,255,255,.10);
  --ring:0 0 0 3px rgba(25,118,242,.35);
  --shadow:0 20px 60px rgba(0,0,0,.5);
  --radius:16px;
  --maxw:1180px;
  --gutter: clamp(16px, 4vw, 22px);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
main { flex: 1; }
html, body { height: 100%; margin: 0; display: flex; flex-direction: column; }
html{ scroll-behavior:smooth }
body{
  font-family:'Inter', ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:#080f1f;
  line-height:1.6;
  position: relative;
}
img{ max-width:100%; height:auto; display:block; }

body::before{
  content:"";
  position: fixed;
  top:-220px; left:-25%; right:-25%;
  height:560px;
  background: radial-gradient(closest-side, rgba(25,118,242,.22), transparent 70%);
  filter: blur(74px);
  z-index:0;
  pointer-events:none;
}

h1,h2,h3{ font-family:'Poppins', ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
section{
  position:relative;
  padding-top:28px;
  padding-bottom:28px;
  overflow:visible;        
}
header.simple-header{ position: relative; z-index: 3000; }
main, footer{ position: relative; z-index: 1; }

/* ---------- Navbar ---------- */
header.simple-header{
  position: static;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: 25px;
}
header.simple-header > .container{ padding-left:0; padding-right:0; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:0; position:relative; }
.brand img{ height:38px; display:block }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:12px;
  border:var(--border);
  background:#0f172a;
  color:#eaf1ff;
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.25); box-shadow:0 18px 40px rgba(0,0,0,.55) }
.btn.primary{ background:linear-gradient(90deg, var(--brand), var(--brand-2)); border:none; font-weight:700 }
.btn.secondary{ background:#0f172a }
.btn.linkedin{ background:#0a66c2; color:#fff; }
.btn.linkedin:hover{ background:#084a90; }
.btn.kofi{ background:#29abe0; color:#fff; }
.btn.kofi:hover{ background:#1f87b3; }

/* ---------- Mobile nav ---------- */
.nav-links { display:flex; gap:10px; }
.nav-toggle{
  display:none;
  appearance:none;
  border:var(--border);
  background:#0f172a;
  color:var(--text);
  border-radius:12px;
  width:42px; height:42px;
  place-items:center;
  box-shadow:var(--shadow);
}
.nav-toggle:focus-visible{ outline:none; box-shadow:var(--ring); }
.nav-popover{
  position: fixed;
  top: 64px;            
  left: auto;
  right: auto;
  width: fit-content;           
  width: -moz-fit-content;      
  max-width: calc(100vw - (var(--gutter) * 2));
  padding: 12px;                 
  border-radius: 12px;
  border: var(--border);
  background: linear-gradient(180deg, rgba(24,35,63,.95), rgba(13,20,38,.98));
  box-shadow: var(--shadow);
  display: none;
  z-index: 4000;
  pointer-events: auto;
}
.nav-popover.open{ display:block; }
.nav-popover .menu-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;            
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.nav-popover .menu-link:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.nav-popover .menu-link.primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff;
}

@media (max-width: 820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
}

/* ---------- Section headers ---------- */
.section-head{ display:grid; gap:4px; margin-bottom:12px }
.section-head h2{ margin:0; font-size:clamp(28px, 4.8vw, 42px); letter-spacing:-.01em }
.section-lead{ color:#c8d2df; margin:0 }

/* ---------- HERO ---------- */
.hero{ padding:20px 0 18px; position:relative }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center }
.eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#c9d6ee }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 9px; border-radius:999px; border:var(--border); background:rgba(255,255,255,.05); font-weight:600 }
.pill-ghost{ background:rgba(127,181,255,.12); border:1px solid rgba(127,181,255,.35); color:#dfeaff }
h1{ font-size:clamp(34px, 6vw, 56px); line-height:1.25; margin:10px 0 }
.lead{ color:#cfd8e6; margin:0 0 12px; font-size:18px }
.cta-row{ display:flex; gap:10px }
.hero-visual{ padding:0; position:relative; z-index:1 }
.hero-img{ display:block; width:100%; height:auto; max-height:520px; object-fit:contain; border:none }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, rgba(24,35,63,.6), rgba(13,20,38,.85));
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.55); border-color:rgba(255,255,255,.18) }
.glass{ backdrop-filter:blur(10px) }

/* ---------- Pilot banner ---------- */
.pilot-banner{ padding:10px 0 20px; overflow:visible }
.pilot-card{
  position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:20px 18px; border:none; border-radius:16px;
  background:linear-gradient(180deg, rgba(5,70,22,.55), rgba(5,70,22,.42));
  box-shadow:0 28px 48px -16px rgba(0,0,0,.70), 0 10px 28px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(127,181,255,.10)
}
.pilot-badge{ display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:999px; background:linear-gradient(135deg, #0d5e2d, #107d38); color:#d4d4d4; font-weight:800; font-size:16px; letter-spacing:.04em }
.pilot-text{ font-size:16px }

/* ---------- Apps ---------- */
.app-row{ display:flex; align-items:stretch; gap:28px; margin:28px 0; }
.app-row .app-copy{
  flex: 1 1 38%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px;
}
.app-row .app-media{ flex: 1 1 62%; }
.app-media.media-fill{
  padding:0;
  position:relative;
  overflow:hidden;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
.app-media.media-fill.glass{ backdrop-filter:none !important; }
.carousel-frame{ position:relative; border-radius:var(--radius); overflow:hidden; background:none; border:none; box-shadow:none; }
.swiper{ width:100%; height:100% }
.swiper-slide{ display:grid; place-items:center; background:transparent }
.swiper-slide img{ width:100%; height:auto; object-fit:contain; max-height:520px; }
.swiper-button-prev, .swiper-button-next{
  color:#e7ecf4;
  width:38px; height:38px;
  background:rgba(14,22,40,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  backdrop-filter: blur(6px);
}
.swiper-button-prev::after, .swiper-button-next::after{ font-size:16px; }
.swiper-pagination-bullet{ background:#cfe0ff; opacity:.4; }
.swiper-pagination-bullet-active{ opacity:1 }
.app-copy h3{ margin:0 0 6px; font-size:clamp(22px, 3.5vw, 26px) }
.bullets{ list-style:none; padding:0; margin:8px 0 0 }
.bullets li{ display:flex; gap:8px; align-items:flex-start; margin:6px 0 }
.tick{ color:#22c55e; font-size:15px; margin-right:6px }
.chips{ display:flex; gap:8px; margin-top:20px; flex-wrap:wrap }
.chip{ padding:6px 10px; border-radius:999px; border:1px solid rgba(127,181,255,.35); background:rgba(127,181,255,.12); font-size:12px }

/* ---------- Together flow ---------- */
.flow.three-panels{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px }
.panel{ padding:clamp(22px, 3vw, 30px); text-align:left }
.panel h3{ margin-top:6px; margin-bottom:8px; font-size:clamp(20px,3vw,24px); font-weight:700 }
.panel p{ margin:0; font-size:15px; line-height:1.5; color:#d4dbea }
.panel-icon{ font-size:26px; color:var(--brand); margin-bottom:8px }
@media (max-width:960px){ .flow.three-panels{ grid-template-columns:1fr } }

/* ---------- Responsive ---------- */
@media (max-width:1060px){ .swiper-slide img{ max-height:420px; } }
@media (max-width:800px){
  .app-row{ flex-direction:column }
  .app-row.reverse{ flex-direction:column }
  .app-row .app-media, .app-row .app-copy{ flex:1 1 auto }
}
@media (max-width:640px){ .swiper-slide img{ max-height:340px; } }
@media (max-width:560px){ .hero-img{ max-height: 42vh; } }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:1fr; gap:12px; }
details.fancy{
  position:relative;
  border:1px solid rgba(127,181,255,.28);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(24,35,63,.6), rgba(13,20,38,.85));
  overflow:hidden;
}
details.fancy summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.01em;
}
details.fancy summary::-webkit-details-marker{ display:none; }
details.fancy summary > span:nth-child(2){ flex:1; }
.faq-badge{ font-size:18px; color:var(--brand-2); margin-right:4px; flex:0 0 auto; }
.faq-arrow{ font-size:14px; color:#cfd8e6; transition:transform .25s ease; }
details.fancy[open] .faq-arrow{ transform: rotate(180deg); }
details.fancy > div{ padding:0 16px 14px 16px; color:#d5deec; }
.faq details ul{ margin:10px 0 0; padding-left:0; list-style:none; }
.faq details ul li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin:6px 0;
}
.faq details ul li::before{
  content:"";
  display:inline-block;
  width:16px; height:16px; margin-top:2px; flex:0 0 auto;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2322c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / 16px 16px;
}
details.fancy:focus-within{ box-shadow: var(--ring); }

/* ---------- Contact card ---------- */
.contact-simple{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:22px;
  padding:24px 28px;
  align-items:center;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(24,35,63,.6), rgba(13,20,38,.85));
  border:var(--border);
  box-shadow: var(--shadow);
}

.contact-info h3{ margin:0 0 10px; }
.contact-info p{ margin:0; color:#cfd8e6; }

.contact-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;       
  justify-self:center;
  width:100%;
  margin-top:0;
}

.contact-actions .btn{
  width:100%;
  justify-content:center;
  font-weight:600;
  font-size:15px;
}

.contact-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;                 
  max-width:560px;            
  margin:0 auto;
  align-items:stretch;
}

@media (max-width:800px){
  .contact-simple{
    grid-template-columns:1fr;
    text-align:center;
  }
  .contact-actions{
    align-items:stretch;      
  }
  .contact-row{
    flex-direction:column;    
    width:100%;
  }
}

/* ---------- Downloads ---------- */
.zone-card{ padding:24px; margin-bottom:16px; }
.zone-row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:16px 24px;
}
.zone-title{ margin:0; line-height:1.2; font-weight:700; }
.zone-title .op{ opacity:.8; font-weight:600; }
.zone-desc{ margin:8px 0 0; color:var(--muted); }
.btn.btn-lg{ padding:12px 16px; font-size:0.95rem; border-radius: calc(var(--radius) - 4px); }
@media (max-width:820px){
  .zone-row{ grid-template-columns:1fr; align-items:flex-start; }
}

/* ---------- Actions (Downloads & Contact) ---------- */
.zone-actions{
  display:flex;
  flex-wrap:wrap;               
  gap:12px;
  align-items:center;
  justify-content:flex-end;     
}
.zone-actions .btn{
  width:auto;                   
  justify-content:center;
}

@media (max-width:820px){
  .zone-actions{
    flex-direction:column;      
    align-items:stretch;
  }
  .zone-actions .btn{
    width:100%;
    max-width:420px;
  }
}

/* ---------- About & Social ---------- */
.about-social{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:18px;
}

/* ---------- Footer ---------- */
footer{
  border-top: var(--border);
  background: rgba(255,255,255,.02);
  padding-top: 24px;
  padding-bottom: 24px;
  margin-top: 50px;
  text-align:center;
}
footer p{ margin:6px 0; color:#cfd8e6; font-size:15px; line-height:1.4; }
footer a{ color: var(--accent); text-decoration:none; }
footer a:hover{ text-decoration:underline; }
footer .footnote{ font-size:13px; color:#93a3b8; margin-top:8px; }
.footer-social{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin:6px 0 8px;
  opacity:0.95;
}
.footer-social .dot{ opacity:0.5; }
.footer-social .social-link{
  text-decoration:none;
  color:var(--text);
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.footer-social .social-link:hover{ text-decoration:underline; }