/* FUTURISE · futurise.co.in — built on THE CORE tokens (futurise-brand-system.vercel.app/tokens.css)
   Light-mode-committed marketing site. Assets at root per house convention. */

/* ---- fonts ---- */
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-ExtraBold.woff2") format("woff2");font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Black.woff2") format("woff2");    font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Italic.woff2") format("woff2");        font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-MediumItalic.woff2") format("woff2");  font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-SemiBoldItalic.woff2") format("woff2");font-weight:600; font-style:italic; font-display:swap; }

:root{
  /* THE CORE tokens */
  --fz-yellow:#FFC20E; --fz-black:#000; --fz-white:#fff;
  --fz-graphite:#414042; --fz-slate:#58595B; --fz-grey:#E6E7E8; --fz-offwhite:#F1F2F2;
  --fz-twilight:#231E60;
  --fz-sans:"Unitea Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fz-serif:"RCL Morland", Georgia, serif;
  --fz-display:clamp(44px,7.4vw,92px);
  --fz-r-card:22px; --fz-r-pill:999px;
  --bg:#FFFFFF; --ink:#000000; --surface:#F1F2F2; --line:#E6E7E8; --muted:#58595B; --card:#FFFFFF;
  --maxw:1180px; --pad:clamp(20px,5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fz-sans);color:var(--ink);background:var(--bg);
     font-size:clamp(16px,1.15vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.em{font-family:var(--fz-serif);font-style:italic;font-weight:500;color:var(--fz-yellow)}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;
     padding:22px var(--pad);max-width:var(--maxw);margin:0 auto}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);
     font-weight:600;font-size:15px;letter-spacing:.01em}
.nav-links a:not(.nav-cta):hover{color:var(--muted)}
.nav-links a.on{border-bottom:3px solid var(--fz-yellow)}
.nav-cta{background:var(--ink);color:var(--bg);padding:10px 22px;border-radius:var(--fz-r-pill);transition:background .2s,color .2s}
.nav-cta:hover{background:var(--fz-yellow);color:var(--fz-black)}

/* ---- hero ---- */
.hero{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,120px) var(--pad) clamp(56px,8vh,100px)}
.hero-sm{padding-bottom:clamp(32px,5vh,56px)}
.eyebrow{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;
     letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--fz-yellow);flex:none}
.hero h1{font-weight:900;font-size:var(--fz-display);line-height:1.02;letter-spacing:-.015em;max-width:15ch}
.hero h1 .em{font-weight:600}
.hero-sub{margin-top:30px;max-width:58ch;font-size:clamp(17px,1.35vw,21px);color:var(--fz-graphite)}
.hero-actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-block;padding:15px 32px;border-radius:var(--fz-r-pill);font-weight:700;
     font-size:16px;transition:all .2s;border:2px solid transparent}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-solid:hover{background:var(--fz-yellow);color:var(--fz-black)}
.btn-ghost{border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-yellow{background:var(--fz-yellow);color:var(--fz-black)}
.btn-yellow:hover{background:var(--bg)}
.btn-ghost-onblack{border-color:var(--fz-white);color:var(--fz-white)}
.btn-ghost-onblack:hover{background:var(--fz-white);color:var(--fz-black)}

/* ---- black bands ---- */
.band{background:var(--fz-black);color:var(--fz-white);padding:clamp(48px,7vh,84px) var(--pad)}
.band-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.stat{display:flex;flex-direction:column;gap:8px}
.stat-n{font-weight:900;font-size:clamp(40px,4.5vw,64px);line-height:1;color:var(--fz-yellow)}
.stat-l{font-size:15px;color:var(--fz-grey);line-height:1.45}
.band-tall{padding:clamp(72px,11vh,130px) var(--pad)}
.band-inner{max-width:var(--maxw);margin:0 auto}
.onblack{color:var(--fz-white)}
.kicker-onblack{color:var(--fz-yellow)}
.band-p{margin:26px 0 38px;max-width:58ch;font-size:clamp(17px,1.3vw,20px);color:var(--fz-grey)}

/* ---- sections ---- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,10vh,120px) var(--pad)}
.section-tight{padding-top:clamp(40px,6vh,64px)}
.section-full{padding:clamp(72px,10vh,120px) var(--pad)}
.section-alt{background:var(--surface)}
.section-full>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.kicker{font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
h2{font-weight:900;font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.01em;max-width:24ch}
h2 .em{font-weight:600}
.section-sub{margin-top:18px;max-width:58ch;color:var(--fz-graphite);font-size:clamp(16px,1.2vw,19px)}

/* ---- problem bouquet ---- */
.problems{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.problem{border:2px solid var(--ink);border-radius:var(--fz-r-card);padding:32px 28px;background:var(--card);
     display:flex;flex-direction:column;gap:14px;transition:transform .2s, box-shadow .2s}
.problem:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--fz-yellow)}
.problem q{font-weight:800;font-size:clamp(19px,1.7vw,24px);line-height:1.25;letter-spacing:-.01em;quotes:"\201C" "\201D"}
.problem .pline{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
     display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.problem .pline::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--fz-yellow)}
