/* ===== GRANTHIFY SITE - SHARED STYLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap');

:root {
  --white:#FFFFFF;--bg:#FFFFFF;--bg-s:#F7F7F5;--bg-hover:#EFEFED;
  --text:#191919;--text2:#6B6B6B;--text3:#9B9B9B;
  --red:#EB5757;--red-bg:rgba(235,87,87,0.06);
  --border:#E8E8E6;--border-h:#D4D4D2;
  --sans:'Inter',-apple-system,sans-serif;
  --hindi:'Noto Sans Devanagari',sans-serif;
  --max-w:1020px;--t:0.2s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.w{max-width:var(--max-w);margin:0 auto;padding:0 32px}
.bg-s{background:var(--bg-s)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-i{display:flex;align-items:center;justify-content:space-between;height:54px}
.logo{font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-0.4px}
.logo span{color:var(--red)}
.nav-l{display:flex;gap:28px;align-items:center}
.nav-l a{font-size:0.84rem;color:var(--text2);font-weight:500;transition:color var(--t)}
.nav-l a:hover{color:var(--text)}
.nav-cta{background:var(--text)!important;color:var(--white)!important;padding:6px 16px;border-radius:4px;font-weight:600!important;font-size:0.82rem!important}
.nav-cta:hover{opacity:0.85!important}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.3rem;cursor:pointer}
@media(max-width:768px){.nav-toggle{display:block}.nav-l{display:none;position:absolute;top:54px;left:0;right:0;background:var(--white);flex-direction:column;padding:16px 32px;gap:14px;border-bottom:1px solid var(--border)}.nav-l.open{display:flex}}

/* SECTIONS */
section{padding:80px 0}
.label{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--text3);margin-bottom:8px}
h2.title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.25;color:var(--text);margin-bottom:10px;letter-spacing:-0.3px}
h1.page-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:1.1;color:var(--text);letter-spacing:-0.5px;margin-bottom:16px}
.sub{font-size:0.92rem;color:var(--text2);max-width:480px;line-height:1.7}
.accent-line{width:24px;height:2px;background:var(--red);border-radius:1px;margin-bottom:16px}
.page-hero{padding-top:120px;padding-bottom:60px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:4px;font-weight:600;font-size:0.86rem;border:none;cursor:pointer;transition:all var(--t);font-family:var(--sans)}
.btn-dark{background:var(--text);color:var(--white)}.btn-dark:hover{opacity:0.85}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--text)}
.btn-red{background:var(--red);color:var(--white)}.btn-red:hover{opacity:0.9}
.btn-w{background:var(--white);color:var(--text);padding:10px 24px;border-radius:4px;font-weight:600;font-size:0.86rem;border:none;cursor:pointer;font-family:var(--sans);transition:all var(--t);display:inline-flex}
.btn-w:hover{opacity:0.9}
.btns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

/* STATS */
.stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:40px}
.stat-v{font-size:1.4rem;font-weight:700;color:var(--text);letter-spacing:-0.3px}
.stat-l{font-size:0.72rem;color:var(--text3);margin-top:2px}

/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:768px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* CARDS */
.card{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:24px;transition:all var(--t)}
.card:hover{border-color:var(--border-h)}
.card h3{font-size:0.95rem;font-weight:600;color:var(--text);margin-bottom:6px}
.card p{font-size:0.85rem;color:var(--text2);line-height:1.6}
.ic{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--bg-s)}
.ic svg{width:18px;height:18px;color:var(--text)}

/* CREDENTIALS */
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.cred{display:flex;align-items:center;gap:6px;padding:4px 12px;background:var(--bg-s);border-radius:3px;font-size:0.72rem;color:var(--text2);font-weight:500}
.cred-dot{width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0}

/* LOGO STRIP */
.logo-strip{padding:48px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.logo-strip-label{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--text3);text-align:center;margin-bottom:28px}
.logo-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap}
.logo-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.logo-item img{height:40px;width:auto;filter:grayscale(100%) opacity(0.6);transition:filter var(--t)}
.logo-item:hover img{filter:grayscale(0%) opacity(1)}
.logo-item .logo-fallback{height:40px;display:flex;align-items:center;justify-content:center;padding:0 12px;background:var(--bg-s);border:1px solid var(--border);border-radius:6px;font-size:0.72rem;font-weight:700;color:var(--text2);white-space:nowrap}
.logo-item .logo-caption{font-size:0.65rem;color:var(--text3);font-weight:500}

/* BADGES */
.badge{display:inline-flex;padding:3px 8px;border-radius:3px;font-size:0.66rem;font-weight:600;letter-spacing:0.4px;width:fit-content;text-transform:uppercase}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-dark{background:var(--bg-s);color:var(--text2)}

