/* ===========================================
   AKSHAY KOTISH & CO. — LIGHT BRAND THEME
   White canvas · Logo greens · Editorial
   =========================================== */

:root {
    --bg:          #ffffff;
    --bg-alt:      #f8f9f5;
    --bg-tint:     #f3f6ed;
    --surface:     #ffffff;
    --surface-2:   #fafbf6;

    --card:        #ffffff;
    --card-2:      #fafbf6;
    --card-border: rgba(13, 58, 31, 0.08);
    --card-border-h: rgba(13, 58, 31, 0.22);

    --green-deep:  #0d3a1f;
    --green-deep-2:#062812;
    --green:       #22c55e;
    --green-2:     #4ade80;
    --lime:        #c0e040;
    --lime-2:      #d4ed72;
    --lime-3:      #e6f5a0;
    --lime-dim:    rgba(192,224,64,0.18);
    --lime-glow:   rgba(192,224,64,0.40);

    --text:        #0a1310;
    --text-2:      rgba(10,19,16,0.62);
    --text-3:      rgba(10,19,16,0.38);

    --gradient-brand:  linear-gradient(135deg,#0d3a1f 0%,#22c55e 50%,#0d3a1f 100%);
    --gradient-spark:  linear-gradient(135deg,#22c55e 0%,#c0e040 50%,#22c55e 100%);
    --gradient-shine:  linear-gradient(90deg,transparent 0%,rgba(192,224,64,0.20) 40%,transparent 60%);

    --shadow-sm:    0 2px 8px rgba(13,58,31,0.04);
    --shadow-md:    0 8px 28px rgba(13,58,31,0.06);
    --shadow-lg:    0 16px 48px rgba(13,58,31,0.10);
    --shadow-card:  0 4px 24px rgba(13,58,31,0.05), 0 0 0 1px rgba(13,58,31,0.04);
    --shadow-card-h:0 18px 48px rgba(13,58,31,0.12), 0 0 0 1px rgba(34,197,94,0.18);
    --shadow-glow:  0 0 28px rgba(192,224,64,0.18);
    --shadow-btn:   0 6px 20px rgba(13,58,31,0.18);

    --blur:    blur(20px);
    --blur-sm: blur(10px);
    --radius:    16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --section-padding: 120px 0;
    --container-max: 1200px;
    --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ════════════════ BASE ════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);color:var(--text);
    line-height:1.65;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--container-max);margin:0 auto;padding:0 32px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ════════════════ GRAIN — disabled on white ════════════════ */
.grain{display:none;}

/* ════════════════ CURSOR ════════════════ */
.cursor-glow{
    position:fixed;width:520px;height:520px;border-radius:50%;
    pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(34,197,94,0.08) 0%,rgba(192,224,64,0.04) 40%,transparent 70%);
    transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:multiply;
}

/* ════════════════ NAV ════════════════ */
.ambient-light{display:none;}
.nav-bar{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    padding:10px 0;background:transparent;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nav-bar.scrolled{
    background:rgba(255,255,255,0.85);
    backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    border-bottom:1px solid var(--card-border);
    box-shadow:0 4px 24px rgba(13,58,31,0.05);
}
.nav-inner{
    max-width:var(--container-max);margin:0 auto;padding:0 32px;
    display:flex;align-items:center;justify-content:space-between;height:56px;
}
.nav-logo{display:flex;align-items:center;gap:12px;}
.nav-logo-img{height:40px;width:auto;}
.logo-text{
    font-family:'Playfair Display',serif;
    font-weight:900;font-size:18px;color:var(--text);letter-spacing:0.3px;
}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-link{
    padding:8px 14px;font-size:12.5px;font-weight:600;letter-spacing:0.6px;
    color:var(--text-2);border-radius:var(--radius-sm);
    transition:all var(--transition);position:relative;text-transform:uppercase;
}
.nav-link::after{
    content:'';position:absolute;bottom:5px;left:14px;right:14px;height:2px;
    background:var(--gradient-spark);border-radius:1px;
    transform:scaleX(0);transition:transform var(--transition);transform-origin:center;
}
.nav-link:hover{color:var(--green-deep);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--green-deep);}
.nav-link-cta{
    background:var(--green-deep)!important;color:#ffffff!important;
    border:1px solid var(--green-deep)!important;font-weight:700!important;
    letter-spacing:0.8px!important;margin-left:8px;
}
.nav-link-cta::after{display:none!important;}
.nav-link-cta:hover{
    background:var(--green)!important;border-color:var(--green)!important;
    box-shadow:var(--shadow-btn);
}
.nav-toggle{
    display:none;flex-direction:column;gap:5px;
    background:none;border:none;cursor:pointer;padding:8px;
}
.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:1px;transition:all 0.3s;}

