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

:root{
  --ink:       #071224;
  --navy:      #173450;
  --teal:      #0c84af;
  --teal-dk:   #0a6889;
  --teal-lt:   rgba(12,132,175,.11);
  --teal-glow: rgba(12,132,175,.26);
  --sage:      #2c9060;
  --sage-lt:   rgba(44,144,96,.11);
  --sage-glow: rgba(44,144,96,.22);
  --gold:      #c29438;
  --gold-lt:   rgba(194,148,56,.10);
  --bg:        #eaf1f8;
  --surface:   #ffffff;
  --glass:     rgba(255,255,255,.70);
  --text:      #1a2c3d;
  --muted:     #4e6272;
  --border:    rgba(22,52,80,.08);
  --header-h:  68px;
  --radius-xl: 2rem;
  --radius-lg: 1.2rem;
  --radius-md: .9rem;
}

html{height:100%}
body{
  min-height:100%;
  font-family:'Raleway',sans-serif;
  color:var(--text);
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 55% at 12% 110%, rgba(44,144,96,.09) 0%, transparent 62%),
    radial-gradient(ellipse 60% 45% at 88% -8%, rgba(12,132,175,.11) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 55% 85%, rgba(194,148,56,.05) 0%, transparent 55%),
    linear-gradient(155deg, #edf4fb 0%, #e3edf6 50%, #dce8f3 100%);
}

/* ── Decorative concentric rings (top-right) ── */
body::before,body::after{content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0}
body::before{
  width:72vmin;height:72vmin;top:-24vmin;right:-18vmin;
  border:1px solid rgba(12,132,175,.14);
  box-shadow:inset 0 0 100px rgba(12,132,175,.03);
}
body::after{
  width:52vmin;height:52vmin;top:-13vmin;right:-8vmin;
  border:1.5px solid rgba(12,132,175,.08);
}

/* ── Ambient glow orbs ── */
.orb{position:fixed;pointer-events:none;z-index:0;border-radius:50%}
.orb-1{
  width:62vw;height:62vw;top:-28vw;right:-18vw;
  background:radial-gradient(circle,rgba(12,132,175,.10) 0%,transparent 65%);
  filter:blur(45px);
}
.orb-2{
  width:48vw;height:48vw;bottom:-17vw;left:-14vw;
  background:radial-gradient(circle,rgba(44,144,96,.08) 0%,transparent 65%);
  filter:blur(35px);
}

/* ── Header ── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:var(--header-h);
  display:flex;align-items:center;
  padding:0 clamp(1.5rem,5vw,4rem);
  background:rgba(237,244,251,.88);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(22,52,80,.06), 0 4px 28px rgba(12,132,175,.04);
  opacity:0;animation:fadeUp .6s ease .1s forwards;
}
.header-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.header-brand{font-size:1.06rem;letter-spacing:.05em}
.header-brand strong{color:var(--ink);font-weight:700}
.header-brand em{
  color:var(--teal);font-style:italic;font-weight:300;
  font-family:'Cormorant Garamond',serif;font-size:1.26rem;
}
.header-badge{
  margin-left:auto;
  background:rgba(255,255,255,.6);
  color:var(--teal-dk);
  border:1px solid rgba(12,132,175,.18);
  padding:.3rem .95rem;border-radius:99px;
  font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  backdrop-filter:blur(8px);
  box-shadow:0 1px 8px rgba(12,132,175,.08);
}

/* ── Page grid ── */
.page{
  position:relative;z-index:1;
  height:100vh;overflow:hidden;
  max-width:1380px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:clamp(2rem,4vw,5rem);
  padding:calc(var(--header-h) + 2.5rem) clamp(2rem,6vw,6rem) 2.5rem;
}
.left-col{display:flex;flex-direction:column;align-items:flex-start}

/* ── Right column ── */
.right-col{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;
}

/* ── Eyebrow label ── */
.eyebrow{
  display:flex;align-items:center;gap:.65rem;
  margin-bottom:1.2rem;
  opacity:0;animation:fadeUp .7s ease .3s forwards;
}
.eyebrow-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--teal);flex-shrink:0;
  box-shadow:0 0 0 3px var(--teal-lt);
}
.eyebrow-text{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-dk)}

