@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Playfair+Display:wght@600;700&display=swap');*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--bg)}a{text-decoration:none;color:inherit}.shell{width:min(1180px,calc(100% - 38px));margin:auto}.demo-nav{height:78px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.logo{font:800 20px 'Manrope';display:flex;align-items:center;gap:10px}.logo i{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;font-style:normal}.links{display:flex;gap:27px;font-size:13px;font-weight:600}.demo-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border-radius:8px;font-weight:700;font-size:13px;border:0}.demo-hero{min-height:680px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}.tag{font-size:10px;letter-spacing:2px;font-weight:800}.demo-hero h1{font-size:clamp(47px,6vw,76px);line-height:1.02;letter-spacing:-3px;margin:23px 0}.demo-hero p{font-size:17px;line-height:1.75;color:var(--muted);max-width:590px}.hero-actions{display:flex;gap:12px;margin-top:30px}.visual{min-height:500px;border-radius:26px;position:relative;overflow:hidden;box-shadow:0 35px 80px #0002}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:15px;overflow:hidden;margin-top:-35px;position:relative;z-index:2;box-shadow:0 20px 45px #0001}.stats div{padding:25px;text-align:center;background:white}.stats b{display:block;font-size:25px}.stats small{color:var(--muted)}.demo-section{padding:100px 0}.section-title{text-align:center;max-width:680px;margin:0 auto 45px}.section-title span{font-size:10px;letter-spacing:2px;font-weight:800}.section-title h2{font:800 clamp(34px,4vw,52px) 'Manrope';letter-spacing:-2px;margin:15px 0}.section-title p{color:var(--muted);line-height:1.7}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:28px;border-radius:15px;background:white;border:1px solid var(--line);transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:0 18px 38px #0000000d}.card-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:12px;font-size:20px}.card h3{font:800 19px 'Manrope'}.card p{color:var(--muted);font-size:13px;line-height:1.7}.demo-cta{margin-bottom:70px;border-radius:22px;padding:55px;display:flex;align-items:center;justify-content:space-between;color:white}.demo-cta h2{font:800 35px 'Manrope';margin:0 0 8px}.demo-cta p{margin:0;opacity:.75}.demo-footer{border-top:1px solid var(--line);padding:30px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
/* Restaurant */.restaurant{--ink:#26170f;--muted:#78675d;--bg:#fffaf4;--line:#eadfd2}.restaurant .logo i{background:#b64426;color:white}.restaurant .demo-btn{background:#b64426;color:white}.restaurant .tag,.restaurant .section-title span{color:#b64426}.restaurant .demo-hero h1{font-family:'Playfair Display';letter-spacing:-2px}.restaurant .visual{background:radial-gradient(circle at 65% 38%,#efc98a 0 9%,transparent 10%),radial-gradient(circle at 65% 38%,#3e1d12 0 30%,transparent 31%),linear-gradient(145deg,#c65d37,#512317)}.plate{position:absolute;width:285px;height:285px;border:22px solid #f7e7ce;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 20px 50px #0005}.plate:before{content:"CHEF'S SPECIAL";position:absolute;inset:35px;border:1px solid #e4bb73;border-radius:50%;display:grid;place-items:center;color:#ffe4b2;font:700 12px 'Playfair Display';letter-spacing:2px}.menu-note{position:absolute;right:24px;bottom:24px;background:#fffaf0;padding:17px;border-radius:12px;width:170px}.menu-note b{display:block}.menu-note small{color:#8c7567}.restaurant .card-icon{background:#fff0e6;color:#b64426}.restaurant .demo-cta{background:#321911}
/* Real estate */.estate{--ink:#101d2b;--muted:#687587;--bg:#f5f7f8;--line:#dce3e8}.estate .logo i{background:#183a52;color:white}.estate .demo-btn{background:#183a52;color:white}.estate .tag,.estate .section-title span{color:#b38b58}.estate .visual{background:linear-gradient(135deg,#aac0ce,#e5ddd1)}.building{position:absolute;bottom:0;left:70px;width:280px;height:420px;background:linear-gradient(90deg,#f6f1e8 0 38%,#b4c4cb 39% 43%,#e7e3dc 44% 68%,#8ea4ae 69% 73%,#f1ece4 74%);clip-path:polygon(13% 15%,60% 0,100% 11%,100% 100%,0 100%,0 30%);box-shadow:20px 10px 30px #20354233}.building:after{content:"";position:absolute;inset:110px 30px 30px;background:repeating-linear-gradient(0deg,transparent 0 38px,#718894 39px 42px),repeating-linear-gradient(90deg,#486474 0 36px,#d5dde0 37px 42px)}.property-badge{position:absolute;right:22px;top:25px;background:white;padding:16px;border-radius:12px;box-shadow:0 15px 30px #20354222}.property-badge b{display:block;color:#183a52}.property-badge small{color:#8a765e}.estate .card-icon{background:#e9f0f4;color:#183a52}.estate .demo-cta{background:#183a52}
/* School */.school{--ink:#14213d;--muted:#66738d;--bg:#f7f9ff;--line:#dfe5f1}.school .logo i{background:#3157f6;color:white}.school .demo-btn{background:#3157f6;color:white}.school .tag,.school .section-title span{color:#3157f6}.school .visual{background:linear-gradient(145deg,#486eff,#83a2ff)}.school-card{position:absolute;background:white;border-radius:17px;box-shadow:0 25px 50px #13266435}.school-card.main{inset:48px 40px 80px;padding:28px}.school-card.main small{color:#3157f6;font-weight:800}.school-card.main h3{font:800 30px 'Manrope';margin:12px 0}.school-card.main .lesson{height:110px;border-radius:11px;background:linear-gradient(135deg,#f3b244,#f67863);margin-top:28px;display:flex;align-items:end;padding:17px;color:white;font-weight:800}.school-card.float{right:17px;bottom:25px;padding:17px;width:190px}.school-card.float b,.school-card.float span{display:block}.school-card.float span{font-size:11px;color:#7c879d;margin-top:5px}.school .card-icon{background:#eaf0ff;color:#3157f6}.school .demo-cta{background:linear-gradient(135deg,#243fc2,#694bd5)}
@media(max-width:850px){.links{display:none}.demo-hero{grid-template-columns:1fr;padding:55px 0}.visual{min-height:430px}.stats{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}.demo-cta{display:block}.demo-cta .demo-btn{margin-top:20px}}@media(max-width:520px){.demo-nav>.demo-btn{display:none}.demo-hero h1{letter-spacing:-2px}.hero-actions{flex-direction:column;align-items:flex-start}.visual{min-height:390px}.building{left:25px}.stats{margin-top:15px}.demo-section{padding:70px 0}.demo-cta{padding:32px}.demo-footer{display:grid;gap:10px}}
body:before{content:"DEMO WEBSITE · PORTFOLIO CONCEPT · NOT A REAL BUSINESS";display:block;padding:9px 15px;background:#101522;color:#fff;text-align:center;font-size:9px;font-weight:800;letter-spacing:1.6px}.demo-footer span{font-size:0}.demo-footer span:after{content:"This is a fictional concept website designed and developed by Vinit Pandey for portfolio presentation.";font-size:12px}@media(max-width:520px){body:before{font-size:8px;letter-spacing:1px;padding:8px}.demo-footer span:after{font-size:11px;line-height:1.5}}