/* ===========================================================
   Foxy Studios — shared stylesheet
   Palette + type derived from the provided design reference
=========================================================== */

:root{
  --bg:            #FBF2E4;
  --bg-soft:       #FDF8EF;
  --card:          #FFFFFF;
  --ink:           #2E2117;
  --ink-muted:     #7A6B5C;
  --line:          #EFE2CE;

  --orange:        #E8823C;
  --orange-dark:   #C9612E;
  --orange-soft:   #FBE3D2;

  --purple:        #8E6FCB;
  --purple-dark:   #7857B8;
  --purple-soft:   #EDE7FA;

  --pink:          #F17C93;
  --pink-dark:     #E15C77;
  --pink-soft:     #FCE3E8;

  --green:         #3FA671;
  --green-soft:    #E4F4EB;

  --banner:        #F5DCDF;

  --radius-lg:      28px;
  --radius-md:      18px;
  --radius-pill:    999px;

  --shadow-card: 0 12px 30px -14px rgba(120, 87, 45, 0.28);
  --shadow-btn:  0 10px 20px -8px rgba(201, 97, 46, 0.45);

  --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}
:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Header ---------- */
.site-header{
  padding:22px 0;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{ width:auto; height:46px; }
.brand-text{ display:flex; flex-direction:column; }
.brand-text strong{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
}
.brand-text span{
  font-size:.78rem;
  color:var(--ink-muted);
}
.main-nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-weight:600;
  font-size:.95rem;
}
.main-nav a{ color:var(--ink); opacity:.85; padding:6px 0; }
.main-nav a:hover{ opacity:1; }
.main-nav a.active{ color:var(--orange-dark); opacity:1; }

.nav-dropdown{ position:relative; }
.nav-dropdown > button{
  font:inherit;
  font-weight:600;
  font-size:.95rem;
  background:none;
  border:none;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 0;
  opacity:.85;
}
.nav-dropdown > button:hover{ opacity:1; }
.nav-dropdown svg{ width:10px; height:10px; transition:transform .18s ease; }
.nav-dropdown:hover svg, .nav-dropdown.open svg{ transform:rotate(180deg); }
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);
  background:var(--card);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:10px;
  min-width:220px;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:40;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  opacity:.9;
}
.nav-dropdown-menu a img{ width:26px; height:26px; border-radius:8px; }
.nav-dropdown-menu a:hover{ background:var(--bg-soft); opacity:1; }
.nav-dropdown-menu .submenu-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-muted);
  padding:6px 10px 2px;
  font-weight:700;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:3px;
  font-weight:700;
  font-size:.8rem;
}
.lang-switch a{
  padding:6px 12px;
  border-radius:var(--radius-pill);
  color:var(--ink-muted);
}
.lang-switch a.active{
  background:var(--orange);
  color:#fff;
}
.header-actions{ display:flex; align-items:center; gap:14px; }
.btn-contact{
  background:var(--card);
  border:1px solid var(--line);
  padding:10px 18px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.88rem;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:var(--shadow-card);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  margin:5px 0;
  border-radius:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.95rem;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn-purple{
  background:linear-gradient(135deg, var(--purple), var(--purple-dark));
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(120,87,203,.45);
}
.btn-pink{
  background:linear-gradient(135deg, var(--pink), var(--pink-dark));
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(225,92,119,.4);
}
.btn-lavender{
  background:linear-gradient(135deg, #B5A0E6, #9C82D6);
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(156,130,214,.45);
}
.btn-brown{
  background:linear-gradient(135deg, #A98065, #8C6450);
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(140,100,80,.45);
}
.btn-orange{
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  color:#fff;
  box-shadow:var(--shadow-btn);
}
.btn-indigo{
  background:linear-gradient(135deg, #6B65B8, #524C9E);
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(82,76,158,.45);
}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink);
}
.btn-outline:hover{ border-color:var(--orange); }
.btn-sm{ padding:10px 18px; font-size:.85rem; width:100%; }
.btn[disabled], .btn.is-disabled{
  opacity:.55;
  cursor:default;
  transform:none !important;
}

/* ---------- Hero (full-bleed image with overlaid text) ---------- */
.hero-full{
  position:relative;
  width:100%;
  min-height:560px;
  height:74vh;
  max-height:720px;
  overflow:hidden;
  margin-bottom:0;
}
.hero-full .site-header.header-overlay{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  background:transparent;
}
.hero-full-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
}
/* left scrim for text readability + bottom fade into the page background,
   so the illustration melts seamlessly into the content below */
.hero-full-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(251,242,228,0) 72%,
      rgba(251,242,228,.75) 92%,
      var(--bg) 100%),
    linear-gradient(90deg,
      rgba(251,242,228,.92) 0%,
      rgba(251,242,228,.75) 30%,
      rgba(251,242,228,.28) 52%,
      rgba(251,242,228,0) 70%);
}
.hero-full-overlay{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  padding-top:70px;
}
.hero-full-overlay .container{ width:100%; }
.hero-full-overlay h1{
  font-size:clamp(2.4rem, 4.4vw, 3.5rem);
  font-weight:800;
  color:var(--ink);
}
.hero-full-overlay h1 .accent{ color:var(--orange); }
.hero-full-overlay p{
  color:var(--ink-muted);
  font-size:1.08rem;
  max-width:44ch;
}
/* very wide screens: keep the illustration at natural scale on the right,
   fill the rest with a gradient matching the image's left edge */
