/* ----------  Design Tokens  ---------- */
:root {
    /* backgrounds */
    --bg-light: #fff;
    --bg-dark: #121212;
  
    /* glass panels */
    --glass-bg: rgba(255,255,255,0.25);
    --glass-border: rgba(255,255,255,0.3);
  
    /* text */
    --text-primary-light: #0f2633;
    --text-primary-dark: #d9e5f2;
    --text-secondary-light: #66798b;
    --text-secondary-dark: #a6bfd1;
  
    /* brand blues / gradients  */
    --brand-start: #35afcd;
    --brand-end:   #20a8d2;
    --btn-start:   #008fda;
    --btn-end:     #8de6b3;

    /* Waterling Colors from Swift */
    /* Basic UI Colors */
    --background-light: #ffffff;
    --background-dark: #121212;
    --text-primary-light: #000000;
    --text-primary-dark: #ffffff;
    --text-secondary-light: #666666;
    --text-secondary-dark: #ffffff;
    --button-primary-light: #0094d9;
    --button-primary-dark: #80bfbf;
    --button-text-light: #ffffff;
    --button-text-dark: #000000;
    --water-light: #80ccf2;
    --water-dark: #66b3d9;
    --separator-light: #d9e0e6;
    --separator-dark: #4d5966;

    /* Gradient Colors */
    --button-gradient-start-light: rgba(0, 0, 255, 0.7);
    --button-gradient-start-dark: #1a3366;
    --button-gradient-end-light: rgba(141, 230, 179, 0.8);
    --button-gradient-end-dark: #1a4d40;
    --outer-ring-start-light: #35afcd;
    --outer-ring-start-dark: #8cd9ff;
    --outer-ring-end-light: #338ddb;
    --outer-ring-end-dark: #338ddb;
    --light-inner-start-light: #e6f7ff;
    --light-inner-start-dark: #334059;
    --light-inner-end-light: #d9f2fc;
    --light-inner-end-dark: #262d40;

    /* Hydration State Colors */
    --no-water-yet-today: #bfc7cc;
    --almost-hydrated: #4db3d9;
    --well-hydrated: #1aa6d9;
    --slightly-overhydrated: #008cd9;
    --over-hydrated: #0073bf;
    --mildly-dehydrated: #99d9d9;
    --dehydrated: #e66640;
    --recently-exercised: #ff8c40;

    /* Status Colors */
    --success-green: #3366cc99;
    --warning-orange: #ff9966;
    --error-red: #e66666;

    /* Water-Themed Colors */
    --primary-light: #99d9d9;
    --primary-dark: #59a6a6;
    --water-blue: #73bff2;
    --deep-water-blue: #1a66cc;
    --wave-teal: #47c7bf;
    --seafoam-green: #8ce6b3;

    /* Accent Colors */
    --coral-orange: #ff8c66;
    --sunset-pink: #ffa6bf;
    --tropical-yellow: #fad966;
  }
  
  /* Dark-mode switch (automatic) */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-light: var(--bg-dark);
      --text-primary-light: var(--text-primary-dark);
      --text-secondary-light: var(--text-secondary-dark);
      --glass-bg: rgba(0,0,0,0.25);
      --glass-border: rgba(255,255,255,0.15);
    }
  }
  
  /* ----------  Global Reset  ---------- */
  *,
  *::before,
  *::after { box-sizing:border-box; }
  
  body {
    margin:0;
    font-family: system-ui, "SF Pro", -apple-system, sans-serif;
    color: var(--text-primary-light);
    background: var(--bg-light);
    line-height: 1.55;
    padding-top: 80px; /* Add space for the fixed header */
  }

  /* Swift-like gradient background */
  .waterling-gradient-bg {
    background: linear-gradient(
      to bottom right,
      rgba(0, 0, 255, 0.7),
      rgba(102, 179, 230, 0.3)
    );
    min-height: 100vh;
  }
  
  /* ----------  Utility  ---------- */
  .glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-radius: 16px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 8px 24px rgba(0,0,0,0.12);
  }
  
  .btn-primary {
    display:inline-block;
    padding:.9rem 1.6rem;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,var(--btn-start),var(--btn-end));
    border-radius:999px;
    text-decoration:none;
    transition:transform .15s ease;
  }
  .btn-primary:hover { transform:translateY(-2px); }
  
  /* ----------  Layout  ---------- */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    transition: all 0.3s ease;
  }

  /* Header style when scrolled */
  header.scrolled {
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
  }

  nav a{ 
    margin-left:1.2rem; 
    color:var(--text-secondary-light); 
    text-decoration:none; 
    font-weight:500;
    position: relative;
  }
  nav a:hover{
    color:var(--btn-start);
  }
  nav a.active {
    color: var(--btn-start);
  }
  nav a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--btn-start);
  }
  
  .hero {
    padding:4rem 2rem 6rem;
    display:grid;
    grid-template-columns:1fr 1fr; /* Fixed two-column layout */
    align-items:center;
    gap:3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .hero {
      grid-template-columns: 1fr; /* Stack on mobile */
    }
  }
  
  .iphone-wrap {
    position: relative;
    width: 340px; /* Half the actual image size (680px) */
    height: 684px; /* Half the actual image size (1368px) */
    margin: 0 auto;
  }
  
  .iphone-screen {
    position: absolute;
    width: 295px; /* Adjusted to match iPhone frame's inner screen area */
    height: 640px; /* Adjusted to match iPhone frame's inner screen area */
    z-index: 5;
    top: 22px; /* Adjust based on where the screen area starts in the frame */
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 36px;
  }
  
  .app-screen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* Show screenshot while video is loading/if video fails */
  .app-screen.video-playing + img.app-screen {
    opacity: 0;
  }
  
  /* Layer ordering for screens */
  img.app-screen {
    z-index: 1; /* Static image starts underneath */
  }
  
  video.app-screen {
    z-index: 2; /* Video is always above static image */
  }
  
  .iphone-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%; /* Use full width of container */
    height: 100%; /* Use full height of container */
    pointer-events: none; /* Allow clicking through to video controls */
  }
  
  /* ----------  Footer  ---------- */
  footer {
    text-align:center;
    padding:2rem;
    font-size:.875rem;
    color:var(--text-secondary-light);
  }

  /* Apply glass effect to main content on support and privacy pages */
  main.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-radius: 16px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 8px 24px rgba(0,0,0,0.12);
  }

  /* App Store Download Badge */
  .app-store-badge-link {
    display: inline-block;
    transition: opacity 0.2s ease;
  }

  .app-store-badge-link:hover {
    opacity: 0.8;
  }

  .app-store-badge {
    height: 45px;
    width: auto;
  }

  nav .app-store-badge {
    height: 39px; /* Slightly smaller in the nav */
  }
  /* simple circular spinner */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width:42px; height:42px;
  border:4px solid rgba(255,255,255,0.3);
  border-top-color: var(--btn-start, #35afcd);  /* falls back if CSS var missing */
  border-radius:50%;
  animation: spin .8s linear infinite;
}
.thumbs button { transition: opacity .15s ease; }