/* ==========================================================================
   Camely — Stylesheet
   Matched to Figma: sand-orange page canvas + floating rounded maroon cards
   ========================================================================== */

:root{
  /* Core palette — sampled from Figma mockup */
  --maroon-950:#20090a;
  --maroon-900:#2f110d;
  --maroon-800:#3a150e;
  --maroon-700:#4a1a14;   /* header / hero / footer card fill */
  --maroon-600:#5c2417;

  --sand-300:#f3c98a;
  --sand-400:#eeb679;
  --sand-500:#e6934e;    /* page background gradient top */
  --sand-600:#d67f3c;    /* page background gradient bottom */
  --sand-700:#b8692f;

  --orange-400:#f4b26a;
  --orange-500:#ec9a4a;
  --orange-600:#e08530;

  --teal-300:#7fe4c9;
  --teal-400:#4fc9a8;   /* CAMELY wordmark green */
  --teal-500:#2fae8c;

  --purple-500:#8a3fae;

  --cream:#fdf6ec;
  --cream-dim:rgba(253,246,236,0.74);
  --cream-faint:rgba(253,246,236,0.46);

  --ink:#2b1208;          /* body text on sand background */
  --ink-soft:rgba(43,18,8,0.74);

  /* Type */
  --font-display:'Baloo 2', 'Nunito', sans-serif;
  --font-body:'Nunito', 'Segoe UI', sans-serif;

  /* Radii & shadow */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:32px;
  --r-pill:999px;
  --shadow-soft:0 10px 30px rgba(32,9,10,0.22);
  --shadow-lift:0 18px 40px rgba(32,9,10,0.32);

  --page-pad:22px;        /* gutter between viewport edge and card edge */

  --ease:cubic-bezier(.22,.98,.4,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  font-family:var(--font-body);
  /* The whole page sits on the real photographed dune-sand texture,
     with a warm orange wash on top so text contrast and brand tone
     stay consistent with the rest of the palette. */
  background:
    linear-gradient(165deg, rgba(243,201,138,0.58) 0%, rgba(230,148,77,0.66) 45%, rgba(214,127,60,0.72) 100%),
    url('../images/sand-dunes.jpg') center top/cover no-repeat;
  background-color:var(--sand-500);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}

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

ul{list-style:none;}

button{font-family:inherit; cursor:pointer; border:none; background:none;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.18;
  letter-spacing:0.2px;
}

:focus-visible{
  outline:3px solid var(--teal-400);
  outline-offset:3px;
  border-radius:6px;
}

/* ==========================================================================
   Page shell — outer gutter so the maroon cards float on the sand canvas
   ========================================================================== */

.page-shell{
  padding:var(--page-pad) var(--page-pad) 0;
}
.page-shell.no-top{padding-top:0;}

/* ==========================================================================
   Header (lives inside the hero card, becomes a solid fixed bar on scroll)
   ========================================================================== */

.site-header{
  position:relative;
  z-index:10;
  padding:8px 8px 6px;
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 18px;
}

/* Secondary fixed bar — slides in once the hero card has scrolled away,
   so navigation stays reachable. Hidden entirely at rest to match Figma. */
.site-header-fixed{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:14px 0;
  background:var(--maroon-700);
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  transform:translateY(-100%);
  transition:transform .35s var(--ease);
}
.site-header-fixed.is-shown{transform:translateY(0);}
.site-header-fixed .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 24px;
  max-width:1180px;
  margin:0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.brand img{width:44px; height:52px; object-fit:contain;}

.brand .brand-name{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:800;
  color:var(--teal-400);
  letter-spacing:0.5px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:30px;
}

.main-nav a{
  color:var(--cream-dim);
  font-weight:600;
  font-size:0.92rem;
  position:relative;
  padding:6px 2px;
  transition:color .25s var(--ease);
}

.main-nav a:hover,
.main-nav a.active{
  color:var(--cream);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  padding:13px 30px;
  border-radius:var(--r-pill);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  white-space:nowrap;
}

.btn-primary{
  background:linear-gradient(180deg, var(--orange-400), var(--orange-600));
  color:#3a1907;
  box-shadow:0 8px 20px rgba(224,133,48,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 28px rgba(224,133,48,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary:active{transform:translateY(-1px) scale(0.99);}

/* Dark maroon pill — used for "Contact Us" sitting on sand sections, per Figma */
.btn-dark{
  background:var(--maroon-800);
  color:var(--cream);
  padding:13px 32px;
  box-shadow:0 10px 22px rgba(32,9,10,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn-dark:hover{
  transform:translateY(-3px);
  background:var(--maroon-900);
}

/* Real "Contact Us" button asset */
.btn-contact-img{
  display:inline-flex;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  transition:transform .25s var(--ease), filter .25s var(--ease);
}
.btn-contact-img img{height:52px; width:auto; display:block;}
.btn-contact-img:hover{transform:translateY(-3px); filter:brightness(1.08);}
.btn-contact-img:active{transform:translateY(-1px); filter:brightness(0.98);}

.lang-pill{
  display:flex;
  transition:transform .25s var(--ease);
}
.lang-pill img{height:38px; width:auto; display:block;}
.lang-pill:hover{transform:translateY(-2px);}

.menu-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:12px;
  background:rgba(253,246,236,0.1);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  flex-shrink:0;
}
.menu-toggle span{
  width:20px; height:2.5px;
  background:var(--cream);
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.menu-toggle.is-open span:nth-child(2){opacity:0;}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(78vw, 340px);
  background:var(--maroon-900);
  z-index:999;
  padding:110px 32px 40px;
  display:flex;
  flex-direction:column;
  gap:26px;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  box-shadow:-20px 0 50px rgba(0,0,0,0.35);
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav a{
  color:var(--cream);
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
}
.mobile-nav .lang-pill{align-self:flex-start;}

.nav-scrim{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.5);
  z-index:998;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease);
}
.nav-scrim.is-open{opacity:1; visibility:visible;}

/* ==========================================================================
   Hero card — rounded top + bottom, floats on the sand canvas
   ========================================================================== */

.hero-card{
  background:
    radial-gradient(ellipse 780px 420px at 18% 0%, rgba(255,178,110,0.16), transparent 60%),
    linear-gradient(180deg, var(--maroon-700) 0%, var(--maroon-800) 55%, var(--maroon-900) 100%);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}

.hero{
  padding:30px 0 60px;
  color:var(--cream);
  position:relative;
}

.hero .container{position:relative; z-index:2;}

.hero-copy{
  text-align:center;
  max-width:720px;
  margin:20px auto 30px;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--teal-300);
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:0.75rem;
  margin-bottom:16px;
}
.hero-eyebrow::before, .hero-eyebrow::after{
  content:"";
  width:20px; height:2px;
  background:var(--teal-400);
  border-radius:2px;
}

.hero h1{
  font-size:clamp(2.1rem, 4.6vw, 3.3rem);
  color:var(--cream);
  margin-bottom:16px;
}
.hero h1 .accent{color:var(--teal-300);}

.hero p{
  color:var(--cream-dim);
  font-size:1.05rem;
  max-width:560px;
  margin:0 auto 26px;
}

.hero-ctas{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.store-btn{
  display:flex;
  align-items:center;
  transition:transform .25s var(--ease), filter .25s var(--ease);
}
.store-btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.12);
}
.store-btn img{height:44px; width:auto; display:block;}

/* Hero visual: phone + line-and-ring annotations */
.hero-visual{
  position:relative;
  max-width:260px;
  margin:34px auto 0;
  display:flex;
  justify-content:center;
}
.hand-mockup{
  width:100%;
  max-width:260px;
  animation:float-phone 5s ease-in-out infinite;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,0.35));
}