/* ════════════════ HERO ════════════════ */
.hero{
    min-height:100vh;display:flex;align-items:center;
    padding-top:80px;position:relative;overflow:hidden;background:var(--bg);
}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);}
.hero-orb-1{
    width:680px;height:680px;top:-180px;right:-100px;
    background:radial-gradient(circle,rgba(192,224,64,0.35) 0%,rgba(34,197,94,0.10) 40%,transparent 70%);
    animation:orb-float 16s ease-in-out infinite;
}
.hero-orb-2{
    width:480px;height:480px;bottom:-100px;left:-80px;
    background:radial-gradient(circle,rgba(34,197,94,0.20) 0%,rgba(13,58,31,0.06) 40%,transparent 70%);
    animation:orb-float 20s ease-in-out infinite reverse;animation-delay:-7s;
}
.hero-orb-3{
    width:280px;height:280px;top:40%;left:38%;
    background:radial-gradient(circle,rgba(192,224,64,0.15) 0%,transparent 70%);
    animation:orb-float 11s ease-in-out infinite;animation-delay:-4s;
}
@keyframes orb-float{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(28px,-42px) scale(1.06);}
    66%{transform:translate(-18px,20px) scale(0.94);}
}
.hero-grid{
    position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle,rgba(13,58,31,0.08) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 20%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 20%,transparent 100%);
}
.hero-desk{width:100%;position:relative;z-index:2;}
.desk-surface{
    max-width:var(--container-max);margin:0 auto;padding:0 32px;
    display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center;
    min-height:calc(100vh - 80px);
}
.hero-badge{
    display:inline-flex;align-items:center;gap:10px;
    padding:7px 18px 7px 12px;background:var(--lime-dim);
    border:1px solid rgba(13,58,31,0.15);border-radius:100px;
    font-size:12px;font-weight:700;color:var(--green-deep);
    margin-bottom:28px;letter-spacing:0.8px;text-transform:uppercase;
}
.badge-dot{
    width:7px;height:7px;background:var(--green);border-radius:50%;
    animation:pulse-dot 2.5s ease-in-out infinite;box-shadow:0 0 8px rgba(34,197,94,0.5);
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.45;transform:scale(0.7);}}

.hero-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(44px,5.4vw,82px);font-weight:900;
    line-height:1.04;margin-bottom:24px;letter-spacing:-1.8px;color:var(--text);
}
.title-accent{
    display:inline-block;
    background:var(--gradient-brand);background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:title-shimmer 5s linear infinite;
}
@keyframes title-shimmer{0%{background-position:0% center;}100%{background-position:200% center;}}
.hero-subtitle{
    font-size:18px;color:var(--text-2);
    max-width:520px;margin-bottom:40px;line-height:1.78;font-weight:400;
}
.hero-actions{display:flex;gap:14px;margin-bottom:64px;flex-wrap:wrap;}

/* ════════════════ BUTTONS ════════════════ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    border:none;cursor:pointer;font-family:inherit;font-size:14px;
    font-weight:700;border-radius:var(--radius-sm);
    transition:all var(--transition);position:relative;
    letter-spacing:0.8px;text-transform:uppercase;overflow:hidden;
}
.btn::before{
    content:'';position:absolute;inset:0;
    background:var(--gradient-shine);background-size:200% 100%;
    transform:translateX(-100%);transition:transform 0.5s ease;
}
.btn:hover::before{transform:translateX(100%);}
.btn-primary{
    background:var(--green-deep);color:#ffffff;padding:15px 36px;
    box-shadow:var(--shadow-btn);
}
.btn-primary .btn-surface{display:block;}
.btn-primary:hover{
    transform:translateY(-2px);background:var(--green-deep-2);
    box-shadow:0 12px 32px rgba(13,58,31,0.28),0 0 28px rgba(192,224,64,0.20);
}
.btn-secondary{
    background:transparent;color:var(--green-deep);padding:14px 34px;
    border:1.5px solid rgba(13,58,31,0.20);
}
.btn-secondary .btn-surface{display:block;}
.btn-secondary:hover{
    border-color:var(--green-deep);background:var(--lime-dim);transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}
.btn-lime{background:var(--lime);color:var(--green-deep);padding:14px 34px;}
.btn-lime:hover{background:var(--lime-2);transform:translateY(-2px);box-shadow:var(--shadow-glow);}

/* ════════════════ STATS ════════════════ */
.hero-stats{display:flex;gap:14px;flex-wrap:wrap;}
.stat-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius);padding:20px 24px;text-align:center;
    min-width:120px;transition:all var(--transition);
    position:relative;overflow:hidden;box-shadow:var(--shadow-card);
}
.stat-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--gradient-spark);
}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h);}
.stat-dial{display:flex;align-items:center;justify-content:center;margin-bottom:6px;gap:1px;}
.stat-number,.stat-plus{
    font-family:'Playfair Display',serif;font-weight:900;color:var(--green-deep);
}
.stat-number{font-size:36px;}
.stat-plus{font-size:22px;color:var(--green);}
.stat-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:1.8px;}

