/* Wewe apps — shared styles. Nautical palette matching the We Boat app. */
:root{
  --navy:#0E2A47; --ocean:#14507A; --ocean-2:#1E6FA6;
  --sand:#F2BF4D; --sand-deep:#E0A92C;
  --ink:#16222E; --muted:#5B6B7A; --line:#E4EAF0;
  --bg:#F6F9FC; --card:#FFFFFF; --sky:#EAF3FB;
  --maxw:1080px; --radius:16px;
  --shadow:0 8px 30px rgba(14,42,71,.08);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--ocean-2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:18px}
.brand .dot{width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,var(--sand),var(--sand-deep)); display:inline-block}
.nav .spacer{flex:1}
.nav a.navlink{color:var(--navy); font-weight:600; font-size:15px}
.nav a.navlink:hover{color:var(--ocean-2); text-decoration:none}

/* Language selector (EN · FR) */
.langsel{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line);
  border-radius:999px; padding:3px; background:#fff}
.langsel a{font-size:13px; font-weight:700; color:var(--muted); padding:3px 9px;
  border-radius:999px; line-height:1}
.langsel a:hover{text-decoration:none; color:var(--ocean-2)}
.langsel a.on{background:var(--navy); color:#fff}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy),var(--ocean) 70%,var(--ocean-2));
  color:#fff; padding:72px 0 84px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:46px;
  background:var(--bg); clip-path:polygon(0 100%,100% 100%,100% 0,75% 60%,50% 10%,25% 60%,0 0)}
.hero h1{font-size:clamp(30px,5vw,48px); line-height:1.1; margin:.2em 0 .3em; font-weight:850}
.hero p{font-size:clamp(16px,2.4vw,20px); max-width:660px; color:#D9E6F2; margin:0 auto}
.hero .wrap{text-align:center; position:relative; z-index:2}
.eyebrow{display:inline-block; letter-spacing:.14em; text-transform:uppercase; font-size:12px;
  font-weight:700; color:var(--sand); background:rgba(242,191,77,.14);
  padding:6px 12px; border-radius:999px}

/* Buttons */
.btn{display:inline-block; font-weight:700; border-radius:12px; padding:12px 20px; cursor:pointer;
  border:1px solid transparent; transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--sand),var(--sand-deep)); color:#3a2a00;
  box-shadow:0 6px 18px rgba(224,169,44,.35)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4)}
.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* App Store badge button */
.btn-store{display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff;
  border-radius:13px; padding:10px 18px; font-weight:700}
.btn-store:hover{text-decoration:none; transform:translateY(-1px)}
.btn-store .apple{font-size:22px; line-height:1; margin-top:-2px}
.btn-store small{display:block; font-size:10px; font-weight:600; opacity:.8; letter-spacing:.04em;
  text-transform:uppercase; line-height:1.1}
.btn-store b{display:block; font-size:17px; font-weight:800; line-height:1.1}
.btn-store.disabled{background:#3a4654; cursor:default; opacity:.65; pointer-events:none}

/* Sections & cards */
section{padding:54px 0}
.section-title{font-size:clamp(22px,3.4vw,30px); font-weight:800; color:var(--navy); margin:0 0 6px}
.section-sub{color:var(--muted); margin:0 0 28px; max-width:640px}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .3em; color:var(--navy); font-size:20px}
.card .pill{font-size:12px; font-weight:700; color:var(--ocean); background:var(--sky);
  padding:4px 10px; border-radius:999px; display:inline-block; margin-bottom:8px}