.callout-line{
  position:absolute;
  width:150px;
  height:10px;
}
.callout-line img{width:100%; height:100%; display:block;}
.callout-line.left{ top:6%; left:-160px; }
.callout-line.right{ bottom:20%; right:-160px; }

.hero-callout{
  position:absolute;
  max-width:190px;
  font-size:0.8rem;
  color:var(--cream-dim);
  line-height:1.5;
}
.hero-callout.left{ top:11%; left:-190px; text-align:left; }
.hero-callout.right{ bottom:9%; right:-190px; text-align:left; }

.phone{
  width:220px;
  height:450px;
  background:linear-gradient(165deg, #2a1a13, #100907);
  border-radius:36px;
  padding:11px;
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(255,255,255,0.05);
  position:relative;
  animation:float-phone 5s ease-in-out infinite;
}
.phone::before{
  content:"";
  position:absolute;
  top:20px; left:50%;
  transform:translateX(-50%);
  width:64px; height:7px;
  background:#0a0605;
  border-radius:6px;
}
.phone-screen{
  width:100%; height:100%;
  background:
    radial-gradient(circle at 30% 15%, rgba(79,201,168,0.16), transparent 45%),
    linear-gradient(165deg, var(--maroon-600), var(--maroon-950));
  border-radius:27px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 16px 16px;
  position:relative;
  overflow:hidden;
}
.phone-screen .chip-row{
  display:flex;
  gap:6px;
  position:absolute;
  top:13px; right:14px;
}
.phone-screen .chip{
  background:rgba(20,8,6,0.55);
  color:var(--cream);
  font-size:0.58rem;
  font-weight:700;
  padding:4px 8px;
  border-radius:var(--r-pill);
  display:flex;
  align-items:center;
  gap:3px;
}
.phone-screen .mascot{width:60px; height:66px; margin:30px 0 6px;}
.phone-screen .wordmark{
  font-family:var(--font-display);
  color:var(--teal-300);
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:22px;
  font-size:1rem;
}
.phone-screen .pill-btn{
  width:100%;
  padding:12px;
  border-radius:11px;
  background:linear-gradient(180deg, var(--orange-400), var(--orange-600));
  color:#3a1907;
  font-family:var(--font-display);
  font-weight:700;
  text-align:center;
  margin-bottom:9px;
  box-shadow:0 6px 14px rgba(224,133,48,0.4);
  font-size:0.92rem;
}

@keyframes float-phone{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(1deg);}
}