/* ════════════════ HERO CHARACTER ════════════════ */
.hero-notebook{position:relative;}
.notebook-page{display:none;}
.hero-character{
    position:relative;display:flex;align-items:center;justify-content:center;padding:0;
}
.hero-character svg{
    filter:drop-shadow(0 12px 32px rgba(13,58,31,0.12));
    width:100%;max-width:480px;height:auto;
}

/* Hero deco floating */
.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.deco-float{position:absolute;opacity:0.85;animation:float-drift 7s ease-in-out infinite;
    filter:drop-shadow(0 4px 12px rgba(13,58,31,0.08));}
.deco-f1{top:17%;left:4%;animation-duration:7s;}
.deco-f2{top:8%;right:6%;animation-duration:9s;animation-delay:-2s;}
.deco-f3{bottom:19%;left:3%;animation-duration:6.5s;animation-delay:-1.5s;}
.deco-f4{bottom:23%;right:4%;animation-duration:10s;animation-delay:-4s;}
.deco-f5{top:50%;right:14%;animation-duration:8s;animation-delay:-3.5s;}
@keyframes float-drift{
    0%,100%{transform:translateY(0) rotate(0deg);}
    33%{transform:translateY(-14px) rotate(2deg);}
    66%{transform:translateY(7px) rotate(-1.5deg);}
}
.deco-dots-grid{
    position:absolute;right:2%;bottom:8%;width:180px;height:150px;
    background-image:radial-gradient(circle,rgba(13,58,31,0.18) 1.5px,transparent 1.5px);
    background-size:18px 18px;opacity:0.5;
}

/* ════════════════ SECTIONS ════════════════ */
.section{padding:var(--section-padding);position:relative;}
.section-header{text-align:center;margin-bottom:72px;}
.section-tag{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 16px;background:var(--lime-dim);
    border:1px solid rgba(13,58,31,0.10);border-radius:100px;
    font-size:11px;font-weight:700;color:var(--green-deep);
    margin-bottom:20px;text-transform:uppercase;letter-spacing:2px;
}
.tag-dot{width:5px;height:5px;background:var(--green);border-radius:50%;}
.section-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(32px,4.2vw,56px);font-weight:900;
    margin-bottom:18px;letter-spacing:-1px;color:var(--text);
}
.section-desc{font-size:17px;color:var(--text-2);max-width:600px;margin:0 auto;line-height:1.85;}

/* Olive sprig divider */
.ornament-divider{
    display:flex;align-items:center;justify-content:center;gap:16px;
    padding:8px 32px;max-width:1200px;margin:0 auto;
}
.ornament-divider::before,.ornament-divider::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(13,58,31,0.20),transparent);
}
.ornament-svg{flex-shrink:0;}

/* ════════════════ ABOUT ════════════════ */
.about{background:var(--bg-alt);}
.about-grid{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start;}
.leather-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;
}
.leather-card::before{display:none;}
.card-stitching{
    padding:40px 32px;text-align:center;
    background:linear-gradient(180deg,rgba(192,224,64,0.10) 0%,transparent 50%);
    position:relative;
}
.about-avatar{position:relative;width:104px;height:104px;margin:0 auto 24px;}
.avatar-img{
    width:100%;height:100%;border-radius:50%;
    border:2px solid rgba(13,58,31,0.12);object-fit:contain;
    background:#ffffff;padding:8px;
    box-shadow:0 8px 24px rgba(13,58,31,0.08);
}
.avatar-ring{display:none;}
.about-card h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:900;margin-bottom:4px;color:var(--text);}
.about-role{color:var(--green-deep);font-size:11px;font-weight:800;margin-bottom:18px;text-transform:uppercase;letter-spacing:2.5px;}
.about-bio{font-size:14.5px;color:var(--text-2);line-height:1.78;margin-bottom:28px;}
.about-social{display:flex;justify-content:center;gap:10px;}
.social-btn{
    width:40px;height:40px;background:var(--card-2);border:1px solid var(--card-border);
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
    color:var(--text-2);transition:all var(--transition);
}
.social-btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:#ffffff;transform:translateY(-3px);box-shadow:var(--shadow-md);}
.about-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.metal-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);
    transition:all var(--transition);position:relative;overflow:hidden;
}
.metal-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--gradient-spark);opacity:0;transition:opacity var(--transition);
}
.metal-card::after{display:none;}
.metal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h);}
.metal-card:hover::before{opacity:1;}
.detail-icon{
    width:48px;height:48px;background:var(--lime-dim);border:1px solid rgba(13,58,31,0.10);
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
    color:var(--green-deep);margin-bottom:16px;
}
.about-details h4{font-family:'Playfair Display',serif;font-size:17px;font-weight:800;margin-bottom:8px;color:var(--text);}
.about-details p{font-size:13.5px;color:var(--text-2);line-height:1.72;}

