@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

:root {
    --primary: #00f260;
    --secondary: #0575e6;
    --dark: #050505;
    --dark-card: #121212;
    --leaf: #6ee7b7;
    --sun: #fcd34d;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--dark);
    color: white;
    font-family: 'Outfit', sans-serif;
    cursor: none;
}

.font-hindi {
    font-family: 'Tiro Devanagari Hindi', serif;
}

/* Custom Cursor */
#custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease;
    mix-blend-mode: difference;
}

#custom-cursor.clicked {
    transform: scale(0.8);
}

/* Cursor Trail */
.cursor-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    pointer-events: none;
    z-index: 9998;
    opacity: 0.6;
    animation: cursorFade 0.8s ease-out forwards;
}

@keyframes cursorFade {
    to {
        opacity: 0;
        transform: scale(2);
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
    border-radius: 4px;
}

/* Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.page-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.35);
}

.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Float Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* GSAP Helper Classes */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
}

.feature-card {
    opacity: 0;
    transform: translateY(50px);
}

/* SVG Icon Animations */
.svg-icon path,
.svg-icon polyline,
.svg-icon line,
.svg-icon rect,
.svg-icon circle {
    fill-opacity: 0;
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: all 1s ease;
}

.svg-icon.active path,
.svg-icon.active polyline,
.svg-icon.active line,
.svg-icon.active rect,
.svg-icon.active circle {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition: stroke-dashoffset 2s ease, fill-opacity 1s ease 1.5s, fill 1s ease 1.5s, filter 1s ease;
    filter: drop-shadow(0 0 12px rgba(0, 242, 96, 0.35));
    animation: svgPulse 5s ease-in-out infinite;
}

@keyframes svgPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* Icon Colors */
.svg-icon.blue-icon path,
.svg-icon.blue-icon polyline,
.svg-icon.blue-icon line,
.svg-icon.blue-icon rect,
.svg-icon.blue-icon circle {
    stroke: #3b82f6;
}

.svg-icon.blue-icon.active path,
.svg-icon.blue-icon.active polyline,
.svg-icon.blue-icon.active line,
.svg-icon.blue-icon.active rect,
.svg-icon.blue-icon.active circle {
    fill: #3b82f6;
}

.svg-icon.green-icon path,
.svg-icon.green-icon polyline,
.svg-icon.green-icon line,
.svg-icon.green-icon rect,
.svg-icon.green-icon circle {
    stroke: #22c55e;
}

.svg-icon.green-icon.active path,
.svg-icon.green-icon.active polyline,
.svg-icon.green-icon.active line,
.svg-icon.green-icon.active rect,
.svg-icon.green-icon.active circle {
    fill: #22c55e;
}

.svg-icon.yellow-icon path,
.svg-icon.yellow-icon polyline,
.svg-icon.yellow-icon line,
.svg-icon.yellow-icon rect,
.svg-icon.yellow-icon circle {
    stroke: #eab308;
}

.svg-icon.yellow-icon.active path,
.svg-icon.yellow-icon.active polyline,
.svg-icon.yellow-icon.active line,
.svg-icon.yellow-icon.active rect,
.svg-icon.yellow-icon.active circle {
    fill: #eab308;
}

.svg-icon.cyan-icon path,
.svg-icon.cyan-icon polyline,
.svg-icon.cyan-icon line,
.svg-icon.cyan-icon rect,
.svg-icon.cyan-icon circle {
    stroke: #06b6d4;
}

.svg-icon.cyan-icon.active path,
.svg-icon.cyan-icon.active polyline,
.svg-icon.cyan-icon.active line,
.svg-icon.cyan-icon.active rect,
.svg-icon.cyan-icon.active circle {
    fill: #06b6d4;
}

.svg-icon.purple-icon path,
.svg-icon.purple-icon polyline,
.svg-icon.purple-icon line,
.svg-icon.purple-icon rect,
.svg-icon.purple-icon circle {
    stroke: #a855f7;
}

.svg-icon.purple-icon.active path,
.svg-icon.purple-icon.active polyline,
.svg-icon.purple-icon.active line,
.svg-icon.purple-icon.active rect,
.svg-icon.purple-icon.active circle {
    fill: #a855f7;
}

.svg-icon.pink-icon path,
.svg-icon.pink-icon polyline,
.svg-icon.pink-icon line,
.svg-icon.pink-icon rect,
.svg-icon.pink-icon circle {
    stroke: #ec4899;
}

.svg-icon.pink-icon.active path,
.svg-icon.pink-icon.active polyline,
.svg-icon.pink-icon.active line,
.svg-icon.pink-icon.active rect,
.svg-icon.pink-icon.active circle {
    fill: #ec4899;
}

