/* ============================================================= sudipdutta.com — Design System v2 Fonts: Fraunces (headings) · Inter (body) · JetBrains Mono (labels) · Poppins (header/footer) Load Google Fonts in each page's — not here (avoids @import perf hit). ============================================================= */ :root{ --paper:#FFFFFF; --surface:#F4F6F9; --paper-2:#ECEFF3; --ink:#1D1D1F; --ink-soft:#55555B; --ink-faint:#86868B; --clay:#1E8FC9; --clay-deep:#15709E; --ochre:#4FC8EC; --cyan:#4FC8EC; --on-dark-soft:#B9BBC2; --line:#E6E8EC; --line-strong:#D4D7DD; --maxw:1100px; } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:"Poppins",system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} h1,h2,h3{font-family:"Poppins",system-ui,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0} h1{font-size:clamp(2.6rem,6vw,4.4rem)} h2{font-size:clamp(1.9rem,4vw,2.9rem)} h3{font-size:1.3rem} em{font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--clay)} p{margin:0 0 1rem} a{color:var(--clay);text-decoration:none} .label{font-family:"JetBrains Mono",monospace;font-size:.78rem;letter-spacing:.04em;color:var(--clay);margin-bottom:1.1rem;display:block} .lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch} .section{padding:92px 0;border-top:1px solid var(--line)} .section--surface{background:var(--surface)} .section--dark{background:#1C1C1E;color:#F4F5F7;border-top-color:rgba(255,255,255,.08)} .section--dark h1,.section--dark h2,.section--dark h3{color:#fff} .section--dark p{color:var(--on-dark-soft)} .section--dark .label{color:var(--cyan)} .section--dark em{color:var(--cyan)} .btn{display:inline-block;background:var(--clay);color:#fff;font-weight:600;font-size:.98rem;padding:14px 26px;border-radius:100px;transition:background .15s,transform .18s} .btn:hover{background:var(--clay-deep);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--ink);border:1.5px solid currentColor;border-radius:100px} .btn--ghost:hover{background:var(--clay);color:#fff;border-color:var(--clay)} .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.2rem} /* ===== HEADER — shared dark site header (Poppins) ===== */ .site-header{position:sticky;top:0;z-index:60;background:rgba(28,28,30,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);font-family:"Poppins",system-ui,sans-serif} .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 40px;max-width:1340px;margin-inline:auto} .brand{display:flex;align-items:center;gap:16px;color:#fff;flex-shrink:0;text-decoration:none} .brand__name{font-weight:700;font-size:1.34rem;letter-spacing:-.01em;white-space:nowrap;color:#fff} .brand__slash{flex-shrink:0;width:3px;height:26px;background:var(--cyan);transform:skewX(-20deg);box-shadow:0 0 14px rgba(79,200,236,.75)} .brand__tag{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft);white-space:nowrap} .nav{display:flex;align-items:center;gap:26px} .nav>a:not(.nav__icon){color:var(--on-dark-soft);font-size:.9rem;font-weight:500;position:relative;white-space:nowrap;transition:color .2s} .nav>a:not(.nav__icon):hover,.nav>a.is-active{color:#fff} .nav>a:not(.nav__icon)::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:0;background:var(--cyan);box-shadow:0 0 10px rgba(79,200,236,.7);transition:width .25s ease} .nav>a:not(.nav__icon):hover::after,.nav>a.is-active::after{width:100%} .nav__sep{width:2px;height:22px;background:var(--cyan);transform:skewX(-20deg);opacity:.85;box-shadow:0 0 12px rgba(79,200,236,.7)} .nav__icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--on-dark-soft);font-style:normal;font-size:.82rem;font-weight:600;transition:all .2s;text-decoration:none} .nav__icon svg{width:15px;height:15px} .nav__icon:hover{background:var(--cyan);border-color:var(--cyan);color:#06222e} .nav-toggle{display:none} .mobile-nav{display:none;background:rgba(28,28,30,.97);border-top:1px solid rgba(255,255,255,.08);font-family:"Poppins",sans-serif} /* hero */ .hero{padding:96px 0 84px} .hero h1{max-width:16ch} .hero .lead{margin-top:1.6rem} /* stat band */ .stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .stat{padding:8px 26px;border-left:1px solid var(--line-strong)} .stat:first-child{padding-left:0;border-left:0} .stat .num{font-family:"Fraunces",serif;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:500;color:var(--ink);line-height:1} .stat .slbl{font-family:"JetBrains Mono",monospace;font-size:.74rem;color:var(--ink-faint);margin-top:.6rem;line-height:1.4} /* tiles */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2.4rem} .tile{border:1px solid var(--line-strong);border-radius:14px;padding:30px;background:var(--paper);transition:border-color .15s,transform .15s;display:block} .tile:hover{border-color:var(--clay);transform:translateY(-3px)} .tile h3{color:var(--ink)} .tile .label{margin-bottom:.7rem} .tile p{color:var(--ink-soft);margin:.5rem 0 0;font-size:.98rem} /* split */ .split{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;margin-top:2.4rem;align-items:start} .note{border-left:3px solid var(--ochre);padding:6px 0 6px 20px;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:1.3rem;color:var(--ink-soft)} .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:2.4rem} .cols h3{margin-bottom:.9rem} .cols ul{margin:0;padding-left:1.1rem;color:var(--ink-soft)} .cols li{margin-bottom:.5rem} /* pull quote */ .pull{text-align:center;padding:104px 0} .pull p{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.5rem);font-style:italic;color:var(--ink);max-width:24ch;margin:0 auto;line-height:1.2} .pull .label{text-align:center} /* pricing */ .price-wrap{max-width:540px;margin:2.6rem auto 0;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);padding:44px;text-align:center} .price{font-family:"Fraunces",serif;font-size:clamp(3rem,7vw,4rem);font-weight:500;color:var(--clay);line-height:1} .price small{display:block;font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--ink-faint);margin-top:.6rem;letter-spacing:.03em} .price-wrap ul{list-style:none;padding:0;margin:1.8rem 0 0;text-align:left;display:inline-block} .price-wrap li{color:var(--ink-soft);margin:.55rem 0;padding-left:1.4rem;position:relative} .price-wrap li::before{content:"//";position:absolute;left:0;font-family:"JetBrains Mono",monospace;color:var(--ochre);font-size:.8rem} /* faq */ details{border-top:1px solid var(--line);padding:18px 0} details:first-of-type{border-top:none} summary{font-family:"Poppins",system-ui,sans-serif;font-size:1.05rem;font-weight:600;cursor:pointer;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-size:1.15rem;font-weight:400;color:var(--clay);flex-shrink:0;line-height:1} details[open]>summary::after{content:"−"} details p{color:var(--ink-soft);margin:.9rem 0 0;max-width:64ch} .narrow{max-width:760px} /* footer — matches the shared site footer (dark, Poppins) */ .site-footer{background:#1C1C1E;color:#F4F5F7;padding-block:88px 0;font-family:"Poppins",system-ui,sans-serif} .site-footer .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .site-footer .kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)} .site-footer .kicker::before{content:"";width:26px;height:2px;background:var(--cyan);display:inline-block} .site-footer h2{font-family:"Poppins",sans-serif;color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;margin:1rem 0 0;letter-spacing:-.01em} .footer__contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:1.8rem;font-size:.86rem} .footer__contact a{color:var(--cyan)} .footer__contact-sep{color:var(--on-dark-soft)} .footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:2.8rem} .footer__nav a{display:block;padding:24px 26px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:background .2s,border-color .2s;text-decoration:none} .footer__nav a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)} .footer__nav-title{display:block;font-size:1rem;font-weight:700;color:#fff} .footer__nav-desc{display:block;margin-top:4px;font-size:.86rem;color:var(--on-dark-soft);max-width:32ch} .footer__nav a:hover .footer__nav-title{color:var(--cyan)} .footer__bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:2.8rem} .footer__bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:22px} .footer__wordmark{font-weight:700;color:#fff;font-size:.95rem;text-decoration:none} .footer__wordmark:hover{color:var(--cyan)} .footer__copyright{font-size:.82rem;color:var(--on-dark-soft)} @media(max-width:820px){ .brand__slash,.brand__tag{display:none} .nav>a:not(.nav__icon){display:none} .nav__sep{display:none} .site-header__inner{padding-inline:20px;gap:12px} .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.06);cursor:pointer;flex-shrink:0;padding:0} .nav-toggle span{display:block;width:13px;height:1.5px;background:#fff;border-radius:1px;transition:transform .2s,opacity .2s} .site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .site-header.nav-open .nav-toggle span:nth-child(2){opacity:0} .site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .site-header.nav-open .mobile-nav{display:flex;flex-direction:column;padding:4px 20px 16px} .mobile-nav a{display:block;padding:13px 0;color:var(--on-dark-soft);font-size:1rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;transition:color .2s} .mobile-nav a:last-child{border-bottom:none} .mobile-nav a:hover,.mobile-nav a.is-active{color:#fff} .stats4{grid-template-columns:1fr 1fr;gap:28px 0} .stat{padding:0 20px}.stat:nth-child(odd){padding-left:0;border-left:0} .grid3,.split,.cols{grid-template-columns:1fr} .footer__nav{grid-template-columns:1fr} .footer__bottom-inner{justify-content:center;text-align:center} }