/* ════════════════ DEDICATED PRODUCT SECTIONS ════════════════ */
.products-intro{padding:120px 0 60px;text-align:center;background:var(--bg);}
.product-section{
    padding:100px 0;position:relative;
}
.product-section:nth-child(even){background:var(--bg-alt);}
.product-section-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
    max-width:1200px;margin:0 auto;padding:0 32px;
}
.product-section.reverse .product-section-grid{grid-template-columns:1fr 1.05fr;}
.product-section.reverse .product-section-content{order:2;}
.product-section.reverse .product-section-visual{order:1;}

.product-section-content{}
.product-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
    color:var(--green);text-transform:uppercase;letter-spacing:2.5px;
    margin-bottom:18px;
}
.product-eyebrow-num{
    color:var(--lime);font-weight:800;font-size:13px;
    background:var(--green-deep);padding:3px 10px;border-radius:4px;
}
.product-section-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(42px,5vw,72px);font-weight:900;
    margin-bottom:14px;letter-spacing:-1.5px;color:var(--text);line-height:1.05;
}
.product-section-tagline{
    font-size:20px;color:var(--green-deep);font-weight:600;margin-bottom:24px;
    font-style:italic;font-family:'Playfair Display',serif;
}
.product-section-desc{
    font-size:16px;color:var(--text-2);line-height:1.85;margin-bottom:28px;max-width:540px;
}
.product-section-features{
    list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;
    margin-bottom:32px;max-width:480px;
}
.product-section-features li{
    font-size:14px;color:var(--text);font-weight:600;
    display:flex;align-items:center;gap:10px;
}
.product-section-features li::before{
    content:'';width:6px;height:6px;background:var(--lime);border-radius:50%;
    box-shadow:0 0 0 2px rgba(192,224,64,0.30);flex-shrink:0;
}
.product-section-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.product-section-store-links{display:flex;gap:8px;flex-wrap:wrap;margin-left:8px;}
.product-section-store-links .store-badge{
    display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
    border-radius:var(--radius-sm);background:var(--green-deep);color:#ffffff;
    font-size:12px;font-weight:600;transition:all var(--transition);
    border:1px solid var(--green-deep);
}
.product-section-store-links .store-badge:hover{
    background:var(--green);border-color:var(--green);transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

/* Product Visual / Mockup */
.product-section-visual{position:relative;}
.product-mockup{
    position:relative;background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-card);
    transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
    transform:perspective(1000px) rotateY(-4deg) rotateX(2deg);
}
.product-mockup:hover{transform:perspective(1000px) rotateY(0deg) rotateX(0deg);}
.product-mockup::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--gradient-spark);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.product-mockup-bar{
    display:flex;align-items:center;gap:6px;padding:8px 4px 12px;
}
.product-mockup-bar span{
    width:10px;height:10px;border-radius:50%;background:rgba(13,58,31,0.15);
}
.product-mockup-bar span:nth-child(1){background:#ff5f57;}
.product-mockup-bar span:nth-child(2){background:#febc2e;}
.product-mockup-bar span:nth-child(3){background:#28c840;}
.product-mockup-screen{
    border-radius:8px;overflow:hidden;background:#f4f4f4;
    aspect-ratio:16/10;position:relative;
}
.product-mockup-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;}

/* Brand mockup for products without screenshots */
.product-mockup-brand{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:14px;position:relative;overflow:hidden;
}
.product-mockup-brand::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(255,255,255,0.10) 1.5px,transparent 1.5px);
    background-size:24px 24px;
}
.product-mockup-brand-name{
    font-family:'Playfair Display',serif;font-size:60px;font-weight:900;
    color:#ffffff;letter-spacing:-1px;position:relative;z-index:1;
}
.product-mockup-brand-tag{
    color:rgba(255,255,255,0.85);font-size:12px;font-weight:700;
    letter-spacing:4px;text-transform:uppercase;position:relative;z-index:1;
}

