/* ============ together.ai mirror — shared styles (Pencil + Forge) ============ */
@font-face{font-family:"The Future";src:url("fonts/TheFuture-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"The Future";src:url("fonts/TheFuture-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"PP Neue Montreal Mono";src:url("fonts/PPNeueMontrealMono-Book.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal Mono";src:url("fonts/PPNeueMontrealMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#000; --ink-soft:#1a1a1a; --gray-head:#9aa0a6; --gray-text:#5b6573;
  --paper:#fff; --navy:#010120; --chip:#f3f6fa; --line:rgba(0,0,0,.09);
  --stat-blue:#e9f2fe; --stat-pink:#fbeef3; --stat-peach:#fdeee6;
  --maxw:1240px; --gut:40px;
  --mono:"PP Neue Montreal Mono",ui-monospace,Menlo,monospace;
  --disp:"The Future","Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.215,.61,.355,1); --ease-io:cubic-bezier(.625,.05,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--disp);color:var(--ink-soft);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.45;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a93a0}
h1,h2{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;line-height:1.05}

/* ---- buttons ---- */
.btn{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  padding:14px 22px;border-radius:4px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background-color .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.btn-primary{background:var(--ink);color:#fff}
.btn-secondary{background:var(--chip);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}

/* ---- announcement bar ---- */
.announce{background:#000;color:#fff;text-align:center;font-size:15px;padding:9px 16px;position:relative;height:38px;overflow:hidden}
.announce .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0}
.announce .msg:first-child{opacity:1}

/* ---- header ---- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:500;letter-spacing:-.02em}
.logo .wordmark{display:inline-flex;align-items:baseline}
.logo .dot{color:#f0641e}
.nav{display:flex;gap:26px;margin:0 auto;font-size:16px}
.nav a{display:flex;align-items:center;gap:5px;opacity:.92}
.nav a .caret{font-size:9px;opacity:.5}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .sales{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.burger{display:none;width:46px;height:42px;border-radius:6px;background:var(--chip);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:18px;height:2px;background:#000;display:block}

/* ---- hero ---- */
.hero{background:radial-gradient(circle at 50% 40%,#f6fafd 35%,#e5f3ff);padding:70px 0 30px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.hero h1{font-size:64px;letter-spacing:-.03em;line-height:1.07}
.hero h1 .l2{color:var(--gray-head)}
.hero .sub{font-size:20px;color:var(--gray-text);margin:22px 0 30px;max-width:30ch}
.hero .cta{display:flex;gap:12px}
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 30px 60px rgba(60,90,180,.18))}
.hero-art .label{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#3a3a3a;display:flex;align-items:center;gap:6px;white-space:nowrap}
.hero-art .label::before{content:"";width:8px;height:8px;background:#111;display:inline-block}
.lbl-train{top:32%;left:6%} .lbl-infer{top:14%;right:4%} .lbl-research{bottom:14%;right:14%}

/* ---- trusted by marquee ---- */
.trusted{padding:26px 0 48px;background:linear-gradient(#e5f3ff,#eef5fd)}
.trusted .wrap{display:flex;align-items:center;gap:36px}
.trusted .eyebrow{flex:0 0 auto}
.marquee{overflow:hidden;flex:1;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:54px;width:max-content}
.marquee .logo-txt{font-size:21px;font-weight:500;color:#aab2bd;white-space:nowrap;letter-spacing:-.01em;opacity:.85}

/* ---- platform stats ---- */
.platform{background:linear-gradient(#fff 12%,#f6fafd 30%,#e9f2fe 90%);padding:80px 0 96px;text-align:center}
.platform h2{font-size:40px}
.section-sub{color:var(--gray-text);font-size:18px;max-width:46ch;margin:14px auto 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;text-align:left}
.stat{border-radius:8px;padding:30px 30px 26px;min-height:230px;display:flex;flex-direction:column}
.stat.blue{background:var(--stat-blue)} .stat.pink{background:var(--stat-pink)} .stat.peach{background:var(--stat-peach)}
.stat .num{font-family:var(--disp);font-weight:500;font-size:62px;letter-spacing:-.04em;margin:auto 0 10px}
.stat .cap{color:var(--gray-text);font-size:15px;margin-bottom:18px}
.stat .learn{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#444}

/* ---- full-stack tabs ---- */
.fullstack{padding:30px 0 96px;text-align:center;background:#fff}
.fullstack h2{font-size:40px}
.tabs{margin:46px auto 0;max-width:1100px}
.tab-row{display:flex;border-bottom:1px solid var(--line);text-align:center}
.tab{flex:1;padding:18px;font-size:18px;cursor:pointer;color:#9aa0a6;position:relative;border-top-left-radius:8px;border-top-right-radius:8px;transition:color .3s,background .3s}
.tab.active{color:#000;background:linear-gradient(#eafaf6,#fff)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#19c39a}
.tab-body{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;text-align:left;padding:34px 0;align-items:center}
.tab-info .ti-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:500;margin-bottom:14px}
.tab-info p{color:var(--gray-text);font-size:15px;max-width:42ch}
.tab-info .learn-btn{margin:20px 0 22px}
.tab-list .row{display:flex;align-items:center;gap:10px;padding:15px 4px;border-top:1px solid var(--line);font-size:15px}
.code-panel{background:#0d1117;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(10,15,40,.22);min-height:320px}
.code-panel .bar{display:flex;gap:6px;padding:12px 14px;background:#161b22;border-bottom:1px solid #222}
.code-panel .bar i{width:11px;height:11px;border-radius:50%;background:#333;display:block}
.code-panel pre{padding:18px;color:#8be9b8;font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap}
.code-panel pre .k{color:#79c0ff}.code-panel pre .s{color:#a5d6ff}.code-panel pre .c{color:#6e7681}

/* ---- research (navy) ---- */
.research{background:var(--navy);color:#fff;padding:84px 0 70px}
.research h2{font-size:40px}.research .section-sub{color:#aab0d0;margin-left:0;margin-right:auto;text-align:left}
.research .head{text-align:left;max-width:var(--maxw)}
.r-marquee{overflow:hidden;margin:42px 0 50px;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.r-track{display:flex;gap:20px;width:max-content}
.r-card{flex:0 0 300px;background:#0c0c2e;border:1px solid #1b1b40;border-radius:8px;padding:24px;min-height:260px;display:flex;flex-direction:column}
.r-card .eyebrow{color:#6f6fa0}
.r-card .rt{font-size:18px;font-weight:500;line-height:1.2;margin:auto 0 16px;letter-spacing:-.02em}
.r-card .auth{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#7a7a9a;text-transform:uppercase;margin-bottom:14px}
.r-card .rm{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#bcbce0}
.recognized{display:flex;align-items:center;gap:30px;justify-content:center;opacity:.7}
.recognized .eyebrow{color:#6f6fa0}.recognized .org{font-size:18px;font-weight:500;color:#cfcfe8}

/* ---- case studies ---- */
.natives{padding:88px 0;text-align:center}
.natives h2{font-size:40px}
.cases{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;margin:48px 0 36px;text-align:left}
.case{border-radius:12px;overflow:hidden;position:relative;min-height:300px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.62)),linear-gradient(135deg,#5b6b8c,#2c3654)}
.case.c2{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7)),linear-gradient(135deg,#3a2c2c,#171012)}
.case.c3{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.65)),linear-gradient(135deg,#2c4a3a,#13241c)}
.case .brand{position:absolute;top:20px;left:20px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.case .big{font-family:var(--disp);font-size:46px;font-weight:500;letter-spacing:-.03em}
.case .csub{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#d8d8d8;margin-top:4px;max-width:24ch}
.case .ctitle{font-size:18px;font-weight:500;line-height:1.25;max-width:24ch}
.case .play{position:absolute;bottom:24px;right:24px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}

/* ---- blog ---- */
.blog{padding:30px 0 92px}
.blog .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.blog h2{font-size:40px}
.blog .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:30px}
.feature{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.feature .thumb{height:300px;background:linear-gradient(120deg,#7b6cf0,#4a8df0 60%,#19c39a);display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;font-weight:500;letter-spacing:-.02em;position:relative}
.feature .thumb .tag{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;background:rgba(255,255,255,.16);padding:5px 9px;border-radius:4px;text-transform:uppercase}
.feature .meta{padding:22px 24px}
.feature .meta .eyebrow{margin-bottom:10px}
.feature .meta h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.feature .meta p{color:var(--gray-text);font-size:14px}
.blog-list{display:flex;flex-direction:column;gap:18px}
.bl-item{display:grid;grid-template-columns:120px 1fr;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.bl-item .bthumb{height:84px;border-radius:8px;background:linear-gradient(135deg,#e9f2fe,#dfeafc);border:1px solid var(--line)}
.bl-item .eyebrow{margin-bottom:7px}
.bl-item h4{font-size:15px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px;line-height:1.3}
.bl-item p{color:var(--gray-text);font-size:13px;line-height:1.4}

/* ---- final CTA ---- */
.startcta{position:relative;text-align:center;padding:110px 0;overflow:hidden;background:radial-gradient(circle at 50% 120%,#e5f3ff,#fff 70%)}
.startcta h2{font-size:40px;position:relative;z-index:2}
.startcta .section-sub{position:relative;z-index:2}
.startcta .btn{margin-top:26px;position:relative;z-index:2}
.startcta .shape{position:absolute;width:340px;height:200px;border-radius:50%;filter:blur(2px);opacity:.85}
.startcta .s1{top:-40px;left:-60px;background:radial-gradient(circle,#bcd4ff,transparent 70%)}
.startcta .s2{bottom:-50px;right:-40px;background:radial-gradient(circle,#cdbcff,transparent 70%)}

/* ---- footer ---- */
.footer{position:relative;background:linear-gradient(#fff,#f5f8fc);padding:70px 0 30px;border-top:1px solid var(--line);overflow:hidden}
.footer .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;z-index:2}
.footer .col h5{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a93a0;margin-bottom:16px}
.footer .col a{display:block;font-size:14px;color:#3a4250;margin-bottom:10px;opacity:.9}
.footer .watermark{font-family:var(--disp);font-weight:500;font-size:clamp(80px,17vw,240px);letter-spacing:-.04em;color:#000;opacity:.05;text-align:center;margin-top:30px;line-height:.8;white-space:nowrap}
.footer .legal{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:24px;padding-top:22px;position:relative;z-index:2}
.footer .legal .links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#5b6573}
.footer .legal .copy{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#8a93a0}
.footer .blob{position:absolute;width:240px;height:240px;border-radius:50%;opacity:.5;filter:blur(8px)}
.footer .b1{bottom:80px;left:30px;background:radial-gradient(circle,#ffd9c2,transparent 70%)}
.footer .b2{top:30px;right:80px;background:radial-gradient(circle,#d9c2ff,transparent 70%)}

/* logo mark svg sizing */
.logomark{width:34px;height:30px;flex:0 0 auto}

/* ================= responsive ================= */
@media(max-width:991px){
  :root{--gut:28px}
  .nav,.nav-cta .sales{display:none}
  .burger{display:flex}
  .hero h1{font-size:52px}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:14px}
  .cases{grid-template-columns:1fr 1fr;}
  .footer .cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:44px}
  .hero .sub{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
  .hero-art{order:2;margin-top:20px}
  .hero-art .label{display:none}
  .trusted .wrap{flex-direction:column;gap:14px;align-items:flex-start}
  .stats{grid-template-columns:1fr}
  .tab-body{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .blog .grid{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .platform h2,.fullstack h2,.research h2,.natives h2,.blog h2,.startcta h2{font-size:30px}
}
@media(max-width:480px){
  .announce{font-size:13px}
  .bl-item{grid-template-columns:84px 1fr}
}