/* ── Headline ── */
.headline{text-align:left;width:100%;opacity:0;animation:fadeUp 1s ease .5s forwards;margin-bottom:1rem}
.headline h1{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(3rem,4.4vw,5.2rem);
  line-height:1.05;color:var(--ink);letter-spacing:-.03em;
}
.headline h1 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--teal) 20%, #34c4ec 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.headline h1 .word-warm{
  font-style:italic;
  background:linear-gradient(135deg, var(--sage) 15%, #54c98e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Sub ── */
.sub{
  text-align:left;max-width:460px;
  font-size:1rem;color:var(--muted);font-weight:300;line-height:1.9;
  opacity:0;animation:fadeUp 1s ease .7s forwards;margin-bottom:1.85rem;
}

/* ── Feature cards ── */
.cards-row{
  display:flex;flex-wrap:wrap;gap:.65rem;
  justify-content:flex-start;width:100%;
  opacity:0;animation:fadeUp 1s ease .9s forwards;margin-bottom:2.1rem;
}
.pill-card{
  display:flex;align-items:center;gap:.7rem;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.78);
  border-radius:var(--radius-lg);
  padding:.72rem 1.2rem;
  font-size:.83rem;color:var(--text);font-weight:500;
  box-shadow:
    0 2px 16px rgba(8,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),
             box-shadow .26s cubic-bezier(.2,.8,.2,1),
             border-color .26s;
  cursor:default;
}
.pill-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 36px rgba(8,23,42,.12),
    0 0 0 1px rgba(12,132,175,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
  border-color:rgba(12,132,175,.26);
}
.pill-icon{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pill-icon svg{width:15px;height:15px}
.pi-sky  {background:linear-gradient(135deg,rgba(12,132,175,.18),rgba(12,132,175,.08))}
.pi-green{background:linear-gradient(135deg,rgba(44,144,96,.18),rgba(44,144,96,.08))}
.pi-sand {background:linear-gradient(135deg,rgba(194,148,56,.18),rgba(194,148,56,.08))}

/* ── M-accent (mobile decoration) ── */
.m-accent{display:none;align-items:center;gap:.55rem}
.m-accent-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--teal);flex-shrink:0;
  box-shadow:0 0 0 3px var(--teal-lt);
}
.m-accent-line{height:2px;width:clamp(28px,8vw,44px);background:linear-gradient(90deg,var(--teal),var(--sage));border-radius:2px;opacity:.7}

/* ── CTA ── */
.cta-btn{
  display:inline-flex;align-items:center;gap:.85rem;
  background:linear-gradient(135deg, #22cc5e 0%, #25D366 55%, #1dba58 100%);
  color:#fff;text-decoration:none;
  font-family:'Raleway',sans-serif;font-size:.96rem;font-weight:700;
  letter-spacing:.03em;
  padding:1rem 2.4rem 1rem 1.85rem;
  border-radius:15px;
  box-shadow:
    0 8px 28px rgba(37,211,102,.36),
    0 2px 6px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),
             box-shadow .26s cubic-bezier(.2,.8,.2,1);
  opacity:0;animation:fadeUp 1s ease 1.05s forwards;
  position:relative;overflow:hidden;
}
.cta-btn::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 55%);
  border-radius:inherit;pointer-events:none;
}
.cta-btn:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:
    0 22px 58px rgba(37,211,102,.50),
    0 4px 12px rgba(0,0,0,.08);
}
.cta-btn svg{flex-shrink:0}

/* ── Footer ── */
.site-footer{
  position:fixed;bottom:1rem;left:0;right:0;z-index:10;
  text-align:center;
  font-size:.67rem;color:rgba(26,55,82,.32);letter-spacing:.06em;
  opacity:0;animation:fadeUp 1s ease 1.35s forwards;
  pointer-events:none;
}
.cq-sep{margin:0 .4em;opacity:.5}