.problem p{color:var(--fz-graphite);font-size:15.5px}

/* ---- work gallery (never-stretch frames) ---- */
.gallery{max-width:var(--maxw);margin:clamp(40px,6vh,64px) auto 0;display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,24px)}
.tile{flex:none;margin:0}
.frame{height:clamp(160px,24vh,260px);aspect-ratio:var(--r);width:auto;border-radius:18px;overflow:hidden;background:var(--line)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.tile figcaption{margin-top:10px;font-weight:600;font-size:14px;color:var(--fz-graphite)}

/* ---- software rail ---- */
.bframe{border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--card)}
.bframe .bar{height:34px;background:var(--surface);border-bottom:1.5px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px}
.bframe .bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.bframe .bar i:first-child{background:var(--fz-yellow)}
.bframe img{width:100%;height:auto}
.sw-feature{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,2.5vw,36px);align-items:start}
.sw-side{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,36px)}
.sw-meta{margin-top:16px}
.sw-meta h3{font-weight:800;font-size:22px;letter-spacing:-.01em}
.sw-meta p{color:var(--fz-graphite);font-size:15.5px;margin-top:6px;max-width:60ch}
.badge{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
     background:var(--fz-yellow);color:var(--fz-black);border-radius:var(--fz-r-pill);padding:5px 14px;margin-left:10px;vertical-align:middle}
.badge-line{background:transparent;border:1.5px solid var(--ink)}
.sw-grid{margin-top:clamp(36px,5vh,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.sw-card .bframe{border-width:1.5px}
.sw-card h3{font-weight:800;font-size:18px;margin-top:14px}
.sw-card p{color:var(--fz-graphite);font-size:14.5px;margin-top:4px}

/* ---- work list ---- */
.worklist{list-style:none;margin-top:clamp(36px,5vh,56px)}
.worklist li{border-top:2px solid var(--ink);padding:30px 0;display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:12px 48px}
.worklist li:last-child{border-bottom:2px solid var(--ink)}
.worklist h3{font-weight:800;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.01em}
.worklist p{color:var(--fz-graphite);max-width:62ch}
.nda-note{margin-top:28px;font-size:15px;color:var(--muted);font-weight:500}

/* ---- prose (studio) ---- */
.prose{max-width:70ch;margin-top:clamp(28px,4vh,44px);display:flex;flex-direction:column;gap:20px;
     font-size:clamp(17px,1.3vw,20px);color:var(--fz-graphite)}
.prose strong{color:var(--ink)}
.how{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.how div{border-top:3px solid var(--fz-yellow);padding-top:18px}
.how h3{font-weight:800;font-size:19px;margin-bottom:8px}
.how p{color:var(--fz-graphite);font-size:15.5px}

/* ---- footer ---- */
.footer{background:var(--fz-black);color:var(--fz-white);padding:clamp(56px,8vh,90px) var(--pad) 42px;border-top:6px solid var(--fz-yellow)}
.footer-tag{max-width:var(--maxw);margin:0 auto;font-weight:900;font-size:clamp(34px,5vw,64px);letter-spacing:-.015em;line-height:1}
.footer-tag .em{font-weight:600}
.footer-dot{color:var(--fz-yellow)}
.footer-meta{max-width:var(--maxw);margin:44px auto 0;display:flex;flex-wrap:wrap;gap:14px 36px;font-size:15px;color:var(--fz-grey)}
.footer-meta a:hover{color:var(--fz-yellow)}

/* ---- responsive ---- */
@media (max-width:980px){
  .problems{grid-template-columns:repeat(2,1fr)}
  .sw-feature{grid-template-columns:1fr}
  .sw-grid{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
}
@media (max-width:900px){
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .worklist li{grid-template-columns:1fr}
}
@media (max-width:640px){
  .problems{grid-template-columns:1fr}
  .gallery{gap:14px}
  .frame{height:clamp(120px,18vh,180px)}
}
@media (max-width:560px){
  .nav-links a:not(.nav-cta){display:none}
  .band-grid{grid-template-columns:1fr 1fr;gap:28px}
}