/* ==========================================================================
   Save Me - Personal Safety & Medical Emergency App
   Stylesheet

   All measurements are derived from the reference artwork (2480 x 3505) and
   converted to a 1250px content width (factor 0.5566). Between 900px and
   1290px the layout scales fluidly with clamp(); below that the sections
   reflow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  /* Colours sampled from the reference */
  --c-bg:            #231f20;
  --c-band:          #663e97;
  --c-text:          #ffffff;
  --c-footer-link:   #86878c;
  --c-footer-copy:   #a6a6a8;
  --c-rule:          #b4b5b9;

  /* Radii */
  --r-hero:  32px;
  --r-band:  17px;
  --r-card:  17px;

  /* Type - clamp(min, fluid, reference size @1290px viewport) */
  --fs-nav:          clamp(16px, 1.783vw, 23px);
  --fs-band:         clamp(23px, 3.643vw, 47px);
  --fs-caption:      clamp(14px, 1.860vw, 24px);
  --lh-caption:      clamp(20px, 2.558vw, 33px);
  --fs-footer-link:  clamp(14px, 1.473vw, 19px);
  --lh-footer-link:  clamp(19px, 1.938vw, 25px);
  --fs-footer-copy:  clamp(13px, 1.395vw, 18px);
  --lh-footer-copy:  clamp(18px, 1.860vw, 24px);

  /* Vertical rhythm */
  --sp-page-top:     clamp(14px, 1.705vw, 22px);
  --sp-brand-drop:   clamp(10px, 1.938vw, 25px);
  --sp-hero:         clamp(20px, 3.178vw, 41px);
  --sp-band:         clamp(16px, 2.016vw, 26px);
  --sp-cards:        clamp(18px, 2.171vw, 28px);
  --sp-caption:      clamp(16px, 3.488vw, 45px);
  --sp-rule:         clamp(32px, 4.961vw, 64px);
  --sp-footer-top:   clamp(16px, 1.860vw, 24px);
  --sp-page-bottom:  clamp(32px, 4.186vw, 54px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:"Segoe UI","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,
              "Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-weight:400;
  line-height:1.35;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
  height:auto;            /* never distort: the intrinsic aspect ratio is kept */
}

a{ color:inherit; text-decoration:none; }

ul{ margin:0; padding:0; list-style:none; }

figure{ margin:0; }

h1{ margin:0; font-size:inherit; font-weight:400; }

p{ margin:0; }

/* Content wrapper - 1250px of content plus gutters */
.container{
  width:100%;
  max-width:1350px;       /* 1250px content + 2 x 20px gutter */
  margin-inline:auto;
  padding-inline:20px;
}

.page{
  padding-top:var(--sp-page-top);
  padding-bottom:var(--sp-page-bottom);
}

/* --------------------------------------------------------------------------
   3. Header - logos
   -------------------------------------------------------------------------- */
.header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:block;
  flex:0 0 auto;
  margin-top:var(--sp-brand-drop);
}

.brand img{
  width:clamp(96px, 13.41vw, 173px);
  border-radius:clamp(16px, 2.4vw, 30px);
}

.visit-malaysia{ flex:0 0 auto; }

.visit-malaysia img{
  width:clamp(150px, 23.57vw, 185px);
}

/* --------------------------------------------------------------------------
   4. Header - primary navigation
   -------------------------------------------------------------------------- */
.site-nav{
  margin-top:clamp(2px, 0.23vw, 3px);
  padding-block:clamp(4px, 0.62vw, 8px);
}

.nav-toggle{ display:none; }

.nav-list{
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* The reference indents the menu from the left edge of the content area */
  padding-left:17.44%;
  padding-right:1.12%;
  font-size:var(--fs-nav);
  line-height:1;
}