.svg-icon.orange-icon path,
.svg-icon.orange-icon polyline,
.svg-icon.orange-icon line,
.svg-icon.orange-icon rect,
.svg-icon.orange-icon circle {
    stroke: #f97316;
}

.svg-icon.orange-icon.active path,
.svg-icon.orange-icon.active polyline,
.svg-icon.orange-icon.active line,
.svg-icon.orange-icon.active rect,
.svg-icon.orange-icon.active circle {
    fill: #f97316;
}

/* Agriculture SVG Animations */
.tractor-body,
.tractor-cabin {
    fill: var(--primary);
    stroke: var(--primary);
}

.tractor-wheel {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
}

.wheel-inner {
    fill: var(--primary);
}

.tractor-anim {
    animation: tractorMove 8s ease-in-out infinite;
}

@keyframes tractorMove {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(30px);
    }
}

/* Growing Plants */
.plant-stem {
    fill: none;
    stroke: #22c55e;
    stroke-width: 2;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: growPlant 3s ease-out forwards;
}

.plant-1 {
    animation-delay: 0.5s;
}

.plant-2 {
    animation-delay: 1s;
}

.plant-3 {
    animation-delay: 1.5s;
}

@keyframes growPlant {
    to {
        stroke-dashoffset: 0;
    }
}

.plant-leaf {
    fill: #22c55e;
    opacity: 0;
    animation: leafAppear 1s ease-out forwards;
}

@keyframes leafAppear {
    to {
        opacity: 1;
    }
}

/* Animated Gradient Text */
.gradient-stop-1 {
    stop-color: var(--primary);
    animation: gradientShift1 4s ease-in-out infinite;
}

.gradient-stop-2 {
    stop-color: var(--secondary);
    animation: gradientShift2 4s ease-in-out infinite;
}

.gradient-stop-3 {
    stop-color: var(--primary);
    animation: gradientShift3 4s ease-in-out infinite;
}

@keyframes gradientShift1 {

    0%,
    100% {
        stop-color: #00f260;
    }

    50% {
        stop-color: #0575e6;
    }
}

@keyframes gradientShift2 {

    0%,
    100% {
        stop-color: #0575e6;
    }

    50% {
        stop-color: #00f260;
    }
}

@keyframes gradientShift3 {

    0%,
    100% {
        stop-color: #00f260;
    }

    50% {
        stop-color: #a855f7;
    }
}

/* FAQ */
.faq-content {
    transition: height 0.3s ease-in-out;
}

.faq-item button[aria-expanded="true"] i {
    transform: rotate(45deg);
}

.bakbak {

    padding: 16px;
    border-radius: 46px;
}

/* Logo line drawing */
.logo-svg path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: logoDraw 8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 8px rgba(0, 242, 96, 0.25));
}

@keyframes logoDraw {

    0%,
    20% {
        stroke-dashoffset: 220;
    }

    60% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -80;
        filter: drop-shadow(0 0 14px rgba(5, 117, 230, 0.35));
    }
}

/* Field line background */
.field-line {
    fill: none;
    stroke: rgba(0, 242, 96, 0.35);
    stroke-width: 2;
    stroke-dasharray: 12 10;
}

.field-line.accent {
    stroke: rgba(5, 117, 230, 0.35);
}

@keyframes lineFlow {
    to {
        stroke-dashoffset: -240;
    }
}

.sun-orb {
    filter: blur(30px);
    animation: orbPulse 6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes orbPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.floating-leaf {
    position: absolute;
    width: 12px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 999px 999px 999px 0;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    animation: leafDrift 10s ease-in-out infinite;
}

.floating-chip {
    position: absolute;
    top: 15%;
    left: -30px;
    padding: 10px 14px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    animation: float 7s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
}

.floating-chip .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.hero-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.96) rotateX(6deg);
    transition: opacity 1s ease, transform 1s ease, filter 1s ease;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}

.hero-screen.active {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
    filter: drop-shadow(0 0 18px rgba(0, 242, 96, 0.2));
    z-index: 2;
}

.hero-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
}

.hero-phone {
    perspective: 1200px;
    position: relative;
}

.hero-image {
    position: relative;
    overflow: visible;
}

.phone-frame {
    position: relative;
    overflow: hidden;
}

.phone-frame::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    box-shadow: inset 0 0 25px rgba(0, 242, 96, 0.08), inset 0 0 35px rgba(5, 117, 230, 0.08);
}

.phone-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
    animation: sheen 5s ease-in-out infinite;
    pointer-events: none;
    border-radius: 24px;
}

.phone-ring {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, rgba(0, 242, 96, 0.12), rgba(5, 117, 230, 0.12), rgba(0, 242, 96, 0.12));
    filter: blur(80px);
    opacity: 0.8;
    z-index: 3;
    animation: borderSpin 12s linear infinite;
}