@media (min-width: 1700px){
  .hero-full{
    background:linear-gradient(180deg,
      #FAE0CE 0%, #FCE4CC 20%, #FCE0CB 40%, #FCD6C5 60%, #EEBAB6 80%, #B68091 100%);
  }
  .hero-full-img{
    left:auto; right:0;
    width:auto; height:100%;
    object-fit:cover;
    object-position:right center;
    max-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%);
    mask-image:linear-gradient(90deg, transparent 0, #000 22%);
  }
}
/* apps panel overlaps the faded hero bottom — seamless transition */
#apps{
  position:relative;
  z-index:5;
  margin-top:-64px;
}

@media (max-width: 980px){
  .hero-full{ height:58vh; min-height:440px; }
  .hero-full-scrim{
    background:
      linear-gradient(180deg,
        rgba(251,242,228,0) 72%,
        rgba(251,242,228,.75) 92%,
        var(--bg) 100%),
      linear-gradient(90deg,
        rgba(251,242,228,.95) 0%,
        rgba(251,242,228,.85) 38%,
        rgba(251,242,228,.35) 62%,
        rgba(251,242,228,0) 82%);
  }
  #apps{ margin-top:-52px; }
}
@media (max-width: 720px){
  /* Foxes are part of the header: transparent nav over the sky,
     image fades into the beige background and the text flows over it */
  .hero-full{ height:auto; min-height:0; overflow:hidden; margin-bottom:0; }
  .hero-full .site-header.header-overlay{ position:absolute; background:transparent; }
  .hero-full-img{
    position:static;
    width:100%;
    height:auto;
    min-height:320px;
    display:block;
    object-fit:cover;
    object-position:85% 30%;
    /* fade the picture itself into the page background — no hard edge */
    -webkit-mask-image:linear-gradient(180deg, #000 66%, rgba(0,0,0,.4) 88%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 66%, rgba(0,0,0,.4) 88%, transparent 100%);
  }
  .hero-full-scrim{ display:none; }
  .hero-full-overlay{
    position:relative;
    height:auto;
    margin-top:-34px;
    padding:0 0 6px;
  }
  .hero-full-overlay h1{ font-size:2.2rem; }
  .hero-full-overlay p{ max-width:none; }
  #apps{ margin-top:0; }
}

/* ---------- Section headers ---------- */
.section-title{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  display:flex;
  align-items:center;
  gap:10px;
}
.section-sub{
  color:var(--ink-muted);
  margin-bottom:34px;
}

/* ---------- Apps panel / grid ---------- */
.apps-panel{
  background:var(--card);
  border-radius:36px;
  padding:44px;
  box-shadow:var(--shadow-card);
  margin-bottom:56px;
  overflow:hidden;
}
.apps-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.app-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
  align-items:center;
  min-width:0;
  overflow-wrap:break-word;
}
.app-card img.app-icon{
  width:96px; height:96px;
  border-radius:24px;
  box-shadow:0 8px 18px -8px rgba(46,33,23,.25);
}
.app-card h3{ font-size:1.15rem; margin-bottom:2px; }
.app-card .app-tagline{
  font-size:.85rem;
  color:var(--ink-muted);
  font-weight:600;
  margin-top:-4px;
}
.app-card .app-desc{
  font-size:.86rem;
  color:var(--ink-muted);
  flex-grow:1;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:.76rem;
  font-weight:700;
}
.badge-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:2px; }
.badge-green{ background:var(--green-soft); color:var(--green); }
.badge-pink{ background:var(--pink-soft); color:var(--pink-dark); }
.badge-purple{ background:var(--purple-soft); color:var(--purple-dark); }

.app-card .app-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  margin-top:4px;
}
.app-links .legal-links{
  display:flex;
  justify-content:center;
  gap:14px;
  font-size:.78rem;
  font-weight:700;
  color:var(--ink-muted);
  margin-top:2px;
}
.app-links .legal-links a{ margin:0 7px; }
.app-links .legal-links a:hover{ color:var(--orange-dark); }