.nav-list a{
  display:inline-block;
  padding:2px 0;
  white-space:nowrap;
  transition:opacity .18s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible{ opacity:.65; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero{ margin-top:var(--sp-hero); }

.hero-img{
  width:100%;
  border-radius:var(--r-hero);
}

/* --------------------------------------------------------------------------
   6. Tagline band
   -------------------------------------------------------------------------- */
.tagline{ margin-top:var(--sp-band); }

.tagline-band{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(80px, 13.10vw, 169px);
  padding:clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
  border-radius:var(--r-band);
  background:var(--c-band);
  font-size:var(--fs-band);
  line-height:1.2;
  text-align:center;
}

/* --------------------------------------------------------------------------
   7. Feature cards
   -------------------------------------------------------------------------- */
.features{ margin-top:var(--sp-cards); }

.feature-grid{
  display:grid;
  /* card / gutter / card / gutter / card - exact proportions of the reference */
  grid-template-columns:724fr 56fr 714fr 48fr 705fr;
  align-items:start;
}

.feature--dementia { grid-column:1; }
.feature--emergency{ grid-column:3; }
.feature--location { grid-column:5; }

.feature img{
  width:100%;
  border-radius:var(--r-card);
}

.feature figcaption{
  margin-top:var(--sp-caption);
  padding-right:6px;
  padding-left:clamp(10px, 1.705vw, 22px);
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer{ margin-top:var(--sp-rule); }

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-top:var(--sp-footer-top);
  padding-left:clamp(10px, 1.628vw, 21px);
  border-top:2px solid var(--c-rule);
}

.footer-links{
  display:flex;
  flex:0 1 auto;
  font-size:var(--fs-footer-link);
  line-height:var(--lh-footer-link);
  color:var(--c-footer-link);
}

.footer-links ul:first-child{
  width:clamp(110px, 13.02vw, 168px);   /* puts the 2nd column at x = 189px */
  flex:0 0 auto;
}

.footer-links a{ transition:color .18s ease; }

.footer-links a:hover,
.footer-links a:focus-visible{ color:var(--c-text); }

.footer-copy{
  flex:0 0 auto;
  padding-top:clamp(14px, 3.101vw, 40px);
  font-size:var(--fs-footer-copy);
  line-height:var(--lh-footer-copy);
  color:var(--c-footer-copy);
  text-align:right;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* ---- Laptop / small desktop ---------------------------------------------- */
@media (max-width:1100px){
  .nav-list{ padding-left:12%; }
}

/* ---- Tablet: keep the three-column design, tighten the gutters ----------- */
@media (max-width:820px){
  .container{ padding-inline:16px; }

  .nav-list{ padding-left:8%; }

  :root{
    --r-hero:22px;
    --r-band:14px;
    --r-card:14px;
  }
}

/* ---- Small tablet / large phone: collapse the menu, stack the cards ------ */
@media (max-width:640px){
  .site-nav{
    position:relative;
    margin-top:10px;
    padding-block:0;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    padding:9px 14px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:8px;
    background:transparent;
    color:var(--c-text);
    font:inherit;
    font-size:15px;
    line-height:1;
    cursor:pointer;
  }

  .nav-toggle-bar{
    display:block;
    width:18px;
    height:2px;
    background:currentColor;
    border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
  }

  .nav-toggle-bar:nth-child(2){ margin-left:-18px; margin-top:12px; }
  .nav-toggle-bar:nth-child(3){ margin-left:-18px; margin-top:24px; }

  .nav-toggle-label{ margin-left:10px; }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .nav-list{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin-top:10px;
    padding:8px 0 4px;
    font-size:17px;
    line-height:1.2;
  }

  .nav-list.is-open{ display:flex; }

  .nav-list a{ padding:9px 2px; }

  /* ...and stack the cards */
  .feature-grid{
    grid-template-columns:1fr;
    row-gap:34px;
  }

  .feature--dementia,
  .feature--emergency,
  .feature--location{ grid-column:1; }

  .feature figcaption{
    margin-top:18px;
    padding-left:4px;
    font-size:17px;
    line-height:24px;
  }

  .tagline-band{
    min-height:0;
    padding:18px 20px;
    font-size:26px;
  }
}

/* ---- Mobile --------------------------------------------------------------- */
@media (max-width:560px){
  .header-top{ gap:12px; }

  .brand img{ width:clamp(84px, 24vw, 120px); }
  .visit-malaysia img{ width:clamp(140px, 42vw, 190px); }

  .tagline-band{ font-size:23px; }

  .feature figcaption{ font-size:16px; line-height:23px; }

  .footer-inner{
    flex-direction:column;
    align-items:stretch;
    gap:26px;
    padding-left:4px;
  }

  .footer-links{ gap:40px; font-size:15px; line-height:22px; }

  .footer-links ul:first-child{ width:auto; }

  .footer-copy{
    padding-top:0;
    text-align:left;
    font-size:14px;
    line-height:21px;
  }
}

@media (max-width:380px){
  .tagline-band{ font-size:21px; padding:16px; }
  .nav-list{ font-size:16px; }
}

/* --------------------------------------------------------------------------
   10. Accessibility helpers
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid #b98cff;
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}



a.brand img {
    width: 40%;
}