/* ============================================================
   PROMELY — Landing System
   Palette "Sereno" · Hanken Grotesk + JetBrains Mono
   ============================================================ */

:root{
  --bg:#f5f7f8;
  --card:#ffffff;
  --ink:#13201f;
  --muted:#5d6b6b;
  --faint:#8a9695;
  --line:#e6eceb;
  --line2:#f0f4f3;
  --accent:oklch(0.58 0.085 182);
  --accent-deep:oklch(0.50 0.09 184);
  --accent-soft:oklch(0.95 0.025 182);
  --accent-glow:oklch(0.72 0.13 182);
  --green:oklch(0.60 0.12 158);
  --green-bg:oklch(0.95 0.04 158);
  --blue:oklch(0.58 0.11 240);
  --blue-bg:oklch(0.95 0.035 240);
  --amber:oklch(0.70 0.13 70);
  --amber-bg:oklch(0.95 0.05 78);
  --rose:oklch(0.62 0.15 18);
  --rose-bg:oklch(0.95 0.04 18);
  --indigo:oklch(0.55 0.13 275);
  --wa:#25D366;

  /* dark hero ink */
  --ink0:#0a1413;
  --ink1:#0e1b19;
  --ink2:#13201f;

  --shadow-xs:0 1px 2px rgba(20,40,40,.05);
  --shadow:0 1px 2px rgba(20,40,40,.04),0 6px 20px -8px rgba(20,40,40,.12);
  --shadow-lg:0 12px 40px -12px rgba(20,40,40,.20);
  --shadow-xl:0 40px 90px -30px rgba(10,30,28,.45);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1); /* @kind other */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',monospace;font-feature-settings:'tnum';letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
::selection{background:var(--accent-glow);color:#06110f;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:clamp(46px,6.5vw,82px) 0;}

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--accent-deep);
  padding:6px 13px;border-radius:30px;
  background:var(--accent-soft);
  border:1px solid color-mix(in oklch,var(--accent) 18%,transparent);
}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--accent);}

.h-sec{
  font-size:clamp(32px,4.6vw,54px);
  font-weight:700;line-height:1.04;letter-spacing:-0.04em;
  text-wrap:balance;
}
.lede{
  font-size:clamp(17px,1.9vw,21px);color:var(--muted);line-height:1.5;
  max-width:48ch;text-wrap:pretty;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 24px;border-radius:13px;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-0.01em;
  border:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s;
}
.btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.18);}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent);}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-xs);}
.btn-ghost:hover{border-color:color-mix(in oklch,var(--accent) 35%,var(--line));transform:translateY(-2px);}
.btn-light{background:rgba(255,255,255,.10);color:#eaf3f1;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);}
.btn-light:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.btn-sm{height:42px;padding:0 17px;font-size:14.5px;border-radius:11px;}
.btn-lg{height:58px;padding:0 30px;font-size:17px;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,border-color .3s,box-shadow .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:30px;position:relative;}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;letter-spacing:-0.03em;color:#eaf3f1;transition:color .3s;flex:0 0 auto;}
.nav.solid .brand{color:var(--ink);}
.brand-mark{width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:block;box-shadow:0 6px 16px -6px rgba(0,118,107,.55);}

/* ---- Desktop nav links ---- */
.nav-links{display:flex;gap:8px;align-items:center;margin-left:24px;}
.nav-links a{padding:9px 14px;border-radius:10px;font-size:15px;font-weight:500;color:rgba(232,243,241,.72);transition:color .2s,background .2s;white-space:nowrap;}
.nav.solid .nav-links a{color:var(--muted);}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08);}
.nav.solid .nav-links a:hover{color:var(--ink);background:var(--line2);}

/* ---- Dropdown "Scopri più" ---- */
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-trigger{
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:10px;font-size:15px;font-weight:500;
  color:rgba(232,243,241,.72);transition:color .2s,background .2s;
  font-family:inherit;
  white-space:nowrap;
}
.nav.solid .nav-dropdown-trigger{color:var(--muted);}
.nav-dropdown-trigger:hover{color:#fff;background:rgba(255,255,255,.08);}
.nav.solid .nav-dropdown-trigger:hover{color:var(--ink);background:var(--line2);}
.nav-dropdown-trigger.open{background:rgba(255,255,255,.08);}
.nav.solid .nav-dropdown-trigger.open{background:var(--line2);}
.dropdown-icon{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
.nav-dropdown-trigger.open .dropdown-icon{transform:rotate(180deg);}

.nav-dropdown-menu{
  position:absolute;top:100%;left:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  min-width:180px;padding:8px;
  margin-top:6px;
  display:none;flex-direction:column;gap:4px;
  box-shadow:0 12px 40px -12px rgba(20,40,40,.20);
  animation:slideDown .22s var(--ease);
  z-index:101;
}
.nav-dropdown-menu.open{display:flex;}
.nav-dropdown-menu a{
  padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--ink);transition:background .2s;
}
.nav-dropdown-menu a:hover{background:var(--accent-soft);color:var(--accent-deep);}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.nav-login{font-size:15px;font-weight:600;padding:10px 16px;border-radius:11px;color:rgba(232,243,241,.9);transition:.2s;white-space:nowrap;}
.nav.solid .nav-login{color:var(--ink);}
.nav-login:hover{background:rgba(255,255,255,.10);}
.nav.solid .nav-login:hover{background:var(--line2);}

/* ---- Mobile hamburger menu ---- */
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:10px;width:52px;height:52px;
  flex:0 0 auto;align-items:center;justify-content:center;
}
.nav-hamburger span{
  width:24px;height:2.5px;background:rgba(232,243,241,.72);
  border-radius:2px;transition:all .3s var(--ease);
}
.nav.solid .nav-hamburger span{background:var(--muted);}