/* Floating accent decoration on product visuals */
.product-section-visual::after{
    content:'';position:absolute;top:-20px;right:-20px;width:120px;height:120px;
    background-image:radial-gradient(circle,rgba(192,224,64,0.45) 1.5px,transparent 1.5px);
    background-size:14px 14px;opacity:0.6;z-index:-1;
}
.product-section.reverse .product-section-visual::after{right:auto;left:-20px;}

/* ════════════════ ECOSYSTEM STRIP ════════════════ */
.ecosystem-strip{background:var(--bg);padding:64px 0;}
.ecosystem-header{display:flex;align-items:center;gap:20px;margin-bottom:36px;flex-wrap:wrap;}
.ecosystem-subtitle{font-size:15px;font-weight:400;color:var(--text-2);font-style:italic;letter-spacing:0.3px;}
.ecosystem-svg-wrapper{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-lg);padding:28px 20px;overflow-x:auto;
    box-shadow:var(--shadow-card);
}
.ecosystem-svg{min-width:600px;display:block;}

/* ════════════════ SERVICES ════════════════ */
.services{background:var(--bg-alt);}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wooden-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-card);
    transition:all var(--transition);position:relative;overflow:hidden;
}
.wooden-card::before{display:none;}
.wooden-card::after{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    border-radius:var(--radius) var(--radius) 0 0;
    background:var(--gradient-spark);opacity:0.6;
}
.wooden-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h);}
.service-icon-wrap{margin-bottom:18px;}
.service-icon{
    width:54px;height:54px;background:var(--lime-dim);border:1px solid rgba(13,58,31,0.10);
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--green-deep);
}
.service-card h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:800;margin-bottom:10px;color:var(--text);}
.service-card p{font-size:13.5px;color:var(--text-2);line-height:1.78;}

/* ════════════════ INNOVATION ════════════════ */
.innovation{background:var(--bg);}
.innovation-timeline{position:relative;max-width:800px;margin:0 auto;}
.timeline-line{
    position:absolute;left:28px;top:0;bottom:0;width:2px;
    background:linear-gradient(180deg,transparent 0%,rgba(13,58,31,0.18) 20%,rgba(13,58,31,0.18) 80%,transparent 100%);
}
.timeline-item{display:flex;gap:32px;margin-bottom:28px;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-node{flex-shrink:0;width:56px;display:flex;justify-content:center;padding-top:24px;}
.node-ring{
    width:20px;height:20px;border:2px solid var(--green);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#ffffff;box-shadow:0 0 0 4px rgba(34,197,94,0.10),0 4px 14px rgba(34,197,94,0.18);
}
.node-dot{width:6px;height:6px;background:var(--green-deep);border-radius:50%;}
.glass-card{
    flex:1;background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);
    transition:all var(--transition);
}
.glass-card::before{display:none;}
.glass-card:hover{transform:translateX(6px);box-shadow:var(--shadow-card-h);}
.timeline-year{
    font-size:11px;font-weight:800;color:var(--green-deep);
    text-transform:uppercase;letter-spacing:2.5px;margin-bottom:8px;display:inline-block;
    background:var(--lime-dim);padding:3px 10px;border-radius:4px;
}
.timeline-card h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:800;margin-bottom:10px;color:var(--text);}
.timeline-card p{font-size:14px;color:var(--text-2);line-height:1.78;}

/* ════════════════ ACHIEVEMENTS ════════════════ */
.achievements{background:var(--bg-alt);}
.achievements-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.trophy-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-lg);padding:36px 28px;
    text-align:center;box-shadow:var(--shadow-card);transition:all var(--transition);
    position:relative;overflow:hidden;
}
.trophy-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--gradient-spark);
}
.trophy-card::after{display:none;}
.trophy-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-h);}
.trophy-icon{
    width:72px;height:72px;background:var(--lime-dim);border:2px solid rgba(13,58,31,0.10);
    border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;color:var(--green-deep);box-shadow:var(--shadow-md);
}
.trophy-icon::before{display:none;}
.trophy-card h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:800;margin-bottom:12px;color:var(--text);}
.trophy-card p{font-size:14px;color:var(--text-2);line-height:1.75;margin-bottom:20px;}
.achievement-badge{
    display:inline-block;padding:5px 14px;background:var(--green-deep);
    border:1px solid var(--green-deep);border-radius:100px;
    font-size:10px;font-weight:800;color:#ffffff;text-transform:uppercase;letter-spacing:1.5px;
}

/* ════════════════ TECH STACK ════════════════ */
.techstack{background:var(--bg);}
.tech-belt{overflow:hidden;padding:20px 0;position:relative;}
.tech-belt::before,.tech-belt::after{
    content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.tech-belt::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.tech-belt::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent);}