.floaty{
  position:absolute;
  animation:drift 6s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(6px,-16px) rotate(8deg);}
}

/* ==========================================================================
   Sand section (no card — content sits directly on the page canvas)
   ========================================================================== */

.section{
  padding:80px 0;
}

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 40px;
}
.section-head h2{
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom:14px;
  color:var(--maroon-900);
}
.section-head p{
  color:var(--ink-soft);
  font-size:1.02rem;
}

.center-cta{text-align:center; margin-top:40px;}

/* Phone trio showcase */
.trio{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0 6px;
}
.three-phones{
  width:100%;
  max-width:560px;
  filter:drop-shadow(0 24px 40px rgba(32,9,10,0.3));
}

/* ==========================================================================
   Feature card (rounded maroon card — extends the header/footer language)
   ========================================================================== */

.feature-card-panel{
  background:linear-gradient(180deg, var(--maroon-700) 0%, var(--maroon-900) 100%);
  border-radius:var(--r-lg);
  padding:clamp(32px, 6vw, 64px);
  color:var(--cream);
}

.feature-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px 40px;
  margin-top:44px;
}
.feature-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.feature-row .feature-icon{
  width:46px; height:46px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(79,201,168,0.15);
  color:var(--teal-300);
  flex-shrink:0;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.feature-row:hover .feature-icon{
  transform:rotate(-6deg) scale(1.08);
  background:rgba(79,201,168,0.28);
}
.feature-icon svg{width:23px; height:23px;}
.feature-row h3{font-size:1.05rem; margin-bottom:5px; color:var(--cream);}
.feature-row p{font-size:0.9rem; color:var(--cream-dim);}

/* ==========================================================================
   Footer card — rounded, floats on sand canvas like the hero
   ========================================================================== */

.site-footer{
  background:linear-gradient(180deg, var(--maroon-700) 0%, var(--maroon-900) 100%);
  color:var(--cream);
  padding:64px 0 26px;
  border-radius:var(--r-lg);
}
.footer-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(253,246,236,0.12);
}
.footer-top .brand img{width:58px; height:69px; object-fit:contain;}
.footer-top .brand .brand-name{font-size:1.5rem;}
.footer-stores{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

.footer-mid{
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  padding:26px 0;
}
.footer-mid a{
  color:var(--cream-dim);
  font-weight:600;
  font-size:0.88rem;
  transition:color .25s;
}
.footer-mid a:hover{color:var(--teal-300);}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-top:18px;
}
.footer-bottom small{color:var(--cream-faint); font-size:0.82rem;}

.social-row{display:flex; gap:18px; align-items:center;}
.social-row a{
  display:flex;
  opacity:0.82;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.social-row a:hover{
  opacity:1;
  transform:translateY(-2px);
}
.social-row img{width:20px; height:20px; display:block;}

/* ==========================================================================
   Legal / content pages — text sits directly on the sand canvas
   ========================================================================== */

.page-hero{
  padding:56px 0 60px;
  color:var(--cream);
  text-align:center;
}
.page-hero .eyebrow{
  color:var(--teal-300);
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:0.75rem;
  margin-bottom:12px;
  display:block;
}
.page-hero h1{font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--cream);}
.page-hero .updated{color:var(--cream-dim); margin-top:10px; font-size:0.9rem;}

