@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root { --bg:#f6f1e8; --ink:#17251d; --accent:#c97351; --soft:#e4d4c2; --card:#fffdf8; --serif:"Playfair Display",Georgia,serif; --sans:"DM Sans",sans-serif; --display:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.demo-shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.concept-bar { height:38px; background:#151512; color:#d7d4cb; display:flex; align-items:center; justify-content:center; gap:18px; font-size:10px; letter-spacing:.5px; }
.concept-bar b { color:white; }
.concept-bar a { color:#dfff67; border-bottom:1px solid; font-weight:700; }
.demo-header { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent); }
.demo-logo { font:700 24px/1 var(--display); letter-spacing:-1px; }
.demo-logo small { display:block; margin-top:5px; font:700 7px/1 var(--sans); letter-spacing:2px; color:var(--accent); }
.demo-nav { display:flex; gap:32px; align-items:center; font-size:12px; font-weight:600; }
.demo-nav .nav-button { border-radius:50px; padding:11px 16px; color:white; background:var(--ink); }
.demo-hero { min-height:650px; display:grid; grid-template-columns:.88fr 1.12fr; gap:60px; align-items:center; padding-block:65px; }
.demo-kicker { display:flex; align-items:center; gap:9px; font-size:9px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--accent); }
.demo-kicker:before { content:""; width:22px; height:2px; background:var(--accent); }
.demo-hero h1 { font:700 clamp(55px,6.4vw,88px)/.98 var(--display); letter-spacing:-4px; margin:23px 0; }
.demo-hero h1 em { font:500 italic 1em/1 var(--serif); color:var(--accent); }
.demo-hero p { color:color-mix(in srgb,var(--ink) 62%,transparent); font-size:17px; line-height:1.65; max-width:530px; }
.demo-actions { display:flex; align-items:center; gap:22px; margin-top:32px; }
.demo-button { display:inline-flex; align-items:center; gap:18px; border-radius:40px; padding:15px 20px; color:white; background:var(--ink); font-size:12px; font-weight:700; box-shadow:0 12px 28px color-mix(in srgb,var(--ink) 18%,transparent); }
.demo-button span { color:var(--accent); }
.demo-link { font-size:11px; font-weight:700; border-bottom:1px solid; padding-bottom:4px; }
.demo-trust { margin-top:42px; display:flex; gap:28px; }
.demo-trust span { font-size:9px; color:color-mix(in srgb,var(--ink) 55%,transparent); }
.demo-trust b { display:block; color:var(--ink); font:700 18px var(--display); }
.demo-hero-art { min-height:500px; position:relative; border-radius:220px 220px 24px 24px; background:var(--soft); overflow:hidden; box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 18%,transparent); }
.art-label { position:absolute; left:24px; top:24px; z-index:3; background:color-mix(in srgb,var(--card) 92%,transparent); padding:10px 13px; border-radius:40px; font-size:8px; font-weight:800; letter-spacing:1px; }
.art-badge { position:absolute; right:18px; bottom:18px; z-index:4; width:105px; height:105px; border-radius:50%; display:grid; place-items:center; text-align:center; background:var(--accent); color:white; font-size:9px; font-weight:800; line-height:1.4; transform:rotate(8deg); }
.demo-strip { background:var(--ink); color:white; overflow:hidden; }
.strip-inner { min-height:90px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:20px; }
.strip-inner div { border-left:1px solid color-mix(in srgb,white 20%,transparent); padding-left:18px; }
.strip-inner b { display:block; font:700 20px var(--display); color:var(--soft); }
.strip-inner span { color:color-mix(in srgb,white 58%,transparent); font-size:9px; }
.demo-section { padding-block:110px; }
.section-head { display:grid; grid-template-columns:1fr .65fr; align-items:end; gap:50px; margin-bottom:55px; }
.section-head h2 { font:700 clamp(40px,5vw,64px)/1.03 var(--display); letter-spacing:-3px; margin:16px 0 0; }
.section-head h2 em { font:500 italic 1em var(--serif); color:var(--accent); }
.section-head > p { margin:0; color:color-mix(in srgb,var(--ink) 60%,transparent); line-height:1.7; font-size:14px; }
.demo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.demo-card { min-height:260px; padding:26px; background:var(--card); border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:18px; display:flex; flex-direction:column; transition:.25s; }
.demo-card:hover { transform:translateY(-4px); box-shadow:0 15px 35px color-mix(in srgb,var(--ink) 9%,transparent); }
.card-icon { width:52px; height:52px; border-radius:15px; background:var(--soft); color:var(--accent); display:grid; place-items:center; font:500 23px var(--serif); margin-bottom:45px; }
.demo-card h3 { font:700 18px var(--display); margin:0 0 10px; }
.demo-card p { color:color-mix(in srgb,var(--ink) 58%,transparent); font-size:12px; line-height:1.6; margin:0; }
.demo-card a { margin-top:auto; padding-top:20px; color:var(--accent); font-size:10px; font-weight:800; }
.demo-story { display:grid; grid-template-columns:1fr 1fr; min-height:560px; background:var(--ink); color:white; }
.story-art { position:relative; overflow:hidden; background:var(--soft); }
.story-content { padding:80px; align-self:center; }
.story-content h2 { font:700 clamp(42px,5vw,65px)/1 var(--display); letter-spacing:-3px; margin:18px 0 25px; }
.story-content h2 em { color:var(--soft); font:500 italic 1em var(--serif); }
.story-content p { color:color-mix(in srgb,white 62%,transparent); line-height:1.7; font-size:14px; }
.story-list { display:grid; gap:14px; margin-top:28px; }
.story-list span { display:flex; align-items:center; gap:10px; font-size:11px; }
.story-list span:before { content:"✓"; width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:white; font-size:10px; }
.demo-contact { padding-block:110px; }
.contact-panel { border-radius:28px; background:var(--accent); color:white; min-height:360px; padding:65px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:50px; position:relative; overflow:hidden; }
.contact-panel:after { content:"✦"; position:absolute; right:-35px; bottom:-130px; font-size:330px; color:color-mix(in srgb,white 10%,transparent); line-height:1; }
.contact-panel small { font-size:9px; font-weight:800; letter-spacing:1.8px; }
.contact-panel h2 { font:700 clamp(42px,5vw,66px)/1 var(--display); letter-spacing:-3px; margin:17px 0; max-width:750px; }
.contact-panel p { margin:0; color:color-mix(in srgb,white 78%,transparent); }
.contact-circle { width:140px; height:140px; border-radius:50%; background:var(--ink); color:white; display:grid; place-items:center; text-align:center; font-size:12px; font-weight:800; position:relative; z-index:2; transition:.25s; }
.contact-circle:hover { transform:rotate(5deg) scale(1.04); }
.demo-footer { border-top:1px solid color-mix(in srgb,var(--ink) 13%,transparent); min-height:100px; display:flex; align-items:center; justify-content:space-between; color:color-mix(in srgb,var(--ink) 55%,transparent); font-size:9px; }
.back-float { position:fixed; left:16px; bottom:16px; z-index:30; padding:10px 14px; background:#151512; color:white; border-radius:30px; box-shadow:0 10px 30px #0003; font-size:9px; font-weight:700; }

/* Niva */
.niva { --bg:#f4f0e7; --ink:#254536; --accent:#bd7758; --soft:#d9bfa9; --card:#fffdf7; }
.niva .demo-logo { font:500 31px var(--serif); }
.niva .portrait { position:absolute; inset:45px 55px 0; border-radius:180px 180px 0 0; background:#e9c7ae; overflow:hidden; }
.niva .portrait:before { content:""; position:absolute; width:220px; height:400px; border-radius:48% 52% 45% 50%; background:#a9634e; left:50%; top:70px; transform:translateX(-50%); box-shadow:-75px -80px 0 -10px #4a3932; }
.niva .portrait:after { content:""; position:absolute; width:145px; height:220px; background:#f0bea0; border-radius:49% 51% 44% 48%; left:50%; top:115px; transform:translateX(-50%); }
.niva .face-line { position:absolute; width:38px; height:14px; border-top:2px solid #7f4b3c; border-radius:50%; left:50%; top:200px; transform:translateX(-50%); z-index:2; }
.niva .story-art { background:linear-gradient(145deg,#b8cdbf,#75927f); }
.niva .story-art:before { content:"SKIN / SCIENCE / CARE"; position:absolute; color:#f0eadb; font:500 52px/1.25 var(--serif); width:380px; left:70px; top:110px; transform:rotate(-8deg); }
.niva .story-art:after { content:"✦"; position:absolute; right:60px; bottom:35px; font-size:160px; color:#e5c5ad; }

/* Daali */
.daali { --bg:#f5e3bb; --ink:#3c251a; --accent:#d94b2b; --soft:#f3c64f; --card:#fff3d5; }
.daali .demo-logo { letter-spacing:5px; }
.daali .demo-hero-art { border-radius:20px; background:var(--accent); color:#ffe8af; }
.daali .food-type { position:absolute; left:35px; top:70px; font:500 60px/1 var(--serif); }
.daali .thali { position:absolute; width:330px; height:330px; border-radius:50%; background:#f3d28b; right:-25px; bottom:-30px; box-shadow:inset 0 0 0 20px #ddb66c,0 25px 50px #6c1d1788; }
.daali .thali:before { content:""; position:absolute; width:105px; height:105px; border-radius:50%; background:#a63d25; left:60px; top:50px; box-shadow:120px 20px #e9a634,40px 150px #769342,145px 140px #f8e5b0; }
.daali .thali:after { content:"घर जैसा"; position:absolute; left:85px; top:150px; font:700 21px var(--sans); color:#54251b; transform:rotate(-9deg); }
.daali .story-art { background:#f0bc3e; }
.daali .story-art:before { content:"DAALI"; position:absolute; font:800 150px/1 var(--display); letter-spacing:8px; color:#d74628; transform:rotate(-90deg); left:-95px; top:205px; }
.daali .story-art:after { content:"●"; position:absolute; right:70px; top:80px; font-size:230px; color:#64372a; text-shadow:0 50px #fff0c5; }

/* Law */
.lawdemo { --bg:#e8e0d0; --ink:#182621; --accent:#b58a46; --soft:#c7b28e; --card:#f8f3e8; }
.lawdemo .demo-logo { font:500 20px var(--serif); letter-spacing:1px; }
.lawdemo .demo-hero-art { border-radius:0; background:#1a2924; color:#d9c6a0; }
.law-monogram { position:absolute; inset:70px; border:1px solid #b58a46; border-radius:220px 220px 0 0; display:grid; place-items:center; font:500 110px/.8 var(--serif); text-align:center; }
.law-monogram span { font-size:35px; }
.lawdemo .story-art { background:#b3915c; }
.lawdemo .story-art:before { content:"§"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:500 300px var(--serif); color:#1a2924; }
.lawdemo .story-art:after { content:"EST. 2008  •  MUMBAI  •  DELHI"; position:absolute; left:50%; bottom:35px; transform:translateX(-50%); color:#f5ead5; white-space:nowrap; font-size:9px; letter-spacing:2px; }

/* Ujas */
.ujas { --bg:#eef1ce; --ink:#153c31; --accent:#ff6a30; --soft:#d9e892; --card:#fafce8; }
.ujas .demo-logo span { color:var(--accent); }
.ujas .demo-hero-art { border-radius:22px; background:#d7e78e; }
.sun { position:absolute; width:300px; height:300px; border-radius:50%; background:var(--accent); right:-60px; top:-70px; }
.panels { position:absolute; width:500px; height:270px; left:30px; bottom:-80px; background:#194b5a; transform:skewY(-10deg) rotate(-6deg); display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:8px; box-shadow:0 30px 40px #16372b66; }
.panels i { background:repeating-linear-gradient(90deg,#1c4b5b 0 20px,#58838c 21px); border:1px solid #7ba0a5; }
.ujas .story-art { background:#ff6a30; }
.ujas .story-art:before { content:"☀"; position:absolute; font-size:330px; color:#f7f2c9; left:50%; top:50%; transform:translate(-50%,-52%); }
.ujas .story-art:after { content:"CLEAN ENERGY / LOWER BILLS"; position:absolute; left:50%; bottom:35px; transform:translateX(-50%); font-weight:800; font-size:9px; letter-spacing:2px; white-space:nowrap; }

/* Veda */
.veda { --bg:#f1ecff; --ink:#33246b; --accent:#725fd1; --soft:#f2ce50; --card:#fffdf8; }
.veda .demo-logo { font-weight:800; }
.veda .demo-hero-art { border-radius:35px; background:#7563d5; color:white; }
.learning-cards { position:absolute; inset:65px 45px; display:grid; grid-template-columns:1fr 1fr; gap:14px; transform:rotate(-4deg); }
.learning-cards div { border-radius:18px; background:white; color:#3b2c76; display:grid; place-items:center; text-align:center; font:700 18px var(--display); box-shadow:0 15px 25px #35267c55; }
.learning-cards div:nth-child(2) { background:#f2cf4f; transform:translateY(25px); }
.learning-cards div:nth-child(3) { background:#ff796d; font-size:55px; }
.learning-cards div:nth-child(4) { background:#b6e18a; transform:translateY(25px); }
.veda .story-art { background:#f2cf4f; }
.veda .story-art:before { content:"Aa"; position:absolute; left:50%; top:50%; transform:translate(-50%,-55%) rotate(-8deg); font:800 260px var(--display); color:#725fd1; }
.veda .story-art:after { content:"✎  +  ✦  =  ☺"; position:absolute; left:50%; bottom:42px; transform:translateX(-50%); font-size:24px; white-space:nowrap; }

/* Axis */
.axis { --bg:#deddd7; --ink:#171c1e; --accent:#ef5b2b; --soft:#929694; --card:#f2f1ed; }
.axis .demo-logo span { color:var(--accent); }
.axis .demo-hero-art { border-radius:3px; background:#cacbc6; background-image:linear-gradient(#0000000c 1px,transparent 1px),linear-gradient(90deg,#0000000c 1px,transparent 1px); background-size:35px 35px; }
.gear { position:absolute; width:390px; height:390px; border-radius:50%; right:-45px; bottom:-50px; background:radial-gradient(circle,#252a2b 0 16%,#bcbdb8 17% 23%,#4c5253 24% 43%,#979894 44% 48%,#202527 49% 64%,transparent 65%); filter:drop-shadow(-25px 30px 24px #0005); }
.gear:before { content:""; position:absolute; inset:22px; border:22px dashed #353a3b; border-radius:50%; }
.metal-card { position:absolute; left:25px; bottom:30px; background:#191e20; color:white; padding:22px; width:190px; }
.metal-card b { display:block; color:var(--accent); font:800 30px var(--display); }
.metal-card small { font-size:7px; letter-spacing:1px; }
.axis .story-art { background:#272d2e; }
.axis .story-art:before { content:"01 / 100"; position:absolute; left:60px; top:50px; font:800 85px var(--display); letter-spacing:-6px; color:#ef5b2b; }
.axis .story-art:after { content:"PRECISION IS NOT A PROMISE. IT IS A PROCESS."; position:absolute; left:65px; bottom:65px; width:340px; font:700 25px/1.2 var(--display); color:#dad9d2; }

@media (max-width:850px) {
  .demo-nav a:not(.nav-button) { display:none; }
  .demo-hero { grid-template-columns:1fr; padding-top:80px; }
  .demo-hero-art { min-height:520px; }
  .section-head { grid-template-columns:1fr; gap:20px; }
  .demo-grid { grid-template-columns:1fr 1fr; }
  .demo-story { grid-template-columns:1fr; }
  .story-art { min-height:480px; }
  .story-content { padding:65px 40px; }
}
@media (max-width:560px) {
  body { max-width:100vw; overflow-x:hidden; }
  .demo-shell { width:calc(100% - 28px); }
  .concept-bar { justify-content:space-between; padding:0 14px; font-size:8px; }
  .concept-bar span { display:none; }
  .demo-header { height:70px; }
  .demo-nav .nav-button { padding:9px 12px; font-size:9px; }
  .demo-hero { padding-block:48px; gap:30px; overflow:hidden; }
  .demo-hero h1 { font-size:47px; letter-spacing:-3px; }
  .demo-hero p { font-size:15px; }
  .demo-actions { flex-direction:row; align-items:center; gap:12px; }
  .demo-button { padding:13px 15px; font-size:10px; }
  .demo-link { font-size:9px; }
  .demo-trust { gap:16px; }
  .demo-hero-art { min-height:390px; border-radius:170px 170px 20px 20px; }
  .strip-inner { grid-template-columns:1fr 1fr; padding-block:18px; }
  .strip-inner div:nth-child(n+3) { display:none; }
  .demo-section { padding-block:68px; }
  .section-head h2 { font-size:42px; letter-spacing:-2px; }
  .demo-grid { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 14px 14px 0; margin-right:-14px; scrollbar-width:none; }
  .demo-grid::-webkit-scrollbar { display:none; }
  .demo-card { flex:0 0 84%; min-height:230px; scroll-snap-align:start; }
  .story-art { min-height:320px; }
  .story-content { padding:55px 24px; }
  .contact-panel { padding:45px 24px; grid-template-columns:1fr; }
  .contact-circle { width:110px; height:110px; }
  .portrait { inset:38px 28px 0 !important; }
  .law-monogram { inset:55px 35px; }
  .learning-cards { inset:50px 25px; }
  .panels { transform:scale(.75) skewY(-10deg) rotate(-6deg); transform-origin:left bottom; }
  .gear { transform:scale(.75); transform-origin:right bottom; }
  .back-float { font-size:0; width:42px; height:42px; padding:0; display:grid; place-items:center; }
  .back-float:after { content:"←"; font-size:17px; }
}