.nav-hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---- Mobile menu panel ---- */
.nav-mobile-menu{
  position:fixed;top:60px;left:0;right:0;
  background:var(--bg);border-top:1px solid var(--line);
  display:none;flex-direction:column;gap:0;
  padding:16px 0;z-index:102;
  height:calc(100vh - 60px);
  overflow-y:auto;
  animation:slideDownFull .3s var(--ease);
}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu a{
  padding:14px 24px;font-size:16px;font-weight:500;
  color:var(--ink);transition:background .2s;
  border-radius:0;
}
.nav-mobile-menu a:hover{background:var(--line2);}
.nav-mobile-menu hr{
  border:none;border-top:1px solid var(--line);
  margin:12px 0;
}
.nav-mobile-menu .mobile-login{
  font-weight:600;color:var(--muted);
}
.nav-mobile-menu .btn{margin:0 16px;width:calc(100% - 32px);}

@keyframes slideDownFull{
  from{opacity:0;transform:translateY(-16px);}
  to{opacity:1;transform:translateY(0);}
}

/* ============================================================
   HERO  (dark)
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(120% 80% at 75% -10%, oklch(0.42 0.10 182 / .55), transparent 55%),
    radial-gradient(90% 70% at 8% 8%, oklch(0.46 0.09 200 / .30), transparent 50%),
    linear-gradient(180deg,var(--ink0),var(--ink2) 60%,#0d1917);
  color:#eaf3f1;
  padding:148px 0 0;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 0%,#000,transparent 75%);
}
.hero-grid{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.04fr 0.96fr;gap:48px;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding:7px 14px 7px 9px;border-radius:30px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  color:#cfe6e1;backdrop-filter:blur(6px);
}
.hero-badge .dot{display:flex;align-items:center;gap:6px;font-weight:700;color:#fff;background:var(--wa);padding:3px 9px;border-radius:20px;font-size:11.5px;}
.hero-badge .dot svg{width:12px;height:12px;fill:#fff;}
.hero h1{
  font-size:clamp(44px,6.4vw,82px);
  font-weight:800;line-height:0.98;letter-spacing:-0.045em;
  margin:24px 0 0;text-wrap:balance;
}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--accent-glow),oklch(0.78 0.12 200));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:22px;font-size:clamp(16.5px,1.6vw,19.5px);line-height:1.55;
  color:rgba(225,238,235,.74);max-width:33em;text-wrap:pretty;
}
.hero-cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap;}
.hero-anti{
  margin-top:26px;display:flex;align-items:flex-start;gap:11px;
  padding:14px 16px;border-radius:14px;max-width:38em;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  font-size:14.5px;line-height:1.45;color:rgba(222,236,233,.82);
}
.hero-anti svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--accent-glow);fill:none;stroke-width:2;margin-top:1px;}
.hero-anti b{color:#fff;font-weight:700;}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:26px;color:rgba(210,228,224,.6);font-size:13.5px;font-weight:500;}
.proof-avs{display:flex;}
.proof-avs span{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-left:-9px;color:#06110f;}
.proof-avs span:first-child{margin-left:0;}

/* hero stage / mockups */
.hero-stage{position:relative;height:100%;min-height:520px;}
.hero-glow{position:absolute;inset:-8% -12% -8% -4%;background:radial-gradient(60% 55% at 60% 40%,oklch(0.62 0.13 182 / .45),transparent 70%);filter:blur(20px);z-index:0;}

/* generic app window frame */
.win{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-xl);overflow:hidden;color:var(--ink);
}
.win-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:#fbfcfc;}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#e2e8e7;}
.win-bar i:nth-child(1){background:#ff5f57;}
.win-bar i:nth-child(2){background:#febc2e;}
.win-bar i:nth-child(3){background:#28c840;}
.win-url{margin-left:10px;font-size:12px;color:var(--faint);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:6px;}
.win-url svg{width:12px;height:12px;stroke:var(--green);fill:none;stroke-width:2.4;}

.hero-app{position:relative;z-index:3;transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;}
.hero-chat{
  position:absolute;z-index:5;right:-18px;bottom:10px;width:290px;
  transform:translateZ(60px);
}

/* floating WhatsApp chat card */
.chat{background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 30px 70px -22px rgba(5,20,18,.7),0 6px 18px -8px rgba(5,20,18,.5);overflow:hidden;}
.chat-top{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--wa);color:#fff;}
.chat-top .ca{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 32px;}
.chat-top .cn{font-size:14px;font-weight:700;line-height:1.1;}
.chat-top .cs{font-size:11px;opacity:.85;}
.chat-top .wam{margin-left:auto;width:20px;height:20px;fill:rgba(255,255,255,.9);}
.chat-body{padding:15px 13px;display:flex;flex-direction:column;gap:10px;background:#d7e3d0;background-image:radial-gradient(rgba(0,80,60,.05) 1px,transparent 1px);background-size:15px 15px;min-height:188px;}
.bub{max-width:86%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.42;color:#0c1f1c;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.12);position:relative;}
.bub b{font-weight:700;}
.bub .tm{display:block;font-size:10px;color:rgba(0,0,0,.45);text-align:right;margin-top:3px;}
.bub.in{background:#fff;border-top-left-radius:4px;align-self:flex-start;}
.bub.out{background:#d2f8c6;border-top-right-radius:4px;align-self:flex-end;}
.bub.out .tm{display:inline-flex;align-items:center;gap:3px;justify-content:flex-end;width:100%;}
.bub.out .tm svg{width:14px;height:11px;fill:none;stroke:#34b7f1;stroke-width:2;}
.chat-reveal{opacity:0;transform:translateY(8px) scale(.96);}
.chat-reveal.show{opacity:1;transform:none;transition:.4s var(--ease);}

/* mini dashboard inside hero window */
.mini{padding:16px 16px 18px;}
.mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mini-hello{font-size:11px;font-weight:700;color:var(--accent-deep);letter-spacing:.02em;}
.mini-h1{font-size:19px;font-weight:700;letter-spacing:-0.03em;margin-top:2px;}
.mini-date{font-size:11.5px;color:var(--muted);margin-top:2px;}
.mini-new{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;}
.mini-new svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px;}
.mini-kpi{border:1px solid var(--line);border-radius:12px;padding:10px 11px;}
.mini-kpi .l{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--muted);}
.mini-kpi .l i{width:6px;height:6px;border-radius:50%;}
.mini-kpi .n{font-size:25px;font-weight:700;letter-spacing:-0.04em;margin-top:3px;line-height:1;}
.mini-kpi .bar{height:3px;border-radius:3px;background:var(--line2);margin-top:8px;overflow:hidden;}
.mini-kpi .bar b{display:block;height:100%;border-radius:3px;width:0;transition:width 1.1s var(--ease);}
.mini-list{border:1px solid var(--line);border-radius:13px;overflow:hidden;}
.mini-lh{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;}
.mini-lh .live{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--faint);}
.mini-lh .live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;}
.mini-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line2);}
.mini-row:last-child{border-bottom:none;}
.mini-row .t{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--muted);width:34px;flex:0 0 34px;}
.mini-row .av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10.5px;flex:0 0 28px;}
.mini-row .who{flex:1;min-width:0;}
.mini-row .who .n{font-size:12.5px;font-weight:600;}
.mini-row .who .ty{font-size:10.5px;color:var(--accent-deep);}
.mini-tag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;}
.mini-tag i{width:5px;height:5px;border-radius:50%;}
.mini-wa{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:0 0 22px;}
.mini-wa svg{width:13px;height:13px;fill:currentColor;}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes float{0%,100%{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg) translateY(-12px)}}