.legal-content{
  padding:56px 0 90px;
}
.legal-wrap{
  max-width:820px;
  margin:0 auto;
}
.legal-wrap h2{
  font-size:1.25rem;
  margin-top:36px;
  margin-bottom:12px;
  color:var(--maroon-900);
  display:flex;
  align-items:baseline;
  gap:10px;
}
.legal-wrap h2:first-child{margin-top:0;}
.legal-wrap h2 .num{
  color:var(--teal-500);
  font-family:var(--font-display);
}
.legal-wrap p{margin-bottom:14px; color:var(--ink-soft); font-size:0.98rem;}
.legal-wrap ul{margin:6px 0 16px 0; display:flex; flex-direction:column; gap:9px;}
.legal-wrap ul li{
  position:relative;
  padding-left:22px;
  color:var(--ink-soft);
  font-size:0.98rem;
}
.legal-wrap ul li::before{
  content:"";
  position:absolute;
  left:2px; top:8px;
  width:7px; height:7px;
  border-radius:50%;
  border:2px solid var(--maroon-700);
  background:transparent;
}
.legal-wrap a.mail{color:var(--maroon-900); font-weight:700; text-decoration:underline;}
.legal-wrap hr{
  border:none;
  border-top:1px solid rgba(43,18,8,0.15);
  margin:32px 0;
}
.legal-nav{
  max-width:820px;
  margin:0 auto 36px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  justify-content:center;
}
.legal-nav a{
  font-size:0.85rem;
  font-weight:700;
  color:var(--maroon-800);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:border-color .25s var(--ease), color .25s;
}
.legal-nav a:hover{
  border-color:var(--maroon-700);
}

/* ==========================================================================
   Contact modal — white card, light-gray fields, pill Send button
   ========================================================================== */

.modal-overlay{
  position:fixed; inset:0;
  background:rgba(20,8,5,0.6);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease);
  padding:20px;
}
.modal-overlay.is-open{opacity:1; visibility:visible;}

.modal-card{
  background:#ffffff;
  border-radius:26px;
  padding:34px;
  max-width:400px;
  width:100%;
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
  transform:translateY(30px) scale(0.96);
  opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.modal-overlay.is-open .modal-card{transform:translateY(0) scale(1); opacity:1;}

.modal-close{
  position:absolute;
  top:-16px; right:-16px;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--maroon-800);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,0.3);
  transition:transform .25s var(--ease), background .25s;
}
.modal-close img{width:14px; height:14px; display:block;}
.modal-close:hover{transform:rotate(90deg); background:var(--maroon-900);}

.modal-card h3{font-size:1.35rem; margin-bottom:20px; color:#1a1a1a; font-family:var(--font-display);}

.field{margin-bottom:12px;}
.field select,
.field input{
  width:100%;
  padding:14px 18px;
  border-radius:16px;
  border:none;
  background:#f4f3f1;
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--ink);
  transition:box-shadow .25s;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px;
}
.field select:invalid{color:#8a8a8a;}
.field select:focus,
.field input:focus{
  box-shadow:0 0 0 3px rgba(79,201,168,0.28);
  outline:none;
}
.field input::placeholder{color:#9a9a9a;}

.btn-send-img{
  width:100%;
  margin-top:6px;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.btn-send-img img{width:100%; display:block;}
.btn-send-img:hover{transform:translateY(-2px); filter:brightness(1.08);}
.btn-send-img:active{transform:translateY(0); filter:brightness(0.98);}

.modal-success{text-align:center; padding:8px 0;}
.modal-success img{width:100%; max-width:300px; margin:0 auto; display:block;}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px){
  :root{--page-pad:14px;}
  .main-nav{display:none;}
  .header-actions .lang-pill{display:none;}
  .menu-toggle{display:flex;}
  .hero-callout, .callout-line{display:none;}
  .three-phones{max-width:340px;}
  .feature-list{grid-template-columns:1fr;}
}

@media (max-width: 620px){
  .hero{padding:10px 0 40px;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .section{padding:56px 0;}
  .feature-card-panel{padding:30px 22px;}
  :root{--r-lg:26px;}
}