/* PRODUCT CARDS */
.product-card{background:var(--white);border:1px solid var(--border);border-radius:6px;overflow:hidden;transition:all var(--t);display:flex;flex-direction:column}
.product-card:hover{border-color:var(--border-h);box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.product-body{padding:24px;flex:1;display:flex;flex-direction:column}
.product-body h3{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:-0.2px}
.product-body .tagline{font-size:0.85rem;color:var(--text2);line-height:1.6;margin-bottom:18px}
.product-features{list-style:none;margin-bottom:20px;flex:1}
.product-features li{padding:4px 0;font-size:0.84rem;color:var(--text2);display:flex;align-items:flex-start;gap:8px}
.ck{color:var(--text);font-size:0.75rem;margin-top:3px;flex-shrink:0}
.product-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border)}
.product-price{font-size:1.3rem;font-weight:700;color:var(--text)}
.product-price-note{font-size:0.72rem;color:var(--text3)}
.product-link{display:inline-flex;align-items:center;gap:4px;font-size:0.84rem;font-weight:600;color:var(--text);transition:gap var(--t)}
.product-link:hover{gap:7px;color:var(--red)}
.product-link svg{width:14px;height:14px}

/* MOCKUPS */
.mockup-pen{height:220px;background:var(--bg-s);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pen-device{display:flex;flex-direction:column;align-items:center;gap:12px}
.pen-body{width:14px;height:120px;background:var(--text);border-radius:7px 7px 2px 2px;position:relative}
.pen-tip{width:8px;height:16px;background:var(--text2);border-radius:0 0 4px 4px;margin:-2px auto 0}
.pen-light{width:6px;height:6px;border-radius:50%;background:var(--red);position:absolute;top:12px;left:50%;transform:translateX(-50%)}
.pen-label{font-size:0.68rem;color:var(--text3);font-weight:500;letter-spacing:0.5px}
.phone-float{position:absolute;right:20%;top:50%;transform:translateY(-50%);width:72px;height:128px;background:var(--white);border:2px solid var(--border);border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;gap:4px}
.phone-notch{width:24px;height:3px;background:var(--border);border-radius:2px;margin:0 auto}
.phone-bar{height:4px;background:var(--bg-s);border-radius:2px}
.phone-bar.red{background:var(--red-bg);width:70%}
.phone-word{font-size:0.5rem;color:var(--text);font-weight:700;margin-top:2px}
.phone-meaning{font-size:0.42rem;color:var(--text2);line-height:1.4}

.mockup-book{height:220px;background:var(--bg-s);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.book{border-radius:2px 4px 4px 2px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 6px}
.book-big{width:64px;height:88px;background:var(--white);border:1px solid var(--border)}
.book-small{width:48px;height:64px;background:var(--text);color:var(--white)}
.book-line{height:2px;background:var(--border);border-radius:1px;margin-bottom:3px}
.book-line-w{height:2px;background:rgba(255,255,255,0.2);border-radius:1px;margin-bottom:3px}
.book-label{font-size:0.42rem;font-weight:600;letter-spacing:0.3px}
.reduction-tag{position:absolute;bottom:16px;right:16px;font-size:0.62rem;color:var(--red);font-weight:600;background:var(--red-bg);padding:3px 8px;border-radius:3px}

/* STEP NUMBERS */
.step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.82rem;font-weight:700;margin:0 auto 12px;background:var(--bg-s);color:var(--text)}
.step-num.accent{background:var(--red-bg);color:var(--red)}

/* TEAM */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;max-width:640px}
@media(max-width:768px){.team-grid{grid-template-columns:1fr}}
.team-card{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:28px;display:flex;gap:16px;align-items:flex-start;transition:all var(--t)}
.team-card:hover{border-color:var(--border-h)}
.team-avatar{width:48px;height:48px;border-radius:50%;background:var(--text);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:700;flex-shrink:0}
.team-info h4{font-size:0.95rem;font-weight:600;color:var(--text)}
.team-info .role{font-size:0.78rem;color:var(--red);font-weight:500;margin:2px 0 6px}
.team-info p{font-size:0.82rem;color:var(--text2);line-height:1.55}

/* COMPANY BLURB */
.blurb{padding:48px 0;border-bottom:1px solid var(--border)}
.blurb-inner{display:flex;gap:40px;align-items:flex-start}
@media(max-width:768px){.blurb-inner{flex-direction:column;gap:20px}}
.blurb-text{font-size:0.88rem;color:var(--text2);line-height:1.7;max-width:560px}
.blurb-details{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.blurb-detail{font-size:0.76rem;color:var(--text3)}
.blurb-detail strong{color:var(--text2);font-weight:600}

/* CTA SECTION */
.cta-section{text-align:center;background:var(--text);color:var(--white);padding:64px 0}
.cta-section h2{font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:700;color:var(--white);margin-bottom:10px;letter-spacing:-0.2px}
.cta-section p{color:rgba(255,255,255,0.6);font-size:0.9rem;margin-bottom:24px}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:48px 0 32px}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
@media(max-width:768px){.ft-top{grid-template-columns:1fr 1fr;gap:24px}}
.ft-col h5{font-size:0.76rem;font-weight:600;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.ft-col a{display:block;font-size:0.82rem;color:var(--text2);margin-bottom:8px;transition:color var(--t)}
.ft-col a:hover{color:var(--text)}
.ft-col p{font-size:0.82rem;color:var(--text2);line-height:1.6}
.ft-col .ft-company{font-size:0.78rem;color:var(--text3);line-height:1.7;margin-top:8px}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px}
.ft-copy{font-size:0.72rem;color:var(--text3)}
.ft-socials{display:flex;gap:16px}
.ft-socials a{color:var(--text3);transition:color var(--t)}
.ft-socials a:hover{color:var(--text)}
.ft-socials svg{width:18px;height:18px}

