/* =========================================================
   AtollConnected — stylesheet
   A same-island-chain courier network for the Maldives.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* -- palette -- */
  --navy-950:#0E2437;
  --navy-900:#123350;
  --navy-800:#1A4468;
  --navy-700:#245680;
  --navy-500:#4C7DA8;
  --navy-300:#9FC1DC;
  --navy-100:#E4EFF7;
  --sky-300:#7FDCF0;
  --sky-600:#1487C4;
  --red-600:#E23A4E;
  --red-700:#C72A3E;
  --white:#FFFFFF;
  --paper:#F5FAFD;
  --ink:#123350;
  --ink-muted:#5A7691;

  --radius-pill:999px;
  --radius-card:20px;
  --radius-sm:10px;
  --max:1260px;

  --shadow-card:0 24px 48px -24px rgba(14,36,55,.35);
  --shadow-soft:0 10px 24px -14px rgba(14,36,55,.25);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;}
h1,h2,h3{font-family:'Poppins',sans-serif;margin:0;line-height:1.15;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
:focus-visible{outline:2.5px solid var(--sky-600);outline-offset:2px;border-radius:4px;}

/* ---------- shared buttons / pills ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;font-family:'Inter',sans-serif;
  padding:14px 28px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn-red{background:var(--red-600);color:var(--white);box-shadow:var(--shadow-soft);}
.btn-red:hover{background:var(--red-700);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(226,58,78,.55);}
.btn-navy{background:var(--navy-700);color:var(--white);}
.btn-navy:hover{background:var(--navy-800);transform:translateY(-2px);}
.btn-block{width:100%;}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;padding:10px 20px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.pill:hover{transform:translateY(-1px);}
.pill-ghost{border-color:var(--navy-300);color:var(--navy-800);background:var(--white);}
.pill-ghost:hover{background:var(--navy-100);}
.pill-solid{background:var(--navy-700);color:var(--white);}
.pill-solid:hover{background:var(--navy-800);}
.pill-light{background:var(--navy-500);color:var(--white);}
.pill-light:hover{background:var(--navy-700);}
.pill-accent{background:var(--red-600);color:var(--white);}
.pill-accent:hover{background:var(--red-700);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  transition:transform .35s ease;
  will-change:transform;
}
.site-header.header-hidden{transform:translateY(-100%);}

.wave-banner{
  position:relative;
  height:64px;
  overflow:hidden;
  line-height:0;
}
.wave-banner svg{width:100%;height:100%;}

.nav-shell{
  background:var(--white);
  border-bottom:1px solid var(--navy-100);
}

.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 32px;
}

.brand{display:flex;align-items:center;gap:px;flex:none;}

.brand-mark{
  width:52px;height:52px;border-radius:30px;background:var(--white);
  box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.brand-mark img{width:50px;height:50px;object-fit:contain;}
.brand-name{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;
  color:var(--navy-900);letter-spacing:-.01em;white-space:nowrap;
}
.brand-name .accent{color:var(--sky-600);}

.nav-links{display:flex;align-items:center;gap:10px;}
.account-btn{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--navy-300);
  display:flex;align-items:center;justify-content:center;color:var(--navy-800);
  transition:background .15s ease, border-color .15s ease;flex:none;
}
.account-btn:hover{background:var(--navy-100);border-color:var(--navy-700);}

.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:8px;flex:none;
}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--navy-900);margin:5px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease;}

.mobile-menu{
  display:none;flex-direction:column;gap:10px;
  padding:16px 32px 24px;background:var(--white);border-bottom:1px solid var(--navy-100);
}
.mobile-menu.open{display:flex;}
.mobile-menu .pill{width:100%;}
.mobile-menu .account-btn{align-self:flex-start;}

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

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--paper) 0%, var(--white) 55%);
  padding:88px 0 100px;
}
.hero-atolls{
  position:absolute;top:-40px;right:-60px;width:60%;max-width:820px;height:auto;
  opacity:.55;
  -webkit-mask-image:linear-gradient(115deg, transparent 0%, #000 32%);
  mask-image:linear-gradient(115deg, transparent 0%, #000 32%);
  pointer-events:none;
}

.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;
}

.hero-content h1{
  font-size:clamp(32px,4.2vw,50px);color:var(--navy-900);letter-spacing:-.01em;
  max-width:600px;
}
.hero-content h1 .hl{color:var(--sky-600);}

.hero-ctas{display:flex;flex-direction:column;gap:16px;max-width:340px;margin-top:36px;}
.hero-ctas .btn{padding:18px 28px;font-size:16px;}

/* ---------- hero aside: app download + courier signup ---------- */
.hero-aside{display:flex;flex-direction:column;gap:22px;margin-top:4px;}

.app-card{
  background:var(--navy-950);color:var(--white);
  border-radius:var(--radius-card);padding:28px 30px 26px;
  box-shadow:var(--shadow-card);
}
.app-card h2{font-size:24px;margin-bottom:18px;}
.store-row{display:flex;gap:12px;flex-wrap:wrap;}
.store-badge{
  display:flex;align-items:center;gap:10px;background:var(--white);color:var(--navy-950);
  padding:9px 16px;border-radius:12px;flex:1;min-width:150px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(0,0,0,.5);}
.store-badge svg{flex:none;}
.store-text{display:flex;flex-direction:column;line-height:1.2;}
.store-text .eyebrow-sm{font-size:9.5px;letter-spacing:.03em;color:var(--ink-muted);}
.store-text .store-name{font-size:14.5px;font-weight:700;font-family:'Poppins',sans-serif;}

.courier-card{
  position:relative;
  background:rgba(228,239,247,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-card);
  padding:30px 32px;
  box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}
.courier-card p{
  font-size:19px;font-weight:600;color:var(--navy-900);margin:0;max-width:320px;
  font-family:'Poppins',sans-serif;line-height:1.35;
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-atolls{opacity:.35;width:80%;right:-30px;}
  .hero-ctas,.hero-aside{max-width:none;}
}
@media (max-width:560px){
  .store-row{flex-direction:column;}
}

/* ---------- registration page ---------- */
.register-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--paper) 0%, var(--white) 60%);
  padding:96px 0 120px;
}
.register-bg{position:absolute;inset:0;pointer-events:none;}
.register-conveyor{
  position:absolute;left:-40px;bottom:-60px;width:52%;max-width:600px;height:auto;
  opacity:.4;
  -webkit-mask-image:linear-gradient(75deg, #000 20%, transparent 78%);
  mask-image:linear-gradient(75deg, #000 20%, transparent 78%);
}

.register-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;
}

.register-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.register-mark{
  width:260px;
  height:260px;
  border-radius:32px;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.register-mark img{
  width: 275px;
  height: 275px;
  object-fit:contain;
}
.register-wordmark{font-size:clamp(24px,2.6vw,32px);color:var(--navy-900);letter-spacing:-.01em;}
.register-wordmark .accent{color:var(--sky-600);}
.register-tagline{font-size:16.5px;color:var(--ink-muted);max-width:360px;line-height:1.55;}

.register-card{
  position:relative;
  background:var(--white);
  border:1.5px solid var(--navy-300);
  border-radius:40px;
  padding:46px 50px 42px;
  box-shadow:var(--shadow-card);
}
.register-card h1{
  font-size:clamp(22px,2.4vw,28px);color:var(--navy-900);text-align:center;letter-spacing:-.01em;
}
.card-divider{width:64%;height:1.5px;background:var(--navy-300);opacity:.85;margin:20px auto 30px;}

.register-form{display:flex;flex-direction:column;gap:17px;}
.form-row{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:16px;}
.form-row label{font-size:15px;font-weight:600;color:var(--navy-900);text-align:right;}

.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="email"]{
  width:100%;padding:12px 20px;border-radius:var(--radius-pill);
  border:1.5px solid var(--navy-300);background:var(--white);color:var(--ink);
  font-family:'Inter',sans-serif;font-size:14.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row input::placeholder{color:var(--navy-300);}
.form-row input:focus{
  border-color:var(--sky-600);outline:none;box-shadow:0 0 0 3px rgba(20,135,196,.15);
}

.file-pill{
  display:flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:var(--radius-pill);
  border:1.5px dashed var(--navy-300);color:var(--navy-500);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.file-pill:hover{border-color:var(--sky-600);color:var(--sky-600);background:var(--navy-100);}
.file-pill.has-file{border-style:solid;border-color:var(--sky-600);color:var(--navy-900);}
.file-pill-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

.register-submit{margin-top:8px;}
.form-note{
  min-height:20px;margin:2px 0 0;text-align:center;
  font-size:14px;font-weight:600;color:var(--sky-600);
}

@media (max-width:980px){
  .register-grid{grid-template-columns:1fr;gap:44px;}
  .register-brand{align-items:center;text-align:center;}
  .register-tagline{max-width:440px;}
  .register-conveyor{opacity:.25;}
}
@media (max-width:560px){
  .register-card{padding:34px 24px 32px;border-radius:28px;}
  .form-row{grid-template-columns:1fr;gap:8px;}
  .form-row label{text-align:left;}
}

/*----------------------------------------------------*/

.order-card{
    width:700px;
    max-width:90%;
    margin:20px auto;

    background:linear-gradient(135deg,var(--navy-700),var(--navy-800));
    color:var(--white);

    border-radius:20px;
    padding:16px 20px;      /* Reduced from 24px */
    box-shadow:var(--shadow-card);

    display:flex;
    flex-direction:column;
    gap:12px;               /* Reduced from 20px */

    border:1px solid rgba(255,255,255,.08);
    transition:.25s ease;
}

.order-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:2px;
}

.order-item{
    font-size:30px;
    margin:0 0 6px 0;
    padding-bottom:4px;
}

.order-destination{
    font-size:20px;
    margin:0;
}

.order-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:4px;
}

.order-pricing{
    display:flex;
    gap:24px;
}

.price-box .label{
    font-size:12px;
}

.price-box .value{
    font-size:22px;
    line-height:1.1;
}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-950);color:var(--navy-300);padding:44px 0;}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.footer-contact h3{color:var(--white);font-size:20px;margin-bottom:10px;}
.footer-contact ul{display:flex;flex-direction:column;gap:6px;}
.footer-contact a{
  display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--navy-300);
  transition:color .15s ease;
}
.footer-contact a:hover{color:var(--white);}
.footer-contact svg{flex:none;opacity:.85;}

.footer-social{display:flex;align-items:center;gap:12px;}
.social-btn{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);transition:transform .15s ease, background .15s ease;flex:none;
}
.social-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);}
.social-btn.whatsapp:hover{background:#25D366;}
.social-btn.linkedin:hover{background:#0A66C2;}
.social-btn.x:hover{background:#000;}
.social-btn.facebook:hover{background:#1877F2;}
@media (max-width:640px){
  .footer-inner{flex-direction:column;align-items:flex-start;}
}