/* Simplyfai — index page styles
   Auto-generated from the page mockups. Edit here, not inline. */

:root{
    /* Brand, pulled from the logo */
    --teal:#0E7C7B;
    --teal-d:#0A5C5B;
    --teal-l:#16A39B;
    --gold:#C9A24B;
    --gold-d:#A9842F;
    --ink:#0F2A2A;          /* deep teal-charcoal for headings */
    --body:#475857;         /* muted slate-teal body */
    --muted:#7C8B8A;
    --bg:#FBFCFC;           /* near-white page */
    --surface:#FFFFFF;
    --surface-2:#F2F7F6;    /* soft teal tint */
    --surface-gold:#FBF6EA; /* soft gold tint */
    --border:#E6ECEB;
    --border-2:#D6E0DF;
    --radius:18px;
    --max:1140px;
    --shadow:0 1px 2px rgba(15,42,42,.04), 0 12px 34px rgba(15,42,42,.06);
    --shadow-lg:0 2px 6px rgba(15,42,42,.05), 0 24px 60px rgba(14,124,123,.10);
  }
body{
    background:var(--bg);color:var(--body);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
.mono{font-family:"SF Mono",ui-monospace,"Roboto Mono",Menlo,monospace;}
.grad-text{
    background:linear-gradient(95deg,var(--teal) 0%,var(--teal-l) 45%,var(--gold) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
    padding:13px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;
    transition:transform .15s ease, box-shadow .25s ease, background .2s ease;}
.btn-primary{background:linear-gradient(100deg,var(--teal),var(--teal-l));color:#fff;
    box-shadow:0 8px 24px rgba(14,124,123,.28);}
.btn-ghost{background:var(--surface);border:1px solid var(--border-2);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--teal)}
/* NAV */
  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(251,252,252,.82);border-bottom:1px solid var(--border)}
/* Brand logo — actual Simplyfai wordmark */
  .brand{display:inline-flex;align-items:center}
/* HERO */
  .hero{position:relative;padding:92px 0 76px;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;
    background:radial-gradient(60% 50% at 50% 0%,rgba(22,163,155,.10),transparent 70%),
               radial-gradient(40% 40% at 80% 10%,rgba(201,162,75,.12),transparent 70%);}
.grid-bg{position:absolute;inset:0;z-index:0;opacity:.6;
    background-image:linear-gradient(rgba(14,124,123,.05) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(14,124,123,.05) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 65% 50% at 50% 15%,#000 25%,transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 65% 50% at 50% 15%,#000 25%,transparent 75%);}
.hero .inner{position:relative;z-index:2}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--teal-d);font-weight:600;
    border:1px solid var(--border-2);background:var(--surface);box-shadow:var(--shadow);
    padding:7px 15px;border-radius:100px;margin-bottom:28px}
.pill .live{width:7px;height:7px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 0 3px rgba(22,163,155,.18)}
h1{font-size:clamp(38px,6vw,68px);line-height:1.04;letter-spacing:-.03em;font-weight:780;color:var(--ink);margin-bottom:22px}
.sub{font-size:clamp(17px,2.2vw,21px);color:var(--body);max-width:620px;margin:0 auto 36px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trust{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:16px}
.trust .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.logos{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
.logos span{font-weight:700;font-size:17px;color:#9AA8A7;letter-spacing:-.01em}
/* STATS */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0 8px}
.stat{padding:26px 22px;border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface);box-shadow:var(--shadow);text-align:left}
.stat .num{font-size:38px;font-weight:780;letter-spacing:-.02em;display:inline-block}
.stat .cap{font-size:14px;color:var(--body);margin-top:4px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
section{position:relative;padding:84px 0}
h2{font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:760;color:var(--ink);margin-bottom:16px}
.lead{color:var(--body);font-size:18px;max-width:560px}
.sec-head{margin-bottom:48px}
/* SERVICES */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{padding:30px;border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.card .ico{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    font-size:22px;margin-bottom:18px;color:var(--teal);
    background:var(--surface-2);border:1px solid var(--border-2)}
.card:nth-child(2) .ico,.card:nth-child(4) .ico{color:var(--gold-d);background:var(--surface-gold);border-color:#EFE4C9}
.card h3{font-size:20px;font-weight:680;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.card p{color:var(--body);font-size:15px}
.card .out{margin-top:16px;font-size:13px;color:var(--teal);font-weight:600;font-family:"SF Mono",monospace}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
/* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:28px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.step .n{font-family:"SF Mono",monospace;font-size:13px;font-weight:700;color:var(--gold-d);margin-bottom:14px}
.step h4{font-size:18px;font-weight:680;color:var(--ink);margin-bottom:8px}
.step p{color:var(--body);font-size:14.5px}
.step .t{margin-top:16px;font-size:12px;color:var(--muted);font-family:"SF Mono",monospace}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
/* PROOF */
  .proof{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;
    padding:46px;border:1px solid var(--border-2);border-radius:24px;box-shadow:var(--shadow-lg);
    background:linear-gradient(120deg,var(--surface-2),var(--surface) 55%,var(--surface-gold))}
.proof .quote{font-size:24px;line-height:1.42;letter-spacing:-.01em;font-weight:560;color:var(--ink)}
.proof .who{margin-top:22px;color:var(--body);font-size:15px}
.proof .who b{color:var(--ink);font-weight:700}
.proof .metrics{display:grid;gap:14px}
.pm{padding:20px 22px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.pm .v{font-size:30px;font-weight:780;letter-spacing:-.02em;display:inline-block}
.pm .k{font-size:13.5px;color:var(--body);margin-top:2px}
@media(max-width:820px){.proof{grid-template-columns:1fr;padding:30px}}
/* TWO PATH */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.path{padding:34px;border-radius:20px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}
.path.ent{border:1.5px solid var(--teal);box-shadow:var(--shadow-lg)}
.path.ent::before{content:"Most popular";position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d);background:var(--surface-2);
    border:1px solid var(--border-2);padding:5px 11px;border-radius:100px}
.path .tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-family:"SF Mono",monospace}
.path h3{font-size:24px;font-weight:740;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.path p{color:var(--body);font-size:15px;margin-bottom:22px}
.path ul{list-style:none;display:grid;gap:10px;margin-bottom:26px}
.path li{font-size:14.5px;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.path li::before{content:"✓";font-weight:800;color:var(--teal);flex:0 0 auto}
.path.ent li::before{color:var(--gold-d)}
@media(max-width:820px){.paths{grid-template-columns:1fr}}
/* FINAL CTA */
  .final{text-align:center;padding:78px 40px;border-radius:28px;position:relative;overflow:hidden;
    border:1px solid var(--border-2);box-shadow:var(--shadow-lg);
    background:linear-gradient(120deg,var(--surface-2),var(--surface) 50%,var(--surface-gold))}
.final h2{position:relative;z-index:2}
.final .lead{margin:0 auto 30px}
footer{border-top:1px solid var(--border);padding:46px 0 60px;color:var(--muted);font-size:14px;margin-top:30px}
.tagline{font-size:13px;color:var(--muted);margin-top:2px;font-weight:500;letter-spacing:.01em}