/* ORDER OVERLAY */
.ov{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);align-items:center;justify-content:center}
.ov.on{display:flex}
.of{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:36px;width:90%;max-width:420px}
.of h3{font-size:1.15rem;font-weight:700;margin-bottom:3px}
.of .fs{color:var(--text3);font-size:0.85rem;margin-bottom:20px}
.of label{display:block;font-size:0.76rem;font-weight:600;color:var(--text2);margin-bottom:5px;margin-top:14px}
.of input,.of select{width:100%;padding:10px 14px;background:var(--bg-s);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--sans);font-size:0.88rem;outline:none;transition:border-color var(--t)}
.of input:focus,.of select:focus{border-color:var(--text)}
.of select option{background:var(--white)}
.fa{display:flex;gap:10px;margin-top:24px}
.btn-cancel{padding:10px 18px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text2);cursor:pointer;font-family:var(--sans);font-size:0.86rem;transition:all var(--t)}
.btn-cancel:hover{border-color:var(--text2)}
.sm{display:none;text-align:center;padding:36px}
.sm.on{display:block}
.sm .ck-icon{width:56px;height:56px;border-radius:50%;background:var(--bg-s);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 16px;font-weight:700}
.sm h3{font-size:1.15rem;margin-bottom:6px}
.sm p{color:var(--text2);font-size:0.85rem}

/* SDG BADGES */
.sdg{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-s);border:1px solid var(--border);border-radius:4px;font-size:0.78rem;font-weight:600;color:var(--text)}
.sdg-num{width:24px;height:24px;border-radius:4px;background:var(--text);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700}

/* TIMELINE */
.timeline{position:relative;padding-left:32px;margin-top:28px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--border)}
.tl-item{position:relative;margin-bottom:28px}
.tl-item::before{content:'';position:absolute;left:-28px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--bg-s);border:2px solid var(--border)}
.tl-item.active::before{background:var(--red);border-color:var(--red)}
.tl-item h4{font-size:0.92rem;font-weight:600;color:var(--text);margin-bottom:2px}
.tl-item .tl-status{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.tl-item p{font-size:0.82rem;color:var(--text2);line-height:1.55}

/* CONTENT SECTIONS */
.content-block{margin-bottom:48px}
.content-block h3{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:8px}
.content-block p{font-size:0.88rem;color:var(--text2);line-height:1.7;margin-bottom:12px}
.content-block ul{list-style:none;margin-bottom:12px}
.content-block li{padding:4px 0;font-size:0.85rem;color:var(--text2);display:flex;align-items:flex-start;gap:8px}
.content-block li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--text3);flex-shrink:0;margin-top:8px}

/* SPEC TABLE */
.spec-table{width:100%;border-collapse:collapse;margin:20px 0}
.spec-table th{text-align:left;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text3);padding:8px 0;border-bottom:1px solid var(--border)}
.spec-table td{font-size:0.85rem;color:var(--text2);padding:10px 0;border-bottom:1px solid var(--border)}
.spec-table td:first-child{font-weight:500;color:var(--text);width:40%}

/* LEGAL PAGES */
.legal{padding-top:120px;padding-bottom:60px}
.legal h1{font-size:1.6rem;font-weight:700;margin-bottom:4px}
.legal .legal-date{font-size:0.78rem;color:var(--text3);margin-bottom:32px}
.legal h2{font-size:1.1rem;font-weight:600;margin-top:32px;margin-bottom:8px;color:var(--text)}
.legal p{font-size:0.88rem;color:var(--text2);line-height:1.75;margin-bottom:12px}
.legal ul{list-style:none;margin-bottom:16px}
.legal li{padding:3px 0;font-size:0.85rem;color:var(--text2);display:flex;align-items:flex-start;gap:8px}
.legal li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--text3);flex-shrink:0;margin-top:8px}

/* ===== SITE IMAGES - grayscale default, color on hover ===== */
.site-img{width:100%;display:block;filter:grayscale(100%);transition:filter 0.4s ease}
.site-img:hover{filter:grayscale(0%)}
.img-wrap{border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.img-wrap:hover .site-img{filter:grayscale(0%)}