.tech-belt-inner{display:flex;gap:12px;animation:scroll-belt 32s linear infinite;width:max-content;}
@keyframes scroll-belt{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.tech-chip{
    padding:11px 22px;background:var(--card);border:1px solid var(--card-border);
    border-radius:100px;font-size:13px;font-weight:600;color:var(--text);
    white-space:nowrap;transition:all var(--transition);letter-spacing:0.3px;
    box-shadow:var(--shadow-sm);
}
.tech-chip:hover{background:var(--green-deep);border-color:var(--green-deep);color:#ffffff;transform:translateY(-3px);box-shadow:var(--shadow-md);}

/* ════════════════ CONTACT ════════════════ */
.contact{background:var(--bg-alt);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.envelope-card{
    background:var(--green-deep);
    border:1px solid var(--green-deep);border-radius:var(--radius-lg);
    overflow:hidden;box-shadow:0 16px 48px rgba(13,58,31,0.18);color:#ffffff;
}
.envelope-flap{
    height:52px;background:linear-gradient(135deg,#062812,#0d3a1f);
    clip-path:polygon(0 0,50% 100%,100% 0);
}
.envelope-flap::before{display:none;}
.envelope-body{padding:32px;}
.contact-method{
    display:flex;align-items:flex-start;gap:16px;
    padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.10);color:#ffffff;
}
.contact-method:last-child{border-bottom:none;}
.contact-method svg{color:var(--lime);flex-shrink:0;margin-top:2px;}
.contact-method h4{font-size:10px;font-weight:800;color:var(--lime);margin-bottom:4px;text-transform:uppercase;letter-spacing:2px;}
.contact-method a,.contact-method p{font-size:14px;color:rgba(255,255,255,0.85);line-height:1.6;}
.contact-method a:hover{color:var(--lime);}
.contact-links-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-card);
}
.contact-links-card h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:900;margin-bottom:20px;color:var(--text);}
.quick-links{display:flex;flex-direction:column;gap:8px;}
.quick-link-btn{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;background:var(--bg-alt);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    font-size:14px;font-weight:600;color:var(--text);transition:all var(--transition);
}
.quick-link-btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:#ffffff;transform:translateX(5px);}
.quick-link-btn svg{color:var(--text-3);transition:color var(--transition);}
.quick-link-btn:hover svg{color:var(--lime);}

/* ════════════════ FOOTER ════════════════ */
.footer{padding:40px 0;border-top:1px solid var(--card-border);background:#070b08;color:rgba(255,255,255,0.85);}
.footer-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:20px;
}
.footer-brand{display:flex;align-items:center;gap:16px;}
.footer-brand img{border-radius:8px;background:rgba(255,255,255,0.05);padding:4px;}
.footer-brand strong{font-family:'Playfair Display',serif;font-size:16px;display:block;margin-bottom:2px;color:#ffffff;}
.footer-brand p{font-size:13px;color:rgba(255,255,255,0.45);max-width:300px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
    width:38px;height:38px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,0.65);transition:all var(--transition);
}
.footer-social a:hover{background:var(--lime);color:var(--green-deep);border-color:var(--lime);transform:translateY(-3px);}
.footer-links{display:flex;gap:24px;justify-content:center;padding:16px 0;flex-wrap:wrap;}
.footer-links a{color:var(--lime)!important;font-weight:600;font-size:13px;opacity:0.85;transition:opacity var(--transition);letter-spacing:0.3px;}
.footer-links a:hover{opacity:1;}
.footer-bottom p{text-align:center;font-size:13px;color:rgba(255,255,255,0.35);}

/* ════════════════ ANIMATIONS ════════════════ */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1),transform 0.7s cubic-bezier(0.4,0,0.2,1);}
.fade-in.visible{opacity:1;transform:translateY(0);}
.about::after{
    content:'';display:block;position:absolute;bottom:24px;right:24px;
    width:100px;height:80px;
    background-image:radial-gradient(circle,rgba(13,58,31,0.18) 1.5px,transparent 1.5px);
    background-size:12px 12px;opacity:0.45;pointer-events:none;
}