/* hero bottom logos strip */
.hero-foot{position:relative;z-index:2;margin-top:64px;border-top:1px solid rgba(255,255,255,.08);}
.hero-foot .wrap{display:flex;align-items:center;gap:28px;padding-top:24px;padding-bottom:30px;flex-wrap:wrap;}
.hero-foot .lbl{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(200,222,218,.5);}
.hero-foot .ints{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.int-chip{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:rgba(225,238,235,.78);}
.int-chip .ic{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.int-chip .ic svg{width:16px;height:16px;}

/* ============================================================
   COS'È PROMELY  (blocco brand-verification Google — vedi index.html)
   ============================================================ */
/* padding-bottom azzerato: senza, i ~82px di coda di .section si sommano agli ~82px
   di testa della sezione PROBLEM e si apre un vuoto di ~164px. Lo stacco fra i due
   blocchi lo dà già la testa di PROBLEM. */
.about{padding-bottom:0;}
.about-head{max-width:760px;}
.about-head .h-sec{margin-top:18px;}
.about-head .lede{margin-top:16px;}
.about-head .lede-en{margin-top:12px;font-size:15px;color:var(--faint);}

/* ============================================================
   PROBLEM
   ============================================================ */
.prob-head{max-width:680px;margin-bottom:48px;}
.prob-head .h-sec{margin-top:18px;}
.prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.prob-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 24px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.prob-card .pico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.prob-card .pico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.prob-card .big{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-0.05em;line-height:1;}
.prob-card .big .u{font-size:.55em;font-weight:700;color:var(--muted);margin-left:.08em;}
.prob-card .big .dash{margin:0 .16em;color:var(--faint);font-weight:600;}
.prob-card .desc{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.45;text-wrap:pretty;}
.prob-quote{
  margin-top:34px;display:flex;align-items:center;gap:16px;
  padding:22px 26px;border-radius:var(--r-lg);
  background:var(--ink);color:#dfece9;box-shadow:var(--shadow-lg);
}
.prob-quote svg{width:30px;height:30px;stroke:var(--accent-glow);fill:none;stroke-width:2;flex:0 0 30px;}
.prob-quote p{font-size:clamp(16px,1.8vw,20px);font-weight:500;letter-spacing:-0.02em;line-height:1.4;}
.prob-quote b{color:#fff;font-weight:700;}

/* ============================================================
   PILLARS  (bento)
   ============================================================ */
.pillars{background:linear-gradient(180deg,var(--bg),#eef3f2);}
.pillars-head{text-align:center;max-width:620px;margin:0 auto 52px;}
.pillars-head .kicker{margin-bottom:18px;}
.bento{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto auto;gap:18px;}
.pill{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pill:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.pill-a{grid-row:span 2;display:flex;flex-direction:column;}
.pill .num{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:0;}
.pill h3{font-size:clamp(21px,2.4vw,27px);font-weight:700;letter-spacing:-0.03em;margin-top:10px;line-height:1.1;}
.pill p{font-size:15.5px;color:var(--muted);margin-top:12px;line-height:1.5;max-width:40ch;text-wrap:pretty;}
.pill-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.pill-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* pillar A — whatsapp confirm visual */
.pa-visual{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:9px;}
.pa-bub{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.4;box-shadow:var(--shadow-xs);}
.pa-bub.in{background:var(--line2);border-top-left-radius:5px;align-self:flex-start;color:var(--ink);}
.pa-bub.out{background:#d9fdd3;border-top-right-radius:5px;align-self:flex-end;color:#0b3d12;font-weight:600;}
.pa-status{align-self:flex-end;display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--green);background:var(--green-bg);padding:6px 12px;border-radius:20px;}
.pa-status svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2.4;}

/* pillar B — calendar visual */
.pb-cal{margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.pb-calh{display:flex;gap:6px;padding:10px 12px;background:var(--line2);}
.pb-calh span{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);}
.pb-calh span svg{width:15px;height:15px;}
.pb-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px;}
.pb-slot{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;text-align:center;padding:8px 0;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);}
.pb-slot.busy{background:var(--line2);color:var(--faint);text-decoration:line-through;}

/* pillar C — risk visual */
.pc-risk{margin-top:20px;display:flex;align-items:center;gap:16px;}
.pc-ring{width:88px;height:88px;flex:0 0 88px;position:relative;display:flex;align-items:center;justify-content:center;}
.pc-ring svg{transform:rotate(-90deg);}
.pc-ring .val{position:absolute;text-align:center;}
.pc-ring .val b{font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:600;letter-spacing:-0.03em;}
.pc-ring .val span{display:block;font-size:9.5px;color:var(--faint);}
.pc-risk-txt .lvl{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--amber);background:var(--amber-bg);padding:4px 11px;border-radius:20px;}
.pc-risk-txt p{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.45;}

/* ============================================================
   SHOWCASE (tabs)
   ============================================================ */
.show-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:32px;}
.tabs{display:flex;gap:8px;flex-wrap:wrap;background:var(--line2);padding:6px;border-radius:16px;width:fit-content;}
.tab{
  display:flex;align-items:center;gap:9px;padding:11px 17px;border-radius:11px;
  font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:none;font-family:inherit;
  transition:.2s;white-space:nowrap;
}
.tab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tab.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-xs);}
.tab:not(.on):hover{color:var(--ink);}
.show-stage{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,#0e1b19,#13201f);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-xl);
  padding:clamp(20px,4vw,52px);
}
.show-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0%,oklch(0.55 0.10 182 / .35),transparent 60%);pointer-events:none;}
.panel{display:none;}
.panel.on{display:block;animation:fadeUp .5s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:center;}
.panel-cap .step{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent-glow);font-weight:600;}
.panel-cap h3{font-size:clamp(24px,2.7vw,32px);font-weight:700;letter-spacing:-0.03em;color:#fff;margin-top:10px;line-height:1.1;}
.panel-cap p{font-size:16px;color:rgba(222,236,233,.7);margin-top:14px;line-height:1.55;text-wrap:pretty;}
.panel-cap ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px;}
.panel-cap li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:rgba(222,236,233,.85);}
.panel-cap li svg{width:18px;height:18px;stroke:var(--accent-glow);fill:none;stroke-width:2.4;flex:0 0 18px;}