.flow-grid {
    position: absolute;
    inset: -60px;
    background-image:
        linear-gradient(120deg, rgba(0, 242, 96, 0.25) 2px, transparent 2px),
        linear-gradient(300deg, rgba(5, 117, 230, 0.25) 2px, transparent 2px);
    background-size: 70px 70px, 110px 110px;
    filter: blur(0.1px);
    opacity: 0.5;
    animation: flowLines 12s linear infinite;
    pointer-events: none;
    z-index: 5;
}

.irrigation-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    opacity: 0.8;
    filter: blur(0.1px);
}

.irrigation-path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 16;
    animation: pathFlow 9s linear infinite;
}

.irrigation-path.alt {
    stroke-dasharray: 6 12;
    animation-duration: 7s;
}

.irrigation-path.slow {
    animation-duration: 12s;
}

@keyframes pathFlow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -200;
    }
}

.flow-dot {
    opacity: 0.9;
    animation: dotHue 6s linear infinite;
}

@keyframes dotHue {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}

.flow-stack {
    position: absolute;
    top: -140px;
    left: -360px;
    width: 620px;
    height: 980px;
    pointer-events: none;
    overflow: visible;
    z-index: 6;
    transform-origin: top left;
}

.plant-grow {
    position: absolute;
    bottom: 18%;
    left: 11%;
    width: 110px;
    height: 150px;
    z-index: 7;
    pointer-events: none;
}

.plant-grow svg {
    width: 100%;
    height: 100%;
}

.plant-sway {
    animation: plantSway 5s ease-in-out infinite;
    transform-origin: 50% 100%;
}

.plant-stem {
    fill: none;
    stroke: #00f260;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: stemGrow 3s ease-out forwards;
}

.plant-leaf {
    fill: #00f260;
    opacity: 0;
    animation: leafPop 1.5s ease-out forwards;
}

.leaf-1 {
    animation-delay: 1s;
}

.leaf-2 {
    animation-delay: 1.4s;
}

.plant-flower {
    opacity: 0;
    animation: flowerPulse 2.5s ease-in-out forwards infinite;
    transform-origin: center;
}

.raindrop {
    opacity: 0.8;
    animation: dropFall 2.2s linear infinite;
}

@keyframes stemGrow {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes leafPop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.irrigation-right {
    inset: 0;
    width: 100%;
    height: 100%;
}

@keyframes flowerPulse {
    0% {
        opacity: 0;
        transform: scale(0.6);
        filter: hue-rotate(0deg);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
        filter: hue-rotate(120deg);
    }
}

@keyframes flowLines {
    0% {
        background-position: 0 0, 0 0;
    }

    50% {
        background-position: 40px 20px, -60px 30px;
    }

    100% {
        background-position: 80px 80px, -120px 120px;
    }
}

@keyframes sheen {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes leafDrift {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(6deg);
    }
}

@media (max-width: 1024px) {
    .flow-stack {
        left: -260px;
        top: -120px;
        width: 520px;
        height: 760px;
        transform: scale(0.82);
    }

    .plant-grow {
        left: 95px;
        bottom: 32px;
        width: 96px;
        height: 135px;
    }
}

@media (max-width: 640px) {
    .flow-stack {
        left: -150px;
        top: -90px;
        width: 400px;
        height: 580px;
        transform: scale(0.72);
    }

    .plant-grow {
        left: 78px;
        bottom: 22px;
        width: 88px;
        height: 124px;
    }
}

.download-pill {
    background: linear-gradient(90deg, rgba(0, 242, 96, 0.25), rgba(5, 117, 230, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.gradient-btn {
    background: linear-gradient(120deg, #ffffff, #d5ffe7);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.gradient-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 90deg, rgba(0, 242, 96, 0.6), rgba(5, 117, 230, 0.6), rgba(0, 242, 96, 0.6));
    filter: blur(16px) hue-rotate(0deg);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    animation: hueSpin 6s linear infinite;
}

.gradient-btn:hover::after {
    opacity: 1;
}

.gradient-btn > * {
    position: relative;
    z-index: 1;
}

.gradient-btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #00f260, #0575e6, #00f260);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderSpin 4s linear infinite, hueSpin 8s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes borderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hueSpin {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}

.blog-content p,
.blog-content li {
    color: #e5e7eb;
    line-height: 1.7;
}

.blog-content img,
.blog-content video,
.blog-content iframe {
    width: 100%;
    border-radius: 16px;
}
:root {
    --bg-card: rgba(241, 238, 238, 0.17);
}

.bg-dark-card {
    --tw-bg-opacity: 1;
background-color: #525352;
}