.card .muted{color:var(--muted)}
.applogo{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  font-size:28px; margin-bottom:12px}
.lg-boat{background:linear-gradient(135deg,#1E6FA6,#0E2A47)}
.lg-blocks{background:linear-gradient(135deg,#7C5CFF,#3CC6C0)}
/* Real app-icon variants — rendered as proper rounded app icons */
.applogo.icon{background:none;width:56px;height:56px;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 12px rgba(14,42,71,.18); border:1px solid rgba(14,42,71,.08)}
.applogo.icon img{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block}
.hero-icon{width:88px;height:88px;border-radius:21px;object-fit:cover;display:block;
  margin:0 auto 14px; box-shadow:0 12px 34px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18)}
.soon{opacity:.7}
.badge-soon{font-size:11px;font-weight:700;color:#7a611a;background:#FBEFC9;
  padding:3px 8px;border-radius:999px;margin-left:8px}

/* Content (legal / sources) */
.doc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow); margin-top:24px}
.doc h2{color:var(--navy); margin-top:1.6em; font-size:22px}
.doc h3{color:var(--navy); margin-top:1.2em; font-size:17px}
.doc table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px}
.doc th,.doc td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{background:var(--sky); color:var(--navy)}
.doc code{background:var(--sky); padding:1px 6px; border-radius:6px; font-size:.92em}
.note{background:var(--sky); border-left:4px solid var(--ocean-2); padding:14px 16px;
  border-radius:10px; margin:18px 0; color:#22425e}
.ok{color:#1b7a3d; font-weight:700}
.lede{font-size:18px; color:var(--muted)}
.crumb{color:var(--muted); font-size:14px; margin-top:18px}

/* Screenshot gallery */
.shots{display:flex; gap:22px; overflow-x:auto; padding:10px 2px 22px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.shot{flex:0 0 auto; width:222px; scroll-snap-align:center; text-align:center}
.shot img{width:222px; height:auto; border-radius:26px; display:block;
  box-shadow:0 16px 40px rgba(14,42,71,.22); border:1px solid var(--line); background:#0E2A47}
.shot figcaption{margin-top:13px; font-size:13.5px; color:var(--muted); font-weight:600; line-height:1.45}
.shots-hint{color:var(--muted); font-size:13px; margin:-8px 0 0}

/* Highlight band */
.band{background:var(--sky); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow)}
.band h3{margin:.1em 0 .4em; color:var(--navy); font-size:21px}
.flags{font-size:15px; font-weight:700; color:var(--ocean); margin-top:6px}

/* Work-with-us — CTA band + contact form */
/* .wrap zeroes out section vertical padding, so give the CTA section its own
   breathing room above and below (longhands override the .wrap shorthand). */
.cta-section{padding-top:40px; padding-bottom:40px}
.cta-band{background:linear-gradient(160deg,var(--navy),var(--ocean) 75%,var(--ocean-2));
  color:#fff; border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);
  display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta-band h3{margin:0 0 6px; font-size:23px; color:#fff}
.cta-band p{margin:0; color:#D9E6F2; max-width:560px}
.cta-band .btn-primary{white-space:nowrap}

.form{display:grid; gap:16px; margin-top:6px; position:relative}
.form .row{display:grid; gap:16px; grid-template-columns:1fr 1fr}
@media (max-width:560px){ .form .row{grid-template-columns:1fr} }
.field{display:grid; gap:6px}
.field label{font-size:13.5px; font-weight:700; color:var(--navy)}
.field .req{color:var(--sand-deep)}
.field input,.field select,.field textarea{
  font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ocean-2); box-shadow:0 0 0 3px rgba(30,111,166,.15)}
.hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}
.cf-turnstile{margin:2px 0}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.form-status{font-size:14px; font-weight:600; min-height:1.2em; margin:0}
.form-status.ok{color:#1b7a3d}
.form-status.err{color:#b3261e}
.form-status.sending{color:var(--muted)}
.form-note{font-size:13px; color:var(--muted); margin-top:8px}
.feature-list{list-style:none; padding:0; margin:0 0 4px; display:grid; gap:10px}
.feature-list li{padding-left:28px; position:relative; color:var(--muted)}
.feature-list li::before{content:"✓"; position:absolute; left:0; top:0; color:#1b7a3d; font-weight:800}

/* Footer */
.site-footer{background:var(--navy); color:#C7D6E5; padding:40px 0; margin-top:72px}
.site-footer a{color:#fff}
.foot-grid{display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between}
.site-footer .small{font-size:13px; color:#8DA6C0; margin-top:18px}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}
@media (max-width:560px){ .nav a.navlink{display:none} .nav a.navlink.always{display:inline} }