/* showcase mock: appointment detail card */
.sc-apt{background:#fff;border-radius:18px;box-shadow:var(--shadow-xl);overflow:hidden;}
.sc-apt-h{display:flex;align-items:center;gap:12px;padding:18px 18px 15px;border-bottom:1px solid var(--line);}
.sc-apt-h .av{width:42px;height:42px;border-radius:50%;background:oklch(0.92 0.05 200);color:oklch(0.42 0.09 200);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 42px;}
.sc-apt-h .nm{font-size:16px;font-weight:700;letter-spacing:-0.02em;}
.sc-apt-h .ty{font-size:12.5px;color:var(--muted);}
.sc-apt-b{padding:16px 18px;display:flex;flex-direction:column;gap:15px;}
.sc-badges{display:flex;gap:7px;}
.sc-sec{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;}
.sc-tl{display:flex;flex-direction:column;}
.sc-tli{display:flex;align-items:center;gap:11px;padding:8px 0;}
.sc-tli:not(:last-child){border-bottom:1px solid var(--line2);}
.sc-pin{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 26px;}
.sc-pin svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.sc-tli .th{font-size:13px;font-weight:600;}
.sc-tli .tt{font-size:11px;color:var(--faint);}

/* showcase mock: customer risk */
.sc-cust{background:#fff;border-radius:18px;box-shadow:var(--shadow-xl);overflow:hidden;padding:20px;}
.sc-cust-hero{display:flex;align-items:center;gap:14px;}
.sc-cust-hero .av{width:54px;height:54px;border-radius:50%;background:oklch(0.92 0.07 50);color:oklch(0.42 0.09 50);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;flex:0 0 54px;}
.sc-cust-hero .nm{font-size:19px;font-weight:700;letter-spacing:-0.03em;}
.sc-cust-hero .mt{font-size:12.5px;color:var(--muted);margin-top:2px;}
.sc-risk{margin-top:16px;border-radius:13px;padding:14px 16px;border:1px solid var(--amber);background:var(--amber-bg);}
.sc-risk .top{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--amber);}
.sc-risk .top .sc{margin-left:auto;font-family:'JetBrains Mono',monospace;}
.sc-risk p{font-size:12.5px;color:var(--ink);margin-top:8px;line-height:1.45;}
.sc-cust-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.sc-cust-stats .st{text-align:center;border:1px solid var(--line);border-radius:12px;padding:12px 8px;}
.sc-cust-stats .st .n{font-size:24px;font-weight:700;letter-spacing:-0.04em;}
.sc-cust-stats .st .l{font-size:10.5px;color:var(--faint);margin-top:3px;}

/* showcase mock: wizard */
.sc-wiz{background:#fff;border-radius:18px;box-shadow:var(--shadow-xl);overflow:hidden;padding:20px;}
.sc-wiz-steps{display:flex;gap:8px;margin-bottom:18px;}
.sc-wiz-steps .ws{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--faint);}
.sc-wiz-steps .ws .d{width:22px;height:22px;border-radius:50%;background:var(--line2);color:var(--faint);display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 22px;}
.sc-wiz-steps .ws.on{color:var(--accent-deep);}
.sc-wiz-steps .ws.on .d{background:var(--accent);color:#fff;}
.sc-wiz-steps .ws.done .d{background:var(--green);color:#fff;}
.sc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px;}
.sc-day{text-align:center;padding:9px 0;border-radius:10px;border:1px solid var(--line);cursor:default;}
.sc-day .dn{font-size:10px;color:var(--faint);text-transform:uppercase;}
.sc-day .dd{font-size:16px;font-weight:700;margin-top:1px;}
.sc-day .dc{font-size:9px;color:var(--accent);margin-top:2px;}
.sc-day.sel{background:var(--accent);border-color:var(--accent);}
.sc-day.sel .dn,.sc-day.sel .dc{color:rgba(255,255,255,.8);}
.sc-day.sel .dd{color:#fff;}
.sc-wiz-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.sc-wiz-slots .sl{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;text-align:center;padding:9px 0;border-radius:9px;border:1px solid var(--line);color:var(--ink);}
.sc-wiz-slots .sl.busy{background:var(--line2);color:var(--faint);text-decoration:line-through;border-color:transparent;}
.sc-wiz-slots .sl.pick{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep);}

/* shared mock badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:20px;white-space:nowrap;}
.badge i{width:6px;height:6px;border-radius:50%;flex:0 0 6px;}
.wabadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;}
.wabadge svg{width:13px;height:13px;fill:currentColor;}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{background:var(--ink);color:#dfece9;position:relative;overflow:hidden;}
.how::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 12% 0%,oklch(0.5 0.09 182 / .35),transparent 55%);pointer-events:none;}
.how .wrap{position:relative;z-index:2;}
.how-head{max-width:560px;margin-bottom:54px;}
.how-head .kicker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--accent-glow);}
.how-head .h-sec{color:#fff;margin-top:18px;}
.how-head .lede{color:rgba(222,236,233,.7);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step-c{position:relative;padding-top:30px;}
.step-c::before{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px);}
.step-c:last-child::before{display:none;}
.step-n{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;position:relative;z-index:2;box-shadow:0 0 0 6px var(--ink);}
.step-c h4{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:#fff;margin-top:20px;}
.step-c p{font-size:14.5px;color:rgba(222,236,233,.68);margin-top:9px;line-height:1.5;text-wrap:pretty;}
.step-c .ico{margin-top:16px;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;}
.step-c .ico svg{width:20px;height:20px;stroke:var(--accent-glow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ============================================================
   AI INSIGHT
   ============================================================ */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.ai-copy .kicker{margin-bottom:18px;}
.ai-copy .h-sec{margin-top:6px;}
.ai-copy .lede{margin-top:18px;}
.ai-feats{margin-top:26px;display:flex;flex-direction:column;gap:16px;}
.ai-feat{display:flex;gap:14px;}
.ai-feat .fi{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex:0 0 42px;}
.ai-feat .fi svg{width:21px;height:21px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ai-feat h4{font-size:16px;font-weight:700;letter-spacing:-0.02em;}
.ai-feat p{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.45;}
/* AI card stack */
.ai-stage{position:relative;}
.ai-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;}
.ai-card-h{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.ai-card-h .av{width:46px;height:46px;border-radius:50%;background:oklch(0.92 0.06 280);color:oklch(0.42 0.09 280);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;}
.ai-card-h .nm{font-size:16px;font-weight:700;}
.ai-card-h .mt{font-size:12.5px;color:var(--muted);}
.ai-gauge{display:flex;align-items:center;gap:20px;padding:16px;border-radius:16px;background:var(--amber-bg);border:1px solid color-mix(in oklch,var(--amber) 30%,transparent);}
.ai-ring{width:104px;height:104px;flex:0 0 104px;position:relative;display:flex;align-items:center;justify-content:center;}
.ai-ring svg{transform:rotate(-90deg);}
.ai-ring .v{position:absolute;text-align:center;}
.ai-ring .v b{font-family:'JetBrains Mono',monospace;font-size:27px;font-weight:600;letter-spacing:-0.03em;color:var(--amber);}
.ai-ring .v span{display:block;font-size:10px;color:var(--faint);margin-top:1px;}
.ai-gauge-txt .lvl{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--amber);}
.ai-gauge-txt p{font-size:13px;color:var(--ink);margin-top:8px;line-height:1.45;}
.ai-factors{margin-top:16px;display:flex;flex-direction:column;gap:9px;}
.ai-fac{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
.ai-fac .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;}
.ai-fac b{color:var(--ink);font-weight:600;}
.ai-badge{position:absolute;top:-18px;right:-14px;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:30px;box-shadow:var(--shadow-lg);}
.ai-badge .g{display:flex;align-items:center;gap:5px;color:var(--accent-glow);}
.ai-badge svg{width:15px;height:15px;stroke:var(--accent-glow);fill:none;stroke-width:2.4;}

/* ============================================================
   PROFESSIONS
   ============================================================ */
.prof{background:linear-gradient(180deg,#eef3f2,var(--bg));}
.prof-head{text-align:center;max-width:600px;margin:0 auto 50px;}
.prof-head .kicker{margin-bottom:18px;}
.prof-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.prof-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);}
.prof-col .ch{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.prof-col .ch .ci{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;}
.prof-col .ch .ci svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.prof-col .ch h4{font-size:16.5px;font-weight:700;letter-spacing:-0.02em;}
.prof-col .ch .tag{font-size:11px;font-weight:600;color:var(--muted);}
.prof-chips{display:flex;flex-wrap:wrap;gap:8px;}
.prof-chip{font-size:13.5px;font-weight:500;color:var(--ink);background:var(--line2);padding:7px 13px;border-radius:30px;transition:.2s;}
.prof-chip:hover{background:var(--accent-soft);color:var(--accent-deep);}
.prof-note{text-align:center;font-size:16px;color:var(--muted);margin-top:32px;}
.prof-note b{color:var(--ink);font-weight:600;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{padding:clamp(80px,12vw,140px) 0;}
.cta-box{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:
    radial-gradient(110% 130% at 85% -20%, oklch(0.45 0.10 182 / .65), transparent 55%),
    linear-gradient(160deg,var(--ink1),var(--ink2));
  color:#eaf3f1;text-align:center;
  padding:clamp(48px,7vw,84px) 28px;
  box-shadow:var(--shadow-xl);
}
.cta-box::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent);pointer-events:none;}
.cta-box .in{position:relative;z-index:2;}
.cta-box h2{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-0.045em;line-height:1.02;text-wrap:balance;}
.cta-box h2 .accent{background:linear-gradient(100deg,var(--accent-glow),oklch(0.78 0.12 200));-webkit-background-clip:text;background-clip:text;color:transparent;}
.cta-box p{font-size:clamp(16px,1.8vw,20px);color:rgba(222,236,233,.75);margin:20px auto 0;max-width:30em;}
.cta-btns{display:flex;gap:13px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.cta-fine{display:flex;gap:20px;justify-content:center;margin-top:26px;flex-wrap:wrap;color:rgba(210,228,224,.6);font-size:14px;}
.cta-fine span{display:flex;align-items:center;gap:7px;}
.cta-fine svg{width:16px;height:16px;stroke:var(--accent-glow);fill:none;stroke-width:2.4;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line);padding:48px 0 40px;}
.foot-in{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.foot-brand{max-width:300px;}
.foot-brand .brand{color:var(--ink);margin-bottom:14px;}
.foot-brand p{font-size:14px;color:var(--muted);line-height:1.5;}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
.foot-col h5{font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.foot-col a{display:block;font-size:14.5px;color:var(--muted);padding:5px 0;transition:.2s;}
.foot-col a:hover{color:var(--accent-deep);}
.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--faint);}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-app{animation:none!important;}
  *{scroll-behavior:auto;}
}

/* ============================================================
   SYNC — bidirectional calendar
   ============================================================ */
.sync{background:linear-gradient(180deg,#eef3f2,var(--bg));}
.sync-head{max-width:780px;margin:0 auto 52px;text-align:center;}
.sync-head .kicker{margin-bottom:18px;}
.sync-head .lede{margin:16px auto 0;max-width:62ch;}
.sync-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;}
.sync-node{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.sync-node .tag{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;color:var(--accent);margin-bottom:13px;display:flex;align-items:center;gap:7px;}
.sync-node .tag svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sync-node h4{font-size:17.5px;font-weight:700;letter-spacing:-0.02em;margin-bottom:7px;}
.sync-node>p{font-size:13px;color:var(--muted);line-height:1.45;}
.sync-ai{background:linear-gradient(160deg,#0e1b19,#13201f);border-color:rgba(255,255,255,.08);box-shadow:var(--shadow-lg);}
.sync-ai .tag{color:var(--accent-glow);}
.sync-ai h4{color:#fff;}
.sync-ai>p{color:rgba(222,236,233,.7);}
.sync-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px;gap:9px;}
.sync-arrow svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sync-arrow span{font-size:10.5px;font-weight:600;color:var(--faint);text-align:center;max-width:88px;line-height:1.3;}
/* node visuals */
.sync-vis{margin-top:auto;padding-top:18px;}
.ev-app{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:9px;}
.ev-app svg{width:15px;height:15px;}
.ev-card{border-left:3px solid var(--blue);background:var(--blue-bg);border-radius:8px;padding:10px 12px;font-size:12.5px;font-weight:700;color:var(--ink);}
.ev-card span{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:3px;}
.ai-extract{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.ai-xr{display:flex;align-items:center;gap:9px;font-size:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:8px 11px;color:rgba(222,236,233,.88);}
.ai-xr .k{color:rgba(222,236,233,.5);width:50px;flex:0 0 50px;font-size:11px;}
.ai-xr b{color:#fff;font-weight:600;}
.ai-xr .ok{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--accent-glow);font-size:11px;font-weight:600;}
.ai-xr .ok svg{width:13px;height:13px;stroke:var(--accent-glow);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
.sync-pcard{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px;}
.sync-pcard .r1{display:flex;align-items:center;gap:10px;}
.sync-pcard .pav{width:32px;height:32px;border-radius:50%;background:oklch(0.92 0.05 200);color:oklch(0.42 0.09 200);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;flex:0 0 32px;}
.sync-pcard .nm{font-size:13px;font-weight:600;}
.sync-pcard .ty{font-size:11px;color:var(--accent-deep);font-weight:600;}
.sync-pcard .when{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}

/* ============================================================
   IMPORT — manuale con preview
   ============================================================ */
.import{background:linear-gradient(180deg,var(--bg),#eef3f2);}
.import-head{text-align:center;max-width:740px;margin:0 auto 52px;}
.import-head .kicker{margin-bottom:18px;}
.import-head .lede{margin:16px auto 0;max-width:58ch;}
.import-stage{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}

/* mockup window */
.import-mock .win{border:none;box-shadow:var(--shadow-xl);}
.import-preview{padding:0;}
.imp-steps{display:flex;align-items:center;gap:6px;padding:16px 20px 14px;background:var(--line2);border-bottom:1px solid var(--line);}
.imp-step{font-size:12px;font-weight:600;color:var(--faint);display:flex;align-items:center;gap:5px;}
.imp-step b{width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--faint);display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
.imp-step.on{color:var(--accent-deep);}
.imp-step.on b{background:var(--accent);color:#fff;}
.imp-step.done{color:var(--green);}
.imp-step.done b{background:var(--green);color:#fff;}
.imp-dot{font-size:11px;color:var(--faint);}

/* stats grid */
.imp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 20px 14px;}
.imp-stat{text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;}
.imp-stat-n{font-size:28px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);line-height:1;}
.imp-stat-l{font-size:10.5px;color:var(--faint);margin-top:5px;font-weight:600;}

/* event list */
.imp-events{padding:0 20px 14px;}
.imp-ev-head{display:flex;align-items:center;justify-content:space-between;padding:8px 0 10px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.imp-expand{font-size:10.5px;color:var(--accent-deep);font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;}
.imp-ev{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--line2);margin-bottom:6px;}
.imp-ev-t{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;color:var(--muted);width:42px;flex:0 0 42px;}
.imp-ev-info{flex:1;}
.imp-ev-name{font-size:12.5px;font-weight:600;color:var(--ink);}
.imp-ev-type{font-size:11px;color:var(--faint);font-weight:500;margin-left:6px;}
.imp-ev-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:20px;white-space:nowrap;}
.imp-ev-tag i{width:5px;height:5px;border-radius:50%;flex:0 0 5px;}

/* CTA */
.imp-cta{padding:0 20px 18px;}
.imp-cta .btn svg{width:16px;height:16px;}

/* copy side */
.import-copy h3{font-size:22px;font-weight:700;letter-spacing:-0.03em;margin-bottom:8px;}
.import-copy>p{font-size:14.5px;color:var(--muted);line-height:1.5;max-width:36ch;}
.import-benefits{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.imp-benefit{display:flex;gap:13px;}
.imp-bn-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;}
.imp-bn-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.imp-benefit h4{font-size:15px;font-weight:700;letter-spacing:-0.01em;}
.imp-benefit p{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45;}
.import-note{display:flex;align-items:flex-start;gap:10px;margin-top:28px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in oklch,var(--accent) 18%,transparent);font-size:13.5px;color:var(--ink);line-height:1.5;}
.import-note svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}

/* responsive: import */
@media (max-width:1060px){
  .import-stage{grid-template-columns:1fr;gap:36px;}
}
.sync-pcard .wa-sched{margin-top:10px;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--green);background:var(--green-bg);border-radius:8px;padding:7px 10px;}
.sync-pcard .wa-sched svg{width:14px;height:14px;fill:var(--green);}
.sync-back{margin:32px auto 0;max-width:660px;display:flex;align-items:center;gap:13px;justify-content:center;text-align:center;font-size:15.5px;color:var(--muted);line-height:1.5;text-wrap:pretty;}
.sync-back svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 24px;}
.sync-back b{color:var(--ink);font-weight:600;}
@media (max-width:980px){
  .sync-flow{grid-template-columns:1fr;gap:14px;}
  .sync-arrow{flex-direction:row;padding:6px 0;gap:12px;}
  .sync-arrow svg{transform:rotate(90deg);}
}

/* ============================================================
   CHANNELS — due percorsi (WhatsApp / Email)
   ============================================================ */
.channels{background:#eef3f2;}
.ch-head{text-align:center;max-width:680px;margin:0 auto 48px;}
.ch-head .kicker{margin-bottom:18px;}
.ch-head .lede{margin:16px auto 0;max-width:60ch;}
.ch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:940px;margin:0 auto;align-items:stretch;}
.ch-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:30px;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ch-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.ch-card.wa{
  border-color:color-mix(in oklch,var(--wa) 45%,var(--line));
  box-shadow:var(--shadow),0 16px 44px -18px color-mix(in oklch,var(--wa) 70%,transparent);
}
.ch-reco{
  position:absolute;top:-12px;right:24px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.01em;
  color:#fff;background:var(--wa);padding:5px 12px;border-radius:20px;
  box-shadow:0 6px 16px -6px color-mix(in oklch,var(--wa) 80%,transparent);
}
.ch-reco svg{width:12px;height:12px;fill:currentColor;}
.ch-top{display:flex;align-items:flex-start;gap:14px;}
.ch-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:0 0 48px;}
.ch-icon svg{width:24px;height:24px;}
.ch-icon.wa{background:#dcf8d4;color:#1c8c3b;}
.ch-icon.wa svg{fill:currentColor;}
.ch-icon.email{background:var(--accent-soft);color:var(--accent-deep);}
.ch-icon.email svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ch-card h3{font-size:clamp(19px,2.2vw,23px);font-weight:700;letter-spacing:-0.03em;line-height:1.12;}
.ch-sub{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.ch-feats{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:11px;}
.ch-feats li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink);line-height:1.4;}
.ch-feats li svg{width:18px;height:18px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 18px;margin-top:1px;}
.ch-card.wa .ch-feats li svg{stroke:var(--green);}
.ch-card.email .ch-feats li svg{stroke:var(--accent-deep);}
.ch-note{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line2);
  font-size:13px;color:var(--faint);line-height:1.4;
}
.ch-card .btn{margin-top:18px;width:100%;}
.ch-upgrade{
  margin:30px auto 0;max-width:620px;display:flex;align-items:center;gap:11px;justify-content:center;
  text-align:center;font-size:15px;color:var(--muted);line-height:1.5;text-wrap:pretty;
}
.ch-upgrade svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 20px;}
.ch-upgrade b{color:var(--ink);font-weight:600;}
@media (max-width:820px){
  .ch-grid{grid-template-columns:1fr;max-width:460px;}
}

/* hero secondary line — canale email alternativo */
.hero-alt{
  margin-top:18px;display:inline-flex;align-items:center;gap:9px;
  font-size:14px;color:rgba(210,228,224,.62);line-height:1.4;max-width:38em;
}
.hero-alt svg{width:17px;height:17px;stroke:var(--accent-glow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 17px;}
.hero-alt b{color:rgba(225,238,235,.92);font-weight:700;}

/* showcase — variante conferma via email (dentro il pannello "Conferme") */
.sc-email{margin-top:14px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:15px 16px;}
.sc-email-h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink);}
.sc-email-h .ic{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 26px;}
.sc-email-h .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sc-email-btns{display:flex;gap:9px;margin-top:13px;}
.ce{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:700;padding:10px 0;border-radius:10px;}
.ce svg{width:15px;height:15px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.ce.confirm{background:var(--green-bg);color:var(--green);}
.ce.confirm svg{stroke:var(--green);}
.ce.cancel{background:var(--rose-bg);color:var(--rose);}
.ce.cancel svg{stroke:var(--rose);}
.sc-email-done{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--green);background:var(--green-bg);padding:7px 12px;border-radius:20px;}
.sc-email-done svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ============================================================
   RECOVER — Ottimizzazione agenda (recupero dei buchi da disdetta)
   ============================================================ */