/* ════════════════ RESPONSIVE ════════════════ */
@media(max-width:1024px){
    .desk-surface{grid-template-columns:1fr;gap:40px;}
    .hero-notebook,.hero-character{display:none;}
    .about-grid{grid-template-columns:1fr;}
    .product-section-grid{grid-template-columns:1fr;gap:48px;}
    .product-section.reverse .product-section-grid{grid-template-columns:1fr;}
    .product-section.reverse .product-section-content,.product-section.reverse .product-section-visual{order:0;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .achievements-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
    :root{--section-padding:80px 0;}
    .container{padding:0 20px;}
    .nav-inner{padding:0 20px;}
    .nav-links{
        display:none;position:fixed;top:80px;left:0;right:0;
        background:rgba(255,255,255,0.97);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
        flex-direction:column;padding:24px 20px;
        border-bottom:1px solid var(--card-border);box-shadow:0 16px 48px rgba(13,58,31,0.10);
    }
    .nav-links.open{display:flex;}
    .nav-toggle{display:flex;}
    .nav-toggle.active span:nth-child(1){transform:rotate(45deg) translateY(7px);}
    .nav-toggle.active span:nth-child(2){opacity:0;}
    .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translateY(-7px);}
    .hero-title{font-size:36px;letter-spacing:-1px;}
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-stats{flex-direction:row;flex-wrap:wrap;justify-content:center;}
    .about-details{grid-template-columns:1fr;}
    .product-section-features{grid-template-columns:1fr;}
    .product-section-title{font-size:36px;}
    .services-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-inner{flex-direction:column;gap:20px;text-align:center;}
    .section-title{font-size:28px;}
    .timeline-item{flex-direction:column;gap:16px;}
    .timeline-line{display:none;}
    .timeline-node{width:auto;padding-top:0;}
    .deco-float,.hero-deco{display:none;}
    .ecosystem-header{flex-direction:column;align-items:flex-start;gap:10px;}
    .achievements-grid{grid-template-columns:1fr;}
    .desk-surface{min-height:auto;padding-top:20px;padding-bottom:40px;}
    .product-section-visual::after{display:none;}
}
@media(max-width:480px){
    .logo-text{font-size:15px;}
    .hero-title{font-size:30px;}
    .hero-stats{justify-content:center;}
    .stat-card{min-width:100px;}
    .product-section-title{font-size:30px;}
}

/* Scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg-alt);}
::-webkit-scrollbar-thumb{background:rgba(13,58,31,0.25);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(13,58,31,0.45);}

/* ═══════════════════════════════════════
   NATURE LAYER — Trees, Plants, Wind, Rain
═══════════════════════════════════════ */

/* === Hero Trees === */
.tree {
    position:absolute;
    pointer-events:none;
    z-index:1;
    filter:drop-shadow(0 12px 32px rgba(13,58,31,0.18));
    transform-style:preserve-3d;
    perspective:1200px;
}
.tree-left  { left:-40px;  bottom:-20px; width:280px; height:520px; }
.tree-right { right:-40px; bottom:-20px; width:280px; height:520px; transform:scaleX(-1); }
.tree-svg{width:100%;height:100%;}

/* Wind sway — different speeds per layer for 3D depth */
.foliage-back  { transform-origin:50% 95%; animation:wind-sway 6.5s ease-in-out infinite;     will-change:transform; }
.foliage-mid   { transform-origin:50% 95%; animation:wind-sway 5s   ease-in-out infinite;     animation-delay:-1.5s; will-change:transform; }
.foliage-front { transform-origin:50% 95%; animation:wind-sway 4s   ease-in-out infinite;     animation-delay:-2.5s; will-change:transform; }
.foliage-tip   { transform-origin:50% 95%; animation:wind-sway 3.2s ease-in-out infinite;     animation-delay:-1s;   will-change:transform; }
.tree-trunk    { transform-origin:50% 100%; animation:trunk-sway 7s ease-in-out infinite;     will-change:transform; }

@keyframes wind-sway{
    0%,100% { transform:rotate(-1.6deg) translateX(0); }
    25%     { transform:rotate(2.2deg)  translateX(3px); }
    50%     { transform:rotate(-0.5deg) translateX(-2px); }
    75%     { transform:rotate(1.5deg)  translateX(2px); }
}
@keyframes trunk-sway{
    0%,100% { transform:rotate(-0.5deg); }
    50%     { transform:rotate(0.6deg); }
}

/* Individual leaves flutter */
.leaf-flutter{
    transform-origin:center;
    animation:leaf-flutter 2.5s ease-in-out infinite;
    will-change:transform;
}
.leaf-flutter:nth-child(2n)  { animation-duration:3s; animation-delay:-0.8s; }
.leaf-flutter:nth-child(3n)  { animation-duration:2s; animation-delay:-1.2s; }
.leaf-flutter:nth-child(4n)  { animation-duration:3.5s; animation-delay:-2s; }
@keyframes leaf-flutter{
    0%,100% { transform:rotate(0deg) scale(1); }
    50%     { transform:rotate(18deg) scale(1.04); }
}

