:root { --paper:#f7efdc; --paper-deep:#ece0c7; --surface:#fffaf0; --ink:#173f2b; --muted:#627060; --line:#ddceb0; --green:#2d6e4a; --blue:#245e7d; --blue-deep:#173f5c; --sage:#98a884; --brass:#8a661c; --shadow:rgba(43,53,39,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
main section[id], #main { scroll-margin-top:96px; }
body { margin:0; color:var(--ink); background:linear-gradient(115deg,rgba(255,253,243,.78),rgba(247,239,220,.98)),var(--paper); font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; line-height:1.5; }
button,a { font:inherit; } a { color:inherit; } .skip-link { position:fixed; top:10px; left:10px; z-index:50; transform:translateY(-150%); padding:10px 14px; border-radius:9px; color:#fff; background:var(--blue-deep); text-decoration:none; }.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:20; min-height:82px; padding:12px clamp(20px,5vw,88px); border-bottom:1px solid rgba(127,111,76,.24); background:rgba(247,239,220,.93); backdrop-filter:blur(18px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; flex-shrink:0; }.brand-mark { width:49px; height:49px; object-fit:contain; transform:translateY(3px); }.brand-type { display:grid; line-height:1; }.brand-type b { font-size:1.35rem; letter-spacing:-.045em; }.brand-type small { margin-top:5px; color:var(--muted); font-family:"Nirmala UI","Noto Sans Gujarati",sans-serif; font-size:.83rem; line-height:1; }
.header-actions { display:flex; align-items:center; gap:22px; }.site-nav { display:flex; align-items:center; gap:19px; }.site-nav a { color:var(--muted); text-decoration:none; font-size:.84rem; font-weight:700; }.site-nav a:hover { color:var(--ink); }.language-switch { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:rgba(255,250,240,.72); }.language-button { min-height:34px; padding:0 11px; border:0; border-radius:999px; color:var(--muted); background:transparent; cursor:pointer; font-size:.78rem; font-weight:800; }.language-button.is-active { color:#fff; background:var(--blue-deep); box-shadow:0 2px 7px rgba(23,63,92,.2); }
.hero,.statement,.product-preview,.feature-grid,.story,.privacy,.questions,.closing { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }.hero { min-height:650px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:clamp(32px,5vw,76px); padding:82px 0 96px; }.eyebrow { margin:0 0 15px; color:var(--green); font-size:.74rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:720px; margin-bottom:22px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.25rem,6.6vw,6rem); font-weight:700; line-height:.97; letter-spacing:-.065em; } h2 { margin-bottom:17px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.25rem,4.5vw,4.2rem); line-height:1.01; letter-spacing:-.048em; } h3 { margin:14px 0 10px; font-size:1.25rem; letter-spacing:-.02em; }.lede { max-width:600px; color:var(--muted); font-size:1.13rem; line-height:1.65; }.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:31px; }.button { display:inline-flex; min-height:47px; align-items:center; justify-content:center; padding:0 17px; border:1px solid var(--line); border-radius:11px; text-decoration:none; font-weight:800; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); box-shadow:0 10px 22px var(--shadow); }.button.primary { border-color:var(--blue-deep); color:#fff; background:var(--blue-deep); }.button.secondary { color:var(--ink); background:rgba(255,250,240,.68); }.hero-note { margin:17px 0 0; color:var(--green); font-size:.78rem; font-weight:750; letter-spacing:.05em; }.hero-image { aspect-ratio:1730 / 909; overflow:hidden; border:1px solid rgba(127,111,76,.26); border-radius:30px; background:var(--paper-deep); box-shadow:0 28px 64px var(--shadow); }.hero-image img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.statement { padding:105px 0 55px; border-top:1px solid var(--line); }.statement h2 { max-width:850px; }.statement p:last-child { max-width:690px; color:var(--muted); font-size:1.1rem; line-height:1.65; }.product-preview { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:clamp(34px,6vw,84px); padding:32px 0 74px; }.preview-copy > p:not(.eyebrow):not(.preview-note) { max-width:560px; color:var(--muted); font-size:1.08rem; line-height:1.65; }.preview-note { max-width:500px; margin:23px 0 0; color:var(--green); font-size:.82rem; font-weight:750; }.preview-image { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 24px 52px var(--shadow); }.preview-image img { display:block; width:100%; height:auto; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:25px 0 110px; }.feature-card { min-height:262px; padding:28px; border:1px solid var(--line); border-radius:18px; background:rgba(255,250,240,.78); box-shadow:0 12px 30px rgba(87,70,38,.04); }.feature-card span,.story-step { color:var(--brass); font-size:.75rem; font-weight:900; letter-spacing:.11em; }.feature-card p { color:var(--muted); line-height:1.6; }
.story { padding:88px 0 104px; border-block:1px solid var(--line); }.story-intro { max-width:735px; }.story-intro > p:last-child { color:var(--muted); line-height:1.65; }.story-workspace { display:grid; grid-template-columns:.75fr 1.25fr; gap:18px; margin-top:38px; }.story-tabs { display:grid; align-content:start; gap:8px; }.story-tab { width:100%; min-height:56px; padding:0 17px; border:1px solid var(--line); border-radius:13px; color:var(--muted); background:rgba(255,250,240,.58); text-align:left; cursor:pointer; font-weight:800; transition:border-color .18s ease,background .18s ease,color .18s ease; }.story-tab:hover,.story-tab.is-active { border-color:var(--green); color:var(--ink); background:#edf1e5; }.story-panel { min-height:292px; padding:34px; border:1px solid var(--line); border-radius:19px; background:var(--surface); box-shadow:0 18px 42px rgba(87,70,38,.08); }.story-panel h3 { margin-top:9px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.7rem,3vw,2.5rem); }.story-panel p:not(.story-step) { max-width:680px; color:var(--muted); line-height:1.65; }.story-panel ul { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:0; margin:23px 0 0; list-style:none; }.story-panel li { padding:12px; border-left:3px solid var(--sage); background:#f5f1e5; color:var(--ink); font-size:.86rem; font-weight:700; }
.privacy { display:grid; grid-template-columns:1.2fr .8fr; gap:48px; margin-top:100px; padding:66px; border-radius:28px; color:#f8f0dd; background:linear-gradient(125deg,#173f2b,#255d50); box-shadow:0 24px 50px rgba(23,63,43,.17); }.privacy .eyebrow { color:#d1dfb5; }.privacy p:not(.eyebrow) { color:#e0e6d5; line-height:1.65; }.privacy-points { display:grid; align-content:center; gap:14px; }.privacy-points p { margin:0; padding:17px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.06); }.privacy-points b,.privacy-points span { display:block; }.privacy-points b { color:#edf4d9; margin-bottom:4px; }.privacy-points span { color:#d5dfd0; font-size:.9rem; }
.questions { padding:112px 0; }.questions > h2 { max-width:760px; }.questions details { border-bottom:1px solid var(--line); }.questions summary { display:flex; align-items:center; min-height:66px; cursor:pointer; color:var(--ink); font-weight:800; list-style:none; }.questions summary::-webkit-details-marker { display:none; }.questions summary::after { content:"+"; margin-left:auto; color:var(--blue); font-size:1.5rem; font-weight:400; }.questions details[open] summary::after { content:"–"; }.questions details p { max-width:730px; padding:0 34px 21px 0; color:var(--muted); line-height:1.65; }.closing { padding:112px 0; border-top:1px solid var(--line); text-align:center; }.closing h2 { max-width:780px; margin-inline:auto; }.closing p:last-of-type { max-width:620px; margin:0 auto 25px; color:var(--muted); font-size:1.08rem; } footer { display:flex; justify-content:space-between; gap:20px; padding:28px clamp(24px,5vw,88px); border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }

/* Gujarati needs a script-aware font, neutral tracking, and more vertical room for joined glyphs. */
:root[data-language="gu"] body { font-family:"Nirmala UI","Noto Sans Gujarati","Gujarati Sangam MN",sans-serif; line-height:1.75; }
:root[data-language="gu"] .brand-type b { font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; }
:root[data-language="gu"] h1,
:root[data-language="gu"] h2,
:root[data-language="gu"] h3,
:root[data-language="gu"] .story-panel h3 { font-family:"Nirmala UI","Noto Sans Gujarati","Gujarati Sangam MN",sans-serif; letter-spacing:0; word-spacing:0; }
:root[data-language="gu"] h1 { max-width:11.25em; font-size:clamp(2.85rem,5.3vw,5.35rem); line-height:1.32; }
:root[data-language="gu"] h2 { font-size:clamp(2.05rem,4.1vw,3.9rem); line-height:1.36; }
:root[data-language="gu"] h3 { line-height:1.5; }
:root[data-language="gu"] .eyebrow,
:root[data-language="gu"] .hero-note { letter-spacing:0; line-height:1.6; text-transform:none; }
:root[data-language="gu"] .lede,
:root[data-language="gu"] .statement p:last-child,
:root[data-language="gu"] .preview-copy > p:not(.eyebrow):not(.preview-note),
:root[data-language="gu"] .story-intro > p:last-child,
:root[data-language="gu"] .story-panel p:not(.story-step),
:root[data-language="gu"] .questions details p,
:root[data-language="gu"] .closing p:last-of-type { line-height:1.8; }
:root[data-language="gu"] .button,
:root[data-language="gu"] .language-button,
:root[data-language="gu"] .story-tab,
:root[data-language="gu"] .questions summary { font-family:"Nirmala UI","Noto Sans Gujarati","Gujarati Sangam MN",sans-serif; letter-spacing:0; line-height:1.45; }
:root[data-language="gu"] .button { min-height:51px; padding-block:6px; text-align:center; }
:focus-visible { outline:3px solid var(--brass); outline-offset:3px; } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
@media (max-width:940px) { .site-header { align-items:flex-start; }.header-actions { flex-direction:column-reverse; align-items:flex-end; gap:8px; }.hero { min-height:0; grid-template-columns:1fr; padding:68px 0 84px; }.hero-image { min-height:0; max-width:700px; }.hero-image img { min-height:0; }.product-preview,.feature-grid { grid-template-columns:1fr; }.product-preview { padding-bottom:62px; }.preview-image { max-width:760px; }.feature-grid { padding-bottom:82px; }.feature-card { min-height:0; }.story-workspace,.privacy { grid-template-columns:1fr; }.story-panel ul { grid-template-columns:1fr; }.privacy { gap:25px; padding:42px 30px; }.questions { padding:86px 0; } }
@media (max-width:620px) { .site-header { min-height:76px; padding:10px 16px; }.brand-mark { width:43px; height:43px; }.brand-type b { font-size:1.16rem; }.brand-type small { font-size:.72rem; }.site-nav { display:none; }.header-actions { margin-left:auto; }.language-button { min-height:32px; padding:0 9px; }.hero,.statement,.product-preview,.feature-grid,.story,.privacy,.questions,.closing { width:min(100% - 32px,1180px); }.hero { padding-top:53px; }.hero-image,.hero-image img { min-height:0; }.hero-image { border-radius:21px; }.hero-actions { display:grid; grid-template-columns:1fr; }.button { width:100%; }.story { padding:70px 0; }.story-panel { min-height:0; padding:25px 21px; }.privacy { margin-top:72px; padding:32px 22px; border-radius:21px; }.questions,.closing { padding:76px 0; } footer { display:grid; padding:26px 16px; } }