/* ---------- Feature banner ---------- */
/* full image on the left melting smoothly into the pink band */
.banner{
  background:linear-gradient(90deg, #D6AEB4 0%, #ECCFD5 42%, var(--banner) 72%);
  border-radius:36px;
  padding:0;
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  align-items:center;
  gap:0;
  margin-bottom:20px;
  overflow:hidden;
}
.banner-art{
  position:relative;
  align-self:stretch;
  min-height:280px;
}
.banner-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg, #000 58%, transparent 99%);
  mask-image:linear-gradient(90deg, #000 58%, transparent 99%);
}
.banner-body{ padding:40px 44px 40px 10px; }
.banner h3{ font-size:1.5rem; }
.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.pill{
  background:#fff;
  border-radius:var(--radius-pill);
  padding:9px 16px;
  font-size:.82rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}

/* ---------- Footer ---------- */
.site-footer{
  padding:50px 0 34px;
  border-top:1px solid var(--line);
  margin-top:30px;
}
.site-footer .container{
  display:flex;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.footer-brand{ max-width:280px; }
.footer-brand .brand{ margin-bottom:10px; }
.footer-cols{
  display:flex;
  gap:56px;
  flex-wrap:wrap;
}
.footer-col h4{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-muted);
  margin-bottom:14px;
}
.footer-col a{
  display:block;
  padding:5px 0;
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  opacity:.85;
}
.footer-col a:hover{ opacity:1; color:var(--orange-dark); }
.footer-bottom{
  text-align:center;
  color:var(--ink-muted);
  font-size:.8rem;
  margin-top:36px;
}

/* ---------- About pages ---------- */
.about-hero{
  display:flex;
  align-items:center;
  gap:26px;
  margin-bottom:10px;
}
.about-icon{
  width:96px; height:96px;
  border-radius:26px;
  box-shadow:0 10px 24px -10px rgba(46,33,23,.3);
  flex-shrink:0;
}
.about-hero h1{ margin:6px 0 2px; font-size:clamp(1.7rem,3vw,2.3rem); }
.about-tagline{
  color:var(--ink-muted);
  font-weight:700;
  font-size:1.02rem;
  margin:0;
}
.about-body{ margin-top:22px; }
.about-illustration{
  width:100%;
  max-width:360px;
  border-radius:24px;
  margin:0 auto 26px;
  box-shadow:var(--shadow-card);
}
.about-intro{
  font-size:1.05rem;
  color:var(--ink);
}
.about-cta-row{ margin:8px 0 36px; }
.about-features-title{ font-size:1.25rem; margin-bottom:20px; }
.features-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
.feature-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
}
.feature-emoji{ font-size:1.6rem; margin-bottom:8px; }
.feature-card h3{ font-size:1.02rem; margin-bottom:6px; }
.feature-card p{ font-size:.9rem; color:var(--ink-muted); margin:0; }

@media (max-width: 720px){
  .about-hero{ flex-direction:column; text-align:center; }
  .features-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Legal pages ---------- */
.legal-hero{
  padding-top:44px;
  padding-bottom:10px;
}
.legal-app-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border-radius:var(--radius-pill);
  padding:8px 16px 8px 8px;
  box-shadow:var(--shadow-card);
  font-weight:700;
  font-size:.88rem;
  margin-bottom:18px;
}
.legal-app-chip img{ width:30px; height:30px; border-radius:9px; }
.legal-doc-switch{
  display:flex;
  gap:10px;
  margin:22px 0 8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.legal-doc-switch::-webkit-scrollbar{ display:none; }
.legal-doc-switch a{
  padding:9px 18px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.86rem;
  background:var(--card);
  border:1px solid var(--line);
  white-space:nowrap;
  flex-shrink:0;
}
.legal-doc-switch a.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.legal-meta{
  color:var(--ink-muted);
  font-size:.88rem;
  margin-bottom:30px;
}
.legal-body{
  background:var(--card);
  border-radius:32px;
  padding:44px;
  box-shadow:var(--shadow-card);
  margin-bottom:60px;
}
.legal-body h2{
  font-size:1.3rem;
  margin-top:1.6em;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body ul{ padding-left:1.3em; margin:0 0 1em; }
.legal-body li{ margin-bottom:.4em; }
.legal-body a:not(.btn){ color:var(--orange-dark); font-weight:700; text-decoration:underline; }
.legal-body .btn{ text-decoration:none; }
.legal-body strong{ color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .apps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .banner{
    grid-template-columns:1fr;
    background:linear-gradient(180deg, #D6AEB4 0%, #ECCFD5 38%, var(--banner) 62%);
  }
  .banner-art{ min-height:0; height:220px; }
  .banner-art img{
    -webkit-mask-image:linear-gradient(180deg, #000 52%, transparent 99%);
    mask-image:linear-gradient(180deg, #000 52%, transparent 99%);
    object-position:center 20%;
  }
  .banner-body{ padding:0 28px 30px; }
  .footer-cols{ gap:36px; }
}
@media (max-width: 720px){
  .brand-text strong{ font-size:1.02rem; white-space:nowrap; }
  .brand img{ height:40px; }
  .main-nav{ display:none; }
  .menu-toggle{ display:block; }
  .apps-grid{ grid-template-columns:minmax(0,1fr); }
  .apps-panel{ padding:26px; }
  .legal-body{ padding:28px; }
  .header-actions .btn-contact span{ display:none; }
}

/* mobile nav drawer */
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  background:var(--card);
  margin:0 24px 18px;
  padding:14px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a, .mobile-nav .mn-group-label{
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:.92rem;
}
.mobile-nav a:hover{ background:var(--bg-soft); }
.mobile-nav .mn-group-label{
  color:var(--ink-muted);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding-bottom:0;
  margin-top:6px;
}
.mobile-nav .mn-sub{ padding-left:22px; font-weight:600; opacity:.85; }