/* ============================================================
   April's Freelance Opportunity — shared design system
   Bold · colorful · playful · premium
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=Outfit:wght@300..800&display=swap');

:root{
  /* structure */
  --navy:#16203B; --navy2:#1F2C4D; --ink:#222a3d; --mute:#6B7588;
  --cream:#FBF8F3; --paper:#FFFFFF; --line:#ECE6DC;

  /* zone accents */
  --teal:#0FB5AE;  --teal-d:#0A8C86;  --teal-t:#DDF6F4;
  --green:#34B364; --green-d:#1F8A48; --green-t:#E1F6E9;
  --blue:#3D7DE0;  --blue-d:#295EB0;  --blue-t:#E5EEFC;
  --gold:#F2A900;  --gold-d:#B97F00;  --gold-t:#FCEFCF;
  --coral:#F2654E; --coral-d:#C8412C; --coral-t:#FCE3DD;
  --grape:#8A6FD4; --grape-d:#6A4FB8; --grape-t:#EDE7FB;
  --pink:#F25C9C;  --pink-t:#FBE0EC;

  --shadow-sm:0 3px 10px rgba(22,32,59,.07);
  --shadow:0 12px 30px rgba(22,32,59,.10);
  --shadow-lg:0 24px 60px rgba(22,32,59,.16);
  --shadow-color:0 14px 34px rgba(15,181,174,.22);

  --r:20px; --r-lg:28px; --r-xl:38px;
  --maxw:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Outfit',sans-serif; color:var(--ink); background:var(--cream);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- type ---------- */
.display{font-family:'Fraunces',serif; font-weight:800; line-height:1.02; letter-spacing:-.02em;}
h1{font-family:'Fraunces',serif; font-weight:800; line-height:1.04; letter-spacing:-.02em; color:var(--navy);}
h2{font-family:'Fraunces',serif; font-weight:700; line-height:1.08; letter-spacing:-.01em; color:var(--navy);}
h3{font-family:'Fraunces',serif; font-weight:600; color:var(--navy);}
.eyebrow{font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:13px;}
.lead{font-size:clamp(17px,2.4vw,20px); color:var(--mute); line-height:1.45;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.section{padding:clamp(32px,5vw,60px) 0;}
.section + .section{padding-top:clamp(20px,3vw,40px);}
@keyframes revealUp { from { transform:translateY(22px); } to { transform:none; } }
@keyframes staggerUp { from { transform:translateY(18px); } to { transform:none; } }
.reveal{animation:revealUp .55s var(--ease) both;}
.reveal.in{animation:none;}
.stagger > *{animation:staggerUp .5s var(--ease) both;}
.stagger > *:nth-child(2){animation-delay:.06s;}
.stagger > *:nth-child(3){animation-delay:.12s;}
.stagger > *:nth-child(4){animation-delay:.18s;}
.stagger > *:nth-child(5){animation-delay:.24s;}
.stagger > *:nth-child(6){animation-delay:.30s;}
.stagger.in > *{animation:none;}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(251,248,243,.82);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:18px;}
.brand{display:flex; align-items:center; gap:9px; font-family:'Fraunces',serif; font-weight:800; color:var(--navy); font-size:18px; white-space:nowrap;}
.brand .spark{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.nav-links{display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{font-weight:600; font-size:14px; color:var(--ink); padding:7px 12px; border-radius:11px; position:relative; white-space:nowrap; transition:background .2s,color .2s;}
.nav-links a:hover{background:var(--paper);}
.nav-links a.active{background:var(--navy); color:#fff;}
.nav-links a.seen::after{content:""; position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--teal);}
.nav-links a.active.seen::after{background:#9FE3DF;}

/* progress bar */
.progress{height:3px; background:transparent;}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--blue),var(--grape)); width:0; transition:width .5s var(--ease);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:999px; border:none; cursor:pointer; transition:transform .18s var(--ease), box-shadow .25s; font-family:'Outfit',sans-serif;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--blue)); color:#fff; box-shadow:var(--shadow-color);}
.btn-primary:hover{box-shadow:0 18px 40px rgba(15,181,174,.34);}
.btn-ghost{background:var(--paper); color:var(--navy); box-shadow:var(--shadow-sm);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-lg{font-size:18px; padding:18px 34px;}

/* next/prev footer */
.pager{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:32px;}
.pager .spacer{flex:1;}

/* ---------- cards ---------- */
.card{background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px; position:relative; transition:transform .25s var(--ease), box-shadow .25s;}
.card-hover:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.grid{display:grid; gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g6{grid-template-columns:repeat(3,1fr);}

.icon-badge{width:58px;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:27px;}
.chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:8px 15px;border-radius:999px;}
.tag{font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.02em;}
.pill-bar{height:7px;border-radius:7px 7px 0 0;}

/* zone color helpers */
.z-teal{--z:var(--teal);--zd:var(--teal-d);--zt:var(--teal-t);}
.z-green{--z:var(--green);--zd:var(--green-d);--zt:var(--green-t);}
.z-blue{--z:var(--blue);--zd:var(--blue-d);--zt:var(--blue-t);}
.z-gold{--z:var(--gold);--zd:var(--gold-d);--zt:var(--gold-t);}
.z-coral{--z:var(--coral);--zd:var(--coral-d);--zt:var(--coral-t);}
.z-grape{--z:var(--grape);--zd:var(--grape-d);--zt:var(--grape-t);}

/* hero blobs */
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;pointer-events:none;}
.hero{position:relative;overflow:hidden;}
.hero > *:not(.blob){position:relative;z-index:1;}

