/* ============================================================
   Feature pages, built on top of the landing page design
   system (index.css). Load index.css first, then this file.
   Each page sets --accent on the hero badge + illustration.
   ============================================================ */

/* ---------------------------------- Hero ---------------------------------- */
.fhero{padding-block:clamp(34px,5vw,72px) clamp(36px,5vw,68px);position:relative}
.fhero__grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(36px,5vw,74px)}
.fhero__copy{max-width:560px}

.ftag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.01em;padding:8px 14px 8px 11px;border-radius:var(--r-pill);margin-bottom:20px;
  background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.ftag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.fhero__title{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.35rem);letter-spacing:-.035em;line-height:1.05}
.fhero__lede{margin-top:18px;font-size:clamp(1.08rem,1rem + .4vw,1.28rem);color:var(--ink);line-height:1.6}
.fhero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ------------------------------ Illustration ------------------------------ */
.fart{position:relative}
.fart__panel{position:relative;aspect-ratio:4 / 3;border-radius:30px;overflow:hidden;
  border:1px solid rgba(255,255,255,.6);box-shadow:0 46px 96px -46px rgba(16,37,82,.42);
  background:
    radial-gradient(58% 70% at 16% 12%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(56% 66% at 88% 86%, rgba(199,243,223,.55), transparent 60%),
    radial-gradient(48% 58% at 84% 14%, rgba(188,214,255,.5), transparent 62%),
    linear-gradient(140deg,#fcfdff,#f2f6ff)}
.fart__blob{position:absolute;border-radius:50%;filter:blur(34px);opacity:.5;z-index:0}

.fart__tile{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:35%;aspect-ratio:1;
  border-radius:27px;background:#fff;display:grid;place-items:center;z-index:2;
  box-shadow:0 32px 60px -22px color-mix(in srgb,var(--accent) 55%, rgba(16,37,82,.5)),0 0 0 1px rgba(255,255,255,.75)}
.fart__tile svg{width:48%;height:48%;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.fart__chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;background:#fff;
  border-radius:13px;padding:9px 14px 9px 9px;font-family:var(--font-display);font-weight:700;font-size:.83rem;
  color:var(--navy);white-space:nowrap;box-shadow:0 20px 38px -18px rgba(16,37,82,.45),0 0 0 1px rgba(255,255,255,.6)}
.fart__chip .ci{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 14%,#fff)}
.fart__chip .ci svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fart__chip.c1{top:10%;right:5%}
.fart__chip.c2{bottom:11%;left:4%}

.fart__spark{position:absolute;z-index:1;display:block}
.fart__spark.s1{top:16%;left:12%}
.fart__spark.s2{bottom:20%;right:14%}
.fart__spark.s3{top:60%;left:20%}

/* ------------------------------- Highlights ------------------------------- */
.fwhat{padding-block:clamp(18px,3vw,38px) var(--section-pad)}
.fhl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fhl{padding:30px 26px;border-radius:var(--r-lg);background:rgba(255,255,255,.72);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.fhl:hover{transform:translateY(-5px);background:#fff;box-shadow:var(--shadow-md)}
.fhl__icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.fhl__icon svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fhl h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:8px}
.fhl p{color:var(--ink);font-size:.99rem;line-height:1.55}

/* ------------------------------- CTA band --------------------------------- */
.fcta{padding-block:clamp(18px,3vw,44px) clamp(40px,6vw,90px)}
.fcta__card{border-radius:var(--r-xl);padding:clamp(40px,5vw,76px) clamp(28px,4vw,56px);text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
  background:radial-gradient(120% 130% at 50% -25%,#1c3c8e,#06183f 68%)}
.fcta__card::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(40% 60% at 18% 12%,rgba(94,140,255,.5),transparent 70%),
    radial-gradient(40% 60% at 85% 90%,rgba(43,205,151,.32),transparent 70%)}
.fcta__card>*{position:relative;z-index:1}
.fcta__card h2{color:#fff;font-size:clamp(1.85rem,1.2rem + 2vw,2.75rem);letter-spacing:-.03em;line-height:1.08}
.fcta__card p{color:#cfe0ff;max-width:560px;margin:16px auto 0;font-size:1.12rem;line-height:1.55}
.fcta__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ----------------------------- Features hub ------------------------------- */
.findex-hero{padding-block:clamp(40px,6vw,84px) clamp(20px,3vw,40px);text-align:center}
.findex-hero__title{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);letter-spacing:-.035em;line-height:1.05;
  max-width:18ch;margin-inline:auto}
.findex-hero__lede{margin:18px auto 0;max-width:58ch;font-size:clamp(1.08rem,1rem + .4vw,1.25rem);
  color:var(--ink);line-height:1.6}
.findex-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}

.findex{padding-bottom:var(--section-pad)}
.fgroup{margin-top:clamp(28px,4vw,52px)}
.fgroup__title{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;padding-left:2px}
.fcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{display:flex;align-items:center;gap:16px;padding:22px;border-radius:var(--r-lg);text-decoration:none;
  background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s}
.fcard:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.fcard__icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 12%,#fff);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.fcard__icon svg{width:25px;height:25px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcard__body{flex:1;min-width:0}
.fcard__body b{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.fcard__body span{display:block;margin-top:3px;font-size:.92rem;color:var(--ink);line-height:1.4}
.fcard__go{font-size:1.2rem;color:var(--accent);flex:none;transition:transform .25s var(--ease)}
.fcard:hover .fcard__go{transform:translateX(4px)}

/* --------------------------- Feature showcase ----------------------------- */
.fshow{padding-block:clamp(18px,3vw,44px)}
.fshow__grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(34px,5vw,66px)}
.fshow__copy{max-width:520px}
.fshow__copy h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);letter-spacing:-.03em;line-height:1.1}
.fshow__copy p{margin-top:16px;color:var(--ink);font-size:1.08rem;line-height:1.6}
.fcheck{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:13px}
.fcheck li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;color:var(--blue-ink);line-height:1.45}
.fcheck .ck{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px;
  background:color-mix(in srgb,var(--accent) 15%,#fff);color:var(--accent)}
.fcheck .ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fshot{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:0 42px 84px -38px rgba(16,37,82,.46)}
.fshot img{display:block;width:100%;height:auto}

/* ---------------------------- Connected flow ------------------------------ */
.fflow{padding-block:clamp(28px,4vw,54px)}
.fflow__card{border-radius:var(--r-xl);padding:clamp(30px,4vw,54px);background:rgba(255,255,255,.66);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.fflow__head{text-align:center;max-width:640px;margin:0 auto clamp(28px,4vw,46px)}
.fflow__head h2{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.3rem);letter-spacing:-.03em;line-height:1.1}
.fflow__head p{margin-top:12px;color:var(--ink);font-size:1.05rem;line-height:1.55}
.fflow__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fstep{position:relative}
.fstep__n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:1rem;color:#fff;background:var(--accent);margin-bottom:14px;
  box-shadow:0 10px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.fstep h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:6px}
.fstep p{color:var(--ink);font-size:.95rem;line-height:1.5}
.fstep__line{position:absolute;top:19px;left:48px;right:-9px;height:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%,transparent) 0 6px,transparent 6px 12px)}
.fstep:last-child .fstep__line{display:none}

/* ----------------------------- More you can do ---------------------------- */
.fmore{padding-block:clamp(18px,3vw,38px) var(--section-pad)}
.fmore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fmore-item{display:flex;gap:14px;padding:22px;border-radius:var(--r-md);background:rgba(255,255,255,.6);
  border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.fmore-item:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow-sm)}
.fmore-item .mi{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,#fff);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.fmore-item .mi svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fmore-item b{display:block;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:3px;letter-spacing:-.01em}
.fmore-item span{font-size:.92rem;color:var(--ink);line-height:1.45}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width:900px){
  .fhero__grid{grid-template-columns:1fr;gap:34px;max-width:560px;margin-inline:auto}
  .fhl-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .fcard-grid{grid-template-columns:repeat(2,1fr)}
  .fshow__grid{grid-template-columns:1fr;gap:30px;max-width:560px;margin-inline:auto}
  .fshow__media{order:-1}
  .fflow__steps{grid-template-columns:repeat(2,1fr);gap:24px 18px}
  .fstep__line{display:none}
  .fmore-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .fhero__ctas .btn,.fcta__ctas .btn,.findex-hero__ctas .btn{width:100%}
  .fhero__ctas{width:min(100%,360px)}
  .fcta__ctas,.findex-hero__ctas{width:min(100%,360px);margin-inline:auto}
  .fart__chip{font-size:.76rem}
  .fcard-grid,.fflow__steps,.fmore-grid{grid-template-columns:1fr}
}