/* === Potted Plants === */
.plant {
    position:absolute;
    pointer-events:none;
    z-index:1;
    filter:drop-shadow(0 8px 18px rgba(13,58,31,0.15));
}
.plant-svg{width:100%;height:100%;}
.plant-leaves{transform-origin:50% 100%;animation:wind-sway 5s ease-in-out infinite;will-change:transform;}
.plant-leaf-1{transform-origin:50% 100%;animation:plant-leaf-sway 4s ease-in-out infinite;will-change:transform;}
.plant-leaf-2{transform-origin:50% 100%;animation:plant-leaf-sway 5s ease-in-out infinite;animation-delay:-1.5s;will-change:transform;}
.plant-leaf-3{transform-origin:50% 100%;animation:plant-leaf-sway 4.5s ease-in-out infinite;animation-delay:-2.5s;will-change:transform;}
@keyframes plant-leaf-sway{
    0%,100%{transform:rotate(-3deg);}
    50%    {transform:rotate(3deg);}
}

/* === Falling Leaves === */
.leaf-fall{
    position:fixed;width:18px;height:10px;
    background:linear-gradient(135deg,#22c55e,#0d3a1f);
    clip-path:ellipse(50% 45% at 50% 50%);
    border-radius:50% 0 50% 0;
    pointer-events:none;
    animation:leaf-fall 14s linear infinite;
    will-change:transform,opacity;
    z-index:1;
    box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2);
}
.leaf-fall::before{
    content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
    background:rgba(13,58,31,0.5);
}
@keyframes leaf-fall{
    0%   { transform:translate(0,-50px) rotate(0deg);   opacity:0; }
    10%  { opacity:0.8; }
    50%  { transform:translate(80px,50vh) rotate(180deg); }
    90%  { opacity:0.6; }
    100% { transform:translate(-40px,110vh) rotate(360deg); opacity:0; }
}

/* === Rain Overlay === */
.rain-layer{
    position:fixed;inset:0;pointer-events:none;z-index:2;
    overflow:hidden;
    opacity:0;
    transition:opacity 1.2s ease;
}
.rain-layer.active{opacity:1;}
.raindrop{
    position:absolute;width:1px;
    background:linear-gradient(180deg,transparent 0%,rgba(34,197,94,0.45) 80%,rgba(192,224,64,0.65) 100%);
    border-radius:0 0 1px 1px;
    will-change:transform,opacity;
}
@keyframes raindrop-fall{
    0%   { transform:translateY(-50px); opacity:0; }
    8%   { opacity:0.6; }
    92%  { opacity:0.6; }
    100% { transform:translateY(110vh); opacity:0; }
}

/* Rain ripple on ground */
.rain-ripple{
    position:absolute;bottom:0;width:14px;height:3px;
    border:1px solid rgba(34,197,94,0.4);
    border-radius:50%;
    animation:ripple 1.4s ease-out infinite;
    will-change:transform,opacity;
}
@keyframes ripple{
    0%   { transform:scale(0);   opacity:0.7; }
    100% { transform:scale(2.5); opacity:0; }
}

/* === Grass tufts at section bottoms === */
.grass-row{
    position:absolute;left:0;right:0;bottom:0;height:30px;
    pointer-events:none;
    opacity:0.6;
}
.grass-blade{
    position:absolute;bottom:0;width:2px;height:18px;
    background:linear-gradient(180deg,#22c55e 0%,#0d3a1f 100%);
    border-radius:1px 1px 0 0;
    transform-origin:50% 100%;
    animation:wind-sway 4s ease-in-out infinite;
    will-change:transform;
}

/* Rain toggle button */
.rain-toggle{
    position:fixed;bottom:24px;right:24px;z-index:1500;
    width:48px;height:48px;border-radius:50%;
    background:#ffffff;border:1px solid var(--card-border);
    box-shadow:var(--shadow-md);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--green-deep);
    transition:all var(--transition);
    font-size:20px;
}
.rain-toggle:hover{background:var(--green-deep);color:#ffffff;transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.rain-toggle.active{background:var(--lime);color:var(--green-deep);}

/* Reduce motion preference */
@media (prefers-reduced-motion:reduce){
    .tree-trunk,.foliage-back,.foliage-mid,.foliage-front,.foliage-tip,
    .leaf-flutter,.plant-leaves,.plant-leaf-1,.plant-leaf-2,.plant-leaf-3,
    .leaf-fall,.raindrop,.rain-ripple,.grass-blade{
        animation:none!important;
    }
}

/* Hide trees on small screens */
@media(max-width:1024px){
    .tree-left,.tree-right{display:none;}
    .plant{display:none;}
}