/* dark section */
.dark{background:var(--navy); color:#EAF0FA;}
.dark h1,.dark h2,.dark h3{color:#fff;}
.dark .lead{color:#AFBDD6;}
.dark .card{background:var(--navy2); box-shadow:none;}

/* page intro */
.page-head{padding:clamp(18px,3vw,34px) 0 8px;}
.page-head .eyebrow{margin-bottom:14px;}
.page-head h1{font-size:clamp(34px,6vw,58px);}
.page-head .lead{margin-top:16px; max-width:640px;}

/* footer */
.foot{background:var(--navy); color:#9FB0CE; padding:26px 0; font-size:14px; text-align:center;}
.foot a{color:#9FE3DF; font-weight:600;}

/* small helpers */
.center{text-align:center;}
.mt-s{margin-top:12px;} .mt-m{margin-top:20px;} .mt-l{margin-top:30px;}
.muted{color:var(--mute);}
.disclaimer{font-size:13px;color:var(--mute);line-height:1.5;}

/* list with colored markers */
.checks{list-style:none;display:flex;flex-direction:column;gap:11px;}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:16px;}
.checks li .m{font-size:18px;line-height:1.3;flex-shrink:0;}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .g3,.g6{grid-template-columns:repeat(2,1fr);}
  .nav-links{gap:2px;}
  .nav-links a{padding:7px 9px;font-size:13px;}
}
@media(max-width:620px){
  .g2,.g3,.g6{grid-template-columns:1fr;}
  .brand span.full{display:none;}
  .nav-links{position:fixed;bottom:0;left:0;right:0;top:auto;background:rgba(251,248,243,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 10px;justify-content:flex-start;}
  .nav-inner{padding:11px 18px;}
  body{padding-bottom:58px;}
  .section{padding:28px 0;}
  .section + .section{padding-top:18px;}
  .page-head{padding-top:12px;}
  .grid{gap:14px;}
  .card{padding:20px;}
  .mt-l{margin-top:22px;} .mt-m{margin-top:16px;}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal,.stagger>*{opacity:1!important;transform:none!important;}
}


/* ---------- lifestyle / freedom layer ---------- */
.anywhere-hero{background:linear-gradient(135deg,rgba(237,231,251,.72),rgba(221,246,244,.72),rgba(252,239,207,.55));}
.desk-card{background:linear-gradient(180deg,#fff,var(--coral-t));}
.freedom-card{background:linear-gradient(180deg,#fff,var(--teal-t));}
.lifestyle-grid .card{overflow:hidden;}
.lifestyle-grid .card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-42px;bottom:-50px;background:var(--zt);opacity:.75;}

@media(max-width:760px){
  .card[style*="grid-template-columns:1.1fr .9fr"]{display:block!important;}
  .card[style*="grid-template-columns:1.1fr .9fr"] .center{margin-top:22px;}
}