.recover{background:linear-gradient(180deg,#eef3f2,var(--card));}
.recover-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.recover-head .kicker{margin-bottom:18px;}
.recover-head .lede{margin:16px auto 0;max-width:60ch;}
.recover-stage{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;}

/* mockup window — worklist */
.recover-mock{position:relative;}
.recover-mock .win{border:none;box-shadow:var(--shadow-xl);}
.rec-board{padding:18px 20px 20px;}
.rec-board-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.rec-title{font-size:15px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);}
.rec-sub{font-size:11.5px;color:var(--faint);margin-top:2px;}
.rec-count{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border:1px solid color-mix(in oklch,var(--accent) 22%,transparent);padding:5px 10px;border-radius:20px;white-space:nowrap;}

.rec-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px;}
.rec-kpi{text-align:center;padding:10px 6px;border:1px solid var(--line);border-radius:11px;background:#fff;}
.rec-kpi .n{font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);line-height:1;}
.rec-kpi .l{font-size:10px;color:var(--faint);margin-top:4px;font-weight:600;}

.rec-gap{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:11px;padding:11px 13px;background:var(--card);margin-bottom:12px;}
.rec-gap.done{border-left-color:var(--green);}
.rec-gap-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;}
.rec-gap-time{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--ink);}
.rec-gap-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--amber);background:var(--amber-bg);padding:3px 9px;border-radius:20px;white-space:nowrap;}
.rec-gap-tag.ok{color:var(--green);background:var(--green-bg);}
.rec-gap-tag svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.rec-gap-who{font-size:12px;color:var(--muted);line-height:1.4;}
.rec-gap-who b{color:var(--ink);font-weight:600;}