/* ── Hero illustration ── */
.hero-illo-wrap{
  position:relative;z-index:1;
  width:88%;max-width:510px;
  height:calc(100vh - var(--header-h) - 7rem);
  border-radius:2.4rem;overflow:hidden;
  box-shadow:
    0 36px 90px rgba(8,23,42,.22),
    0 8px 20px rgba(8,23,42,.08),
    0 0 0 1px rgba(255,255,255,.55);
  opacity:0;animation:fadeUpFloat 1.4s cubic-bezier(.18,.82,.35,1) .35s forwards;
}
/* gradient overlay for polish */
.hero-illo-wrap::after{
  content:'';
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(12,132,175,.06) 0%, transparent 28%),
    linear-gradient(0deg, rgba(7,18,36,.14) 0%, transparent 38%);
  pointer-events:none;z-index:2;
  border-radius:inherit;
}
/* decorative ring offset outside card */
.hero-illo-wrap::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:2.55rem;
  border:1.5px solid rgba(12,132,175,.24);
  transform:translate(15px,15px);
  z-index:-1;
  pointer-events:none;
}
.hero-img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}

/* ── Hero floating badge ── */
.hero-badge{
  position:absolute;
  bottom:1.6rem;left:1.4rem;
  z-index:3;
  display:flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:99px;
  padding:.48rem 1rem .48rem .7rem;
  font-size:.72rem;font-weight:600;
  color:var(--text);
  box-shadow:0 4px 18px rgba(8,23,42,.12),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;animation:fadeUp .8s ease 1.1s forwards;
}
.hero-badge-dot{
  width:8px;height:8px;border-radius:50%;background:#2ec06b;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(46,192,107,.22);
  animation:pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 3px rgba(46,192,107,.22)}
  50%{box-shadow:0 0 0 5px rgba(46,192,107,.12)}
}

/* ── Animations ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes fadeUpFloat{
  from{opacity:0;transform:translateY(32px)}
  to  {opacity:1;transform:translateY(-10px)}
}

/* ─────────────────── MOBILE ─────────────────── */
@media(max-width:840px){
  :root{--header-h:56px}
  body::before,body::after{display:none}
  .right-col::before{display:none}
  .eyebrow{display:none}
  .header-badge{display:none}

  html,body{height:100%;overflow:hidden}

  .page{
    grid-template-columns:1fr;
    grid-template-rows:20vh 1fr;
    gap:.6rem;
    padding:calc(var(--header-h) + .75vh) 0 calc(3rem + .5vh);
    align-items:stretch;
    height:100vh;min-height:unset;box-sizing:border-box;
  }
  .left-col{
    grid-row:2;height:100%;
    justify-content:space-between;gap:0;
    padding:0 5vw;
  }
  .right-col{
    grid-row:1;display:flex;align-items:stretch;
    position:static;align-self:auto;
  }
  .hero-illo-wrap{
    width:100%;max-width:100%;height:100%;
    border-radius:0;box-shadow:none;
    opacity:0;animation:fadeUp .8s ease .2s forwards;
  }
  .hero-illo-wrap::before{display:none}
  .hero-img{object-fit:cover;object-position:center 25%}

  .m-accent{display:flex}

  .headline{margin-bottom:0}
  .headline h1{font-size:clamp(1.7rem,9vw,3.2rem);line-height:1.12}

  .sub{max-width:100%;font-size:clamp(.84rem,3.8vw,1.1rem);line-height:1.5;margin-bottom:0}

  .cards-row{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(.3rem,.6vh,.5rem);margin-bottom:0;
  }
  .cards-row .pill-card:last-child{grid-column:1/-1;justify-self:start}
  .pill-card{
    font-size:clamp(.78rem,3.2vw,.96rem);
    padding:clamp(.35rem,.7vh,.6rem) clamp(.65rem,1.5vw,.95rem);
    border-radius:10px;
    backdrop-filter:none; /* performance on mobile */
    -webkit-backdrop-filter:none;
  }
  .pill-icon{width:clamp(20px,3vh,28px);height:clamp(20px,3vh,28px);border-radius:8px}

  .cta-btn{
    width:100%;justify-content:center;
    font-size:clamp(.9rem,4vw,1.2rem);
    padding:clamp(.72rem,1.5vh,1rem) 1.5rem;
    border-radius:12px;
  }
  .cta-btn svg{width:clamp(17px,2.5vh,22px);height:clamp(17px,2.5vh,22px)}

  .site-footer{font-size:clamp(.52rem,1.2vw,.64rem);bottom:.6rem}
}