@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300..800&display=swap");

/* Licensed brand fonts: drop the .woff2 files into static/fonts/ with these names and they are used automatically.
   Until then the free look-alike Inter Tight is used. */
@font-face{font-family:"TT Interphases";src:url("/static/fonts/TTInterphases-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TT Interphases";src:url("/static/fonts/TTInterphases-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"TT Interphases";src:url("/static/fonts/TTInterphases-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"TT Interphases";src:url("/static/fonts/TTInterphases-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"TT Interphases";src:url("/static/fonts/TTInterphases-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Glock Grotesk";src:url("/static/fonts/GlockGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glock Grotesk";src:url("/static/fonts/GlockGrotesk-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Glock Grotesk";src:url("/static/fonts/GlockGrotesk-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Glock Grotesk";src:url("/static/fonts/GlockGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Glock Grotesk";src:url("/static/fonts/GlockGrotesk-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* thetool design tokens — pastel lavender / pink / peach / sky gradient */
:root{
  --bg:#fbfaff; --panel:#ffffff; --soft:#f4f2fb; --line:#e9e5f3; --text:#1f1a2e; --body:#5d5873; --muted:#8e89a3;
  /* brand (violet) — variable names kept short for reuse across pages */
  --red:#7a5af5; --red-d:#6240e8; --red-soft:#efebff;
  --pink:#ef6fa8; --pink-soft:#fde8f1; --peach:#ffd9b8; --sky:#6fb9f2; --lav:#c7b5f6;
  --yellow:#ffe1c4; --purple:#7a5af5; --violet:#8b6cf6;
  --good:#16a34a; --good-soft:#e7f7ed; --warn:#d97706; --warn-soft:#fdf3e2; --bad:#e0315a; --bad-soft:#fdeaf0; --info:#3b82f6; --info-soft:#e8f0fe;
  --grad:
    radial-gradient(60% 55% at 0% 0%, #ddd1fa 0%, rgba(221,209,250,0) 70%),
    radial-gradient(50% 50% at 78% 0%, #fdeddc 0%, rgba(253,237,220,0) 70%),
    radial-gradient(60% 60% at 12% 72%, #f9c0d7 0%, rgba(249,192,215,0) 70%),
    linear-gradient(135deg,#e5d3f7 0%,#f9c7dc 35%,#fbd9e4 55%,#dad1f8 78%,#b5d9f9 100%);
  --grad-btn:linear-gradient(135deg,#8f6cf6 0%,#ef6fa8 100%);
  --on-grad:#211a33;
  --radius:16px; --shadow:0 1px 2px rgba(40,20,80,.04),0 10px 30px rgba(60,30,120,.07);
  --font:"TT Interphases","Glock Grotesk","Inter Tight",Inter,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text);line-height:1.15;margin:0;font-weight:525}
a{color:var(--red);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* the signature gradient with its sweeping curve */
.grad-bg{background:var(--grad);position:relative;overflow:hidden;color:var(--on-grad)}
.grad-bg:after{content:"";position:absolute;width:150%;height:130%;left:30%;top:48%;border-radius:50%;pointer-events:none;
  background:linear-gradient(165deg,rgba(247,245,255,.9) 0%,rgba(205,197,247,.55) 40%,rgba(172,213,249,.65) 100%)}
.grad-bg>*{position:relative;z-index:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:600 15px var(--font);
  padding:13px 26px;border-radius:999px;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-yellow,.btn-dark{background:var(--text);color:#fff;box-shadow:0 8px 22px rgba(31,26,46,.22)}
.btn-white{background:#fff;color:var(--text);box-shadow:0 6px 18px rgba(60,30,120,.08)}
.btn-red{background:var(--grad-btn);color:#fff;box-shadow:0 8px 22px rgba(122,90,245,.28)}
.btn-red:hover{filter:brightness(1.05)}
.btn-outline{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.btn-ghost{background:var(--soft);color:var(--text)}
.btn-sm{padding:8px 16px;font-size:13.5px}

/* form */
input,select,textarea{font:15px var(--font);color:var(--text);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
label{display:block;font-size:13px;font-weight:600;color:var(--text);margin:0 0 6px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--soft);color:var(--text)}
.badge-purple{background:var(--grad-btn);color:#fff}
.badge-yellow{background:var(--yellow);color:#8a4500}

/* logo */
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:23px;letter-spacing:-.035em;color:var(--text)}
.logo .mk{width:29px;height:30px;display:block;flex:none}
.logo .mk svg{stroke:#fff}
.logo.light{color:var(--on-grad)}

/* AI platform chips */
.mchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--text)}
.mchip i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:9px;font-weight:800}

/* platform logo badges */
.lgo{background:#fff!important;border:1px solid var(--line);color:var(--text)!important;position:relative;overflow:visible;box-sizing:border-box}
.lgo img{width:62%;height:62%;object-fit:contain;display:block}
.lgo .tg{position:absolute;right:-4px;bottom:-4px;min-width:12px;height:12px;padding:0 2px;border-radius:6px;background:var(--text);color:#fff;font:700 7.5px/12px var(--font);text-align:center}

/* ============================== motion ============================== */
/* drifting gradient on every gradient section */
.grad-bg{background-size:220% 220%;animation:gradShift 16s ease-in-out infinite alternate}
@keyframes gradShift{0%{background-position:0% 0%}50%{background-position:100% 40%}100%{background-position:35% 100%}}
.grad-bg:after{animation:curveDrift 20s ease-in-out infinite alternate;will-change:transform}
@keyframes curveDrift{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-7%,-5%) rotate(-5deg)}}

/* gradient text shimmer */
.hl{background-size:220% 100%!important;animation:shimmer 6s ease-in-out infinite alternate}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}

/* scroll reveal (added by /static/motion.js) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* lift on hover */
.lift{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.lift:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(40,20,80,.04),0 18px 40px rgba(60,30,120,.12)}

/* buttons: gentle press + moving gradient on primary */
.btn:active{transform:translateY(0) scale(.98)}
.btn-red{background-size:200% 100%;background-position:0% 50%;transition:transform .15s,box-shadow .2s,background-position .6s ease}
.btn-red:hover{background-position:100% 50%}

/* icons: float and pop */
.floaty{animation:floaty 5s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.logo .mk{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .mk{transform:rotate(-12deg) scale(1.08)}
.icon-pop{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.lift:hover .icon-pop,.icon-pop:hover{transform:scale(1.15) rotate(-6deg)}
.mchip i,.mi{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.mchip:hover i,.mi:hover{transform:scale(1.2)}

/* line charts draw themselves in */
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s ease forwards;animation-delay:var(--dd,.2s)}
@keyframes draw{to{stroke-dashoffset:0}}

/* soft pulse for live/status dots */
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(122,90,245,.35)}50%{box-shadow:0 0 0 8px rgba(122,90,245,0)}}

/* respect "reduce motion" */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}