.rec-levers{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;}
.rec-lever{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s var(--ease),transform .2s var(--ease);}
.rec-lever:hover{transform:translateX(2px);border-color:color-mix(in oklch,var(--accent) 30%,var(--line));}
.rec-lever-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 34px;}
.rec-lever-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.rec-lever-ic.fill{background:var(--green-bg);color:var(--green);}
.rec-lever-ic.resc{background:var(--blue-bg);color:var(--blue);}
.rec-lever-tx{flex:1;min-width:0;}
.rec-lever-tx .h{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}
.rec-lever-tx .p{font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.35;}
.rec-lever-tx .p b{color:var(--ink);font-weight:600;}
.rec-lever-go{flex:0 0 auto;color:var(--faint);}
.rec-lever-go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

.rec-draft{border:1px dashed color-mix(in oklch,var(--accent) 32%,var(--line));border-radius:12px;padding:12px 13px;background:var(--accent-soft);}
.rec-draft-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--accent-deep);margin-bottom:9px;}
.rec-draft-h .wa{width:22px;height:22px;border-radius:7px;background:#dcf8d4;color:#1c8c3b;display:flex;align-items:center;justify-content:center;flex:0 0 22px;}
.rec-draft-h .wa svg{width:13px;height:13px;fill:currentColor;}
.rec-draft-msg{font-size:12.5px;color:var(--ink);line-height:1.45;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.rec-draft-msg b{font-weight:700;}
.rec-draft-foot{display:flex;align-items:center;gap:12px;margin-top:11px;}
.rec-draft-foot .btn{flex:0 0 auto;}
.rec-draft-note{font-size:11px;color:var(--muted);font-weight:500;}

/* ============================================================
   PIANI E PREZZI
   ============================================================ */
.piani-section{background:var(--bg);}
.piani-hd{text-align:center;max-width:560px;margin:0 auto 52px;}

.piani-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch;
}

.piano-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:0;
  box-shadow:var(--shadow-xs);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease);
}
.piano-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}

