/* Type: Instrument Serif (display) and Manrope (body), both SIL Open Font License, self-hosted Latin subsets. */
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/manrope.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* Metric-matched fallbacks (measured in Chrome) so the swap to the web fonts does not move text. */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Times");size-adjust:82.91%;ascent-override:119.4%;descent-override:37.39%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");font-weight:400 500;size-adjust:102.5%;ascent-override:104.39%;descent-override:29.27%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:501 650;size-adjust:98.76%;ascent-override:108.34%;descent-override:30.38%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:651 800;size-adjust:94.21%;ascent-override:113.57%;descent-override:31.84%;line-gap-override:0%}
:root{color-scheme:light;--ink:#15251f;--muted:#4f5f56;--line:#d7ded7;--paper:#f7f8f5;--white:#fff;--accent:#db6137;--green:#153d32;--teal:#0e7c72;--display:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif;--body:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--system:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:999px}
h1,h2,h3,p{margin-top:0}
.shell{width:min(100% - 64px,1240px);margin-inline:auto}
.skip-link{position:absolute;z-index:10;top:-100px;left:24px;padding:12px 18px;background:var(--ink);color:#fff}
.skip-link:focus{top:12px}

/* Header (wordmark keeps its original system type) */
.site-header{position:relative;z-index:2;background:rgba(247,248,245,.9);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:86px;gap:24px}
.brand,.footer-brand{display:inline-flex;align-items:center;font-family:var(--system);font-size:27px;letter-spacing:-.06em;font-weight:750;line-height:1}
.brand-icon{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:30px;height:30px;margin-right:10px;border:2px solid var(--ink);border-radius:50%;transform:rotate(-22deg)}
.brand-icon span{display:block;width:3px;border-radius:9px;background:var(--accent)}
.brand-icon span:nth-child(1),.brand-icon span:nth-child(3){height:8px}
.brand-icon span:nth-child(2){height:15px}
.brand-period,.footer-brand span{color:var(--accent)}
nav{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:600}
nav a:not(.nav-contact):hover,.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
.nav-contact{display:inline-flex;justify-content:center;min-width:150px;padding:10px 18px;border:1px solid var(--ink);border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.nav-contact:hover{background:var(--ink);color:#fff}
.nav-contact span{margin-left:8px}

/* Shared type roles */
.eyebrow{margin:0 0 18px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#4c6357}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(46px,6vw,72px);line-height:1.05;margin-bottom:22px}
h2{font-size:clamp(36px,4.2vw,54px);line-height:1.06;margin-bottom:0}
h3{font-weight:700;letter-spacing:-.01em}
.accent{color:var(--teal)}
.section-head{text-align:center;margin-bottom:48px}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;font-size:16px;font-weight:600;line-height:1;border:1px solid var(--ink);transition:background .2s,color .2s,box-shadow .2s}
.pill-dark{background:var(--ink);color:#fff}
.pill-dark:hover{background:#25443a}
.pill-light{background:rgba(255,255,255,.7);color:var(--ink);border-color:#c5cfc7}
.pill-light:hover{border-color:var(--ink)}

/* Hero with ambient glow */
.hero{position:relative;overflow:hidden;padding:104px 0 56px;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-160px -10% auto;height:640px;background:radial-gradient(42% 52% at 30% 40%,rgba(14,124,114,.26),transparent 70%),radial-gradient(38% 46% at 72% 32%,rgba(219,97,55,.2),transparent 70%),radial-gradient(50% 60% at 50% 70%,rgba(255,255,255,.9),transparent 75%)}
.hero-inner{text-align:center;max-width:860px}
.hero-lede{max-width:600px;margin:0 auto 34px;font-size:20px;line-height:1.5;color:var(--muted)}
.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.hero-actions .pill{min-width:200px;justify-content:center}
.proof{list-style:none;margin:76px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4c6357}

/* Showcase card with tabs */
.showcase{padding:88px 0 96px}
.stage{position:relative;border-radius:32px;padding:14px;background:linear-gradient(140deg,rgba(255,255,255,.75),rgba(232,240,236,.55));border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(21,37,31,.06),0 30px 70px -30px rgba(21,61,50,.28),inset 0 0 0 1px rgba(21,37,31,.05)}
.stage::before{content:"";position:absolute;z-index:-1;inset:8% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(14,124,114,.16),transparent);filter:blur(10px)}
.tabs{display:flex;gap:6px;padding:6px;margin:0 auto 14px;width:max-content;max-width:100%;border-radius:999px;background:rgba(21,37,31,.06)}
.tabs button{appearance:none;border:0;background:transparent;font:600 16px/1 var(--body);color:#3e4f46;padding:12px 26px;border-radius:999px;cursor:pointer;min-width:124px}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(21,37,31,.12)}
.panel{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:stretch}
.panel[hidden]{display:none}
.panel-art{position:relative;min-height:440px;border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:18px;padding:28px}
.dhunku-art{background:linear-gradient(#eaebef,#e5e7e9)}
.clarilot-art{background:radial-gradient(70% 70% at 50% 45%,#ffffff,#e4ebf3)}
.cat{width:auto;height:380px;max-width:44%;object-fit:contain}
.chat{max-width:300px;padding:18px;border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 12px 30px -14px rgba(21,37,31,.35);font-size:15px;line-height:1.45}
.chat-label{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#4c6357}
.bubble{margin:0 0 8px;padding:10px 13px;border-radius:14px}
.bubble.kid{background:#e3f1ef;width:max-content;max-width:100%}
.bubble.bot{background:#f3f4f2;margin-bottom:0}
.round{width:46%;max-width:300px;height:auto}
.round-2{margin-top:90px}
.panel-copy{padding:36px 34px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.panel-copy h3{font-family:var(--display);font-weight:400;font-size:44px;line-height:1.05;margin:0 0 16px}
.panel-copy p{color:var(--muted);margin-bottom:14px}
.tag{font-size:12px;font-weight:700;letter-spacing:.16em;color:#4c6357!important;margin-bottom:10px!important}
.status{font-size:15px;line-height:1.5;margin:6px 0 26px!important}
.status span{display:inline-block;margin-right:8px;padding:4px 10px;border-radius:999px;background:#e1efec;color:#0b5f57;font-size:11px;font-weight:700;letter-spacing:.12em}

/* USPs */
.usps{padding:96px 0;background:#eef2ee;border-block:1px solid var(--line)}
.usp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.usp-grid li{padding:28px 24px;border-radius:22px;background:#fff;border:1px solid #dde4de}
.usp-grid h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.usp-grid p{font-size:16px;line-height:1.55;color:var(--muted);margin:0}

/* About */
.about{padding:96px 0 104px}
.about-inner{max-width:none}
.about-copy{max-width:720px;margin:0 auto;text-align:center}
.about-copy p{font-size:19px;color:var(--muted)}
.about-copy strong{color:var(--ink)}

/* Footer (unchanged look) */
.site-footer{background:var(--ink);color:#f2f5ef;padding:60px 0 25px;font-family:var(--system);font-size:16px;line-height:1.55}
.footer-inner{display:flex;justify-content:space-between;gap:30px}
.footer-brand{font-size:32px}
.footer-inner p{font-size:14px;color:#b9c8bc;margin:13px 0 0}
.footer-links{display:flex;gap:26px;align-items:flex-start;font-size:14px;font-weight:600}
.footer-bottom{border-top:1px solid #ffffff2b;margin-top:62px;padding-top:24px;display:flex;justify-content:space-between;gap:22px;font-size:11px;line-height:1.55;letter-spacing:.03em;color:#acc0b1}
.footer-bottom span:nth-child(2){text-align:center}

@media (max-width:1000px){
  .proof{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .proof li{min-height:4.65em}
  .usp-grid{grid-template-columns:repeat(2,1fr)}
  .panel{grid-template-columns:1fr}
  .panel-art{min-height:360px}
  .cat{height:320px}
}
@media (max-width:650px){
  .shell{width:min(100% - 36px,1240px)}
  .header-inner{min-height:68px}
  .brand{font-size:23px}
  .brand-icon{width:27px;height:27px}
  nav{gap:16px;font-size:14px}
  nav a[href="#about"]{display:none}
  .nav-contact{padding:8px 12px;min-width:126px}
  .nav-contact span{margin-left:3px}
  body{font-size:17px}
  .hero{padding:60px 0 36px}
  h1{font-size:clamp(42px,11.5vw,56px)}
  .hero-lede{font-size:18px;margin-bottom:28px}
  .pill{min-height:46px;padding:12px 18px;font-size:15px}
  .hero-actions{gap:10px;flex-wrap:nowrap}
  .hero-actions .pill{flex:1 1 0;min-width:0;max-width:170px;padding-inline:10px;white-space:nowrap}
  .proof{margin-top:48px;grid-template-columns:1fr 1fr;font-size:11px;line-height:1.55;gap:12px}
  .proof li{min-height:6.2em}
  .showcase,.usps,.about{padding:64px 0}
  .section-head{margin-bottom:30px}
  .stage{border-radius:26px;padding:8px}
  .tabs button{padding:11px 20px;font-size:15px}
  .panel-art{min-height:0;flex-direction:column;padding:22px 16px;gap:16px}
  .cat{height:260px;max-width:100%}
  .chat{max-width:100%}
  .round{width:70%}
  .round-2{display:none}
  .panel-copy{padding:24px 14px 18px}
  .panel-copy h3{font-size:38px}
  .usp-grid{grid-template-columns:1fr;gap:12px}
  .usp-grid li{padding:22px 20px}
  .about-copy p{font-size:17px}
  .footer-inner{display:block}
  .footer-links{display:grid;gap:15px;margin-top:36px}
  .footer-bottom{display:grid;gap:13px;margin-top:49px}
  .footer-bottom span:nth-child(2){text-align:left}
}
@media (max-width:420px){nav a[href="#products"]{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}