.piano-card--featured{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--accent) 22%,transparent),var(--shadow-lg);
  background:var(--card);
  position:relative;
}

.piano-card-hd{margin-bottom:24px;}

.piano-badge{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  padding:3px 10px;border-radius:30px;
  background:var(--line2);color:var(--muted);
  margin-bottom:12px;
}
.piano-badge--accent{background:var(--accent-soft);color:var(--accent-deep);}
.piano-badge--pro{background:oklch(0.94 0.03 275);color:var(--indigo);}

.piano-name{font-size:24px;font-weight:700;letter-spacing:-0.03em;color:var(--ink);margin-bottom:8px;}

.piano-price{display:flex;align-items:baseline;gap:3px;margin-bottom:12px;}
.piano-price-val{font-size:40px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);}
.piano-price-mo{font-size:15px;color:var(--muted);font-weight:500;}

.piano-tagline{font-size:14px;color:var(--muted);line-height:1.5;}

.piano-feats{
  list-style:none;
  display:flex;flex-direction:column;gap:11px;
  flex:1;
  margin-bottom:0;
}
.piano-feats li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;color:var(--ink);font-weight:500;
}
.piano-feats li svg{
  width:16px;height:16px;flex:0 0 16px;
  stroke:var(--green);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.piano-feat--off{color:var(--faint) !important;}
.piano-feat--off svg{stroke:var(--faint) !important;}

.piani-cta-row{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:44px;
}
.piani-detail-link{
  font-size:14.5px;font-weight:600;color:var(--accent-deep);
  text-decoration:none;transition:opacity .15s;
}
.piani-detail-link:hover{opacity:.7;}

.piani-note{
  text-align:center;margin-top:20px;
  font-size:13.5px;color:var(--muted);
}

@media (max-width:900px){
  .piani-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .piano-card--featured{order:-1;}
}

/* copy side */
.recover-copy h3{font-size:22px;font-weight:700;letter-spacing:-0.03em;margin-bottom:8px;}
.recover-copy>p{font-size:14.5px;color:var(--muted);line-height:1.5;max-width:40ch;}
.rec-benefits{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.rec-benefit{display:flex;gap:13px;}
.rec-bn-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;}
.rec-bn-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.rec-benefit h4{font-size:15px;font-weight:700;letter-spacing:-0.01em;}
.rec-benefit p{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45;}
.rec-note{display:flex;align-items:flex-start;gap:10px;margin-top:28px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid color-mix(in oklch,var(--accent) 20%,transparent);font-size:13.5px;color:var(--ink);line-height:1.5;box-shadow:var(--shadow-xs);}
.rec-note svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--accent-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.rec-note b{font-weight:700;}

/* showcase panel chat (riusa .pa-bub/.pa-status dei pillar) */
.rec-chat{display:flex;flex-direction:column;gap:9px;margin-top:12px;}

@media (max-width:1060px){
  .recover-stage{grid-template-columns:1fr;gap:36px;max-width:560px;margin:0 auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:10px;}
  .hero-stage{min-height:auto;margin-top:18px;}
  .hero-app{transform:none;}
  .hero-app{animation:none!important;}
  .hero-chat{position:relative;right:auto;bottom:auto;width:100%;max-width:300px;margin:18px auto 0;transform:none;}
  .panel-grid{grid-template-columns:1fr;gap:24px;}
  .ai-grid{grid-template-columns:1fr;gap:40px;}
  .bento{grid-template-columns:1fr;}
  .pill-a{grid-row:auto;}
}
@media (max-width:1060px){
  .import-stage{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-cta .nav-login{display:none;}
  .nav-hamburger{display:flex;}
  .prob-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px;}
  .step-c::before{display:none;}
  .prof-cols{grid-template-columns:1fr;}
  .mini-kpis{grid-template-columns:repeat(4,1fr);}
  .imp-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .nav-in{padding:12px 16px;gap:16px;}
  .brand{font-size:18px;}
  .brand-mark{width:28px;height:28px;}
  .prob-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero h1{font-size:clamp(38px,12vw,52px);}
  .tabs{width:100%;}
  .tab{flex:1;justify-content:center;}
}