/* ── Reset & Tokens ─────────────────────────────────── */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --green: #5cb85c;
     --green-d: #3d8b3d;
     --gold: #f0a800;
     --gold-d: #c88200;
     --dark: #0d0d0d;
     --dark2: #141414;
     --dark3: #1c1c1c;
     --light: #f4f4f4;
     --muted: #888;
     --white: #ffffff;
     --radius: 1rem;
     --shadow: 0 8px 40px rgba(0, 0, 0, .55);
 }

 /* ── Light mode overrides --- Elements --- ────────────────────────────── */
 [data-mode="light"] {
     --dark: #f3fdf6eb;
     --dark2: #e3eae4ef;
     --dark3: #c2c5c2f4;
     --white: #111;
     --muted: #555;
     --shadow: 0 8px 40px rgb(0 0 0 / 15%);
 }

 /* Light mode base styles */

 [data-mode="light"] body {
     background: var(--dark);
     color: var(--light);
 }

 /* Scrollbar in light mode */

 [data-mode="light"] ::-webkit-scrollbar-track {
     background: var(--dark2);
 }

 /* Nav always visible in light mode */

 [data-mode="light"] nav {
     background: rgb(242 242 242 / 95%);
     backdrop-filter: blur(12px);
     box-shadow: 0 2px 20px rgb(0 0 0 / 10%);
 }

 [data-mode="light"] nav.scrolled {
     background: rgb(230 230 230 / 98%);
 }

 [data-mode="light"] .nav-links a {
     color: rgb(0 0 0 / 65%);
 }

 [data-mode="light"] .nav-links a:hover {
     color: var(--green);
 }

 /* Hero light mode */

 [data-mode="light"] .hero-bg {
     background:
         radial-gradient(ellipse 80% 60% at 60% 40%, rgb(92 184 92 / 10%) 0%, transparent 70%),
         radial-gradient(ellipse 60% 50% at 20% 80%, rgb(240 168 0 / 6%) 0%, transparent 60%),
         linear-gradient(160deg, #f2f2f2 0%, #e8f4e8 60%, #f0faf0 100%);
 }

 [data-mode="light"] .hero-grid {
     background-image:
         linear-gradient(rgb(92 184 92 / 6%) 1px, transparent 1px),
         linear-gradient(90deg, rgb(92 184 92 / 6%) 1px, transparent 1px);
 }

 [data-mode="light"] .hero-headline {
     color: var(--green-d);
 }

 [data-mode="light"] .hero-sub {
     color: rgb(0 0 0 / 60%);
 }

 [data-mode="light"] .hero-sub,

 [data-mode="light"] .hero-stats .stat {
     border-color: var(--green);
 }

 [data-mode="light"] .stat-num {
     color: var(--green);
 }

 [data-mode="light"] .stat-label {
     color: var(--muted);
 }

 [data-mode="light"] .btn-secondary {
     border-color: rgb(0 0 0 / 25%);
     color: rgb(0 0 0 / 75%);
 }

 [data-mode="light"] .btn-secondary:hover {
     border-color: var(--green);
     color: var(--green);
 }

 [data-mode="light"] .hero-badge {
     background: rgb(92 184 92 / 10%);
     border-color: rgb(92 184 92 / 30%);
 }

 /* About section */

 [data-mode="light"] #about {
     background: var(--dark);
 }

 [data-mode="light"] .section-title {
     color: var(--white);
 }

 [data-mode="light"] .section-sub {
     color: var(--muted);
 }

 [data-mode="light"] .about-tag {
     background: rgb(240 168 0 / 10%);
     border-color: rgb(240 168 0 / 30%);
 }

 [data-mode="light"] .about-text p,

 [data-mode="light"] .about-text h2 {
     color: var(--white);
 }

 /* Features & Pricing */

 [data-mode="light"] .feature-card,
 [data-mode="light"] .pricing-card {
     background: var(--dark2);
     border-color: rgb(0 0 0 / 8%);
 }

 [data-mode="light"] .feature-card p,
 [data-mode="light"] .feature-card h3 {
     color: var(--white);
 }

 [data-mode="light"] #pricing {
     background: var(--dark2);
 }

 [data-mode="light"] .pricing-card.featured {
     background: #d6ebd6;
 }

 [data-mode="light"] .plan-name {
     color: var(--green);
 }

 [data-mode="light"] .plan-price {
     color: var(--white);
 }

 [data-mode="light"] .plan-desc {
     color: var(--muted);
 }

 [data-mode="light"] .plan-features li {
     color: var(--white);
     border-color: rgb(0 0 0 / 8%);
 }

 [data-mode="light"] .contact-info h2 {
     color: var(--white);
 }

 [data-mode="light"] .contact-perk {
     color: rgb(0 0 0 / 70%);
 }

 /* Testimonials */

 [data-mode="light"] #testimonials {
     background: var(--dark2);
     border-color: rgb(0 0 0 / 6%);
 }

 [data-mode="light"] .testimonial-card {
     background: var(--dark3);
     border-color: rgb(0 0 0 / 8%);
 }

 [data-mode="light"] .testimonial-text {
     color: rgb(0 0 0 / 65%);
 }

 [data-mode="light"] .author-name {
     color: var(--white);
 }

 [data-mode="light"] .author-role {
     color: var(--muted);
 }

 /* Contact Section */

 [data-mode="light"] .contact-info p {
     color: rgb(0 0 0 / 60%);
 }

 [data-mode="light"] .contact-form {
     background: var(--dark2);
     border-color: rgb(0 0 0 / 8%);
 }

 [data-mode="light"] .form-group input,
 [data-mode="light"] .form-group textarea,
 [data-mode="light"] .form-group select {
     background: rgb(0 0 0 / 4%);
     border-color: rgb(0 0 0 / 15%);
     color: var(--white);
 }

 /* Footer */

 [data-mode="light"] footer {
     background: #e4e4e4;
 }

 [data-mode="light"] .footer-copy {
     color: rgb(0 0 0 / 40%);
 }

 [data-mode="light"] .footer-links a {
     color: rgb(0 0 0 / 40%);
 }

 [data-mode="light"] .pillar {
     background: var(--dark2);
     border-color: rgb(0 0 0 / 8%);
     color: rgb(0 0 0 / 70%);
 }

 [data-mode="light"] .theme-toggle {
     border-color: rgb(0 0 0 / 20%);
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
     background: var(--dark);
     color: var(--white);
     line-height: 1.65;
     overflow-x: hidden;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

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

 ::-webkit-scrollbar-track {
     background: var(--dark2);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--green);
     border-radius: 3px;
 }

 /* ── Utility ────────────────────────────────────────── */
 .container {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 24px;
 }

 .section-title {
     font-size: clamp(2rem, 5vw, 3rem);
     font-weight: 800;
     text-align: center;
     margin-bottom: .5rem;
 }

 .section-sub {
     text-align: center;
     color: var(--muted);
     font-size: 1.05rem;
     margin-bottom: 3.5rem;
 }

 .highlight {
     color: var(--green);
 }

 .gold {
     color: var(--gold);
 }

 /* ── Keyframes ──────────────────────────────────────── */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(36px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes pulse-glow {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(92, 184, 92, .45);
     }

     50% {
         box-shadow: 0 0 0 18px rgba(92, 184, 92, 0);
     }
 }

 @keyframes float {

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

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

 @keyframes shimmer {
     0% {
         background-position: -200% center;
     }

     100% {
         background-position: 200% center;
     }
 }

 @keyframes particleDrift {
     0% {
         transform: translateY(0) translateX(0) rotate(0deg);
         opacity: .7;
     }

     100% {
         transform: translateY(-120vh) translateX(40px) rotate(360deg);
         opacity: 0;
     }
 }

 @keyframes rotateBorder {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* ── Particles ──────────────────────────────────────── */
 #particles {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     overflow: hidden;
 }

 .particle {
     position: absolute;
     bottom: -20px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     animation: particleDrift linear infinite;
 }

 /* ── Nav ────────────────────────────────────────────── */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     padding: 14px 0;
     transition: background .3s, backdrop-filter .3s, box-shadow .3s;
 }

 nav.scrolled {
     background: rgba(13, 13, 13, .92);
     backdrop-filter: blur(12px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, .6);
 }

 .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .nav-logo img {
     height: 44px;
 }

 .nav-links {
     display: flex;
     gap: 2rem;
     font-size: 1rem;
     font-weight: 500;
 }

 .nav-links a {
     color: rgba(255, 255, 255, .75);
     transition: color .25s;
 }

 .nav-links a:hover {
     color: var(--green);
 }

 .nav-cta {
     background: var(--green);
     color: #fff !important;
     padding: 8px 20px;
     border-radius: 40px;
     font-weight: 700;
     transition: background .25s, transform .2s;
 }

 .nav-cta:hover {
     background: var(--green-d);
     transform: translateY(-1px);
 }

 /* ── Hero ───────────────────────────────────────────── */
 #hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     background:
         radial-gradient(ellipse 80% 60% at 60% 40%, rgba(92, 184, 92, .12) 0%, transparent 70%),
         radial-gradient(ellipse 60% 50% at 20% 80%, rgba(240, 168, 0, .08) 0%, transparent 60%),
         linear-gradient(160deg, #0d0d0d 0%, #111 60%, #0a1a0a 100%);
 }

 .hero-grid {
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(92, 184, 92, .04) 1px, transparent 1px),
         linear-gradient(90deg, rgba(92, 184, 92, .04) 1px, transparent 1px);
     background-size: 60px 60px;
 }

 .hero-content {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
     align-items: center;
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 24px;
 }

 .hero-text {
     animation: fadeUp .9s ease both;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(92, 184, 92, .12);
     border: 1px solid rgba(92, 184, 92, .3);
     color: var(--gold);
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 40px;
     margin-bottom: 1.5rem;
 }

 .hero-badge::before {
     content: '';
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--green);
     animation: pulse-glow 2s infinite;
 }

 .hero-headline {
     font-size: clamp(2rem, 5.3vw, 3.4rem);
     font-weight: 900;
     line-height: 1.1;
     margin-bottom: 1.4rem;
     letter-spacing: -.02em;
 }

 .hero-headline .shimmer-text {
     background: linear-gradient(100deg, var(--green) 20%, var(--gold) 50%, var(--green) 80%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: shimmer 3s linear infinite;
 }

 .hero-sub {
     font-size: 1.15rem;
     color: rgba(255, 255, 255, .65);
     margin-bottom: 2.2rem;
     max-width: 500px;
 }

 .hero-actions {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--green);
     color: #fff;
     padding: 15px 32px;
     border-radius: 50px;
     font-size: 1rem;
     font-weight: 700;
     transition: background .25s, transform .2s, box-shadow .25s;
     animation: pulse-glow 2.5s infinite;
 }

 .btn-primary:hover {
     background: var(--green-d);
     transform: translateY(-3px);
     box-shadow: 0 12px 36px rgba(92, 184, 92, .4);
 }

 .btn-secondary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: transparent;
     border: 1.5px solid rgba(255, 255, 255, .2);
     color: rgba(255, 255, 255, .8);
     padding: 14px 28px;
     border-radius: 50px;
     font-size: 1rem;
     font-weight: 600;
     transition: border-color .25s, color .25s, transform .2s;
 }

 .btn-secondary:hover {
     border-color: var(--green);
     color: var(--green);
     transform: translateY(-2px);
 }

 .hero-stats {
     display: flex;
     gap: 2rem;
     margin-top: 2.5rem;
     animation: fadeUp .9s .4s ease both;
 }

 .stat {
     border-left: 2px solid var(--green);
     padding-left: 1rem;
 }

 .stat-num {
     font-size: 1.6rem;
     font-weight: 800;
     color: var(--green);
 }

 .stat-label {
     font-size: .8rem;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .08em;
 }

 .hero-visual {
     display: flex;
     align-items: center;
     justify-content: center;
     animation: fadeIn 1s .3s ease both;
 }

 .logo-glow-wrapper {
     position: relative;
     animation: float 4s ease-in-out infinite;
 }

 .logo-glow-wrapper::before {
     content: '';
     position: absolute;
     inset: -30px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(92, 184, 92, .18) 0%, transparent 70%);
 }

 .logo-glow-wrapper::after {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 50%;
     background: conic-gradient(var(--green), var(--gold), var(--green));
     z-index: -1;
     animation: rotateBorder 6s linear infinite;
     filter: blur(2px);
     opacity: .6;
 }

 .hero-logo {
     width: min(340px, 90vw);
     filter: drop-shadow(0 20px 60px rgba(92, 184, 92, .35));
 }

 /* ── Features strip ─────────────────────────────────── */
 #features {
     padding: 100px 0;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
 }

 .feature-card {
     background: var(--dark2);
     border: 1px solid rgba(255, 255, 255, .07);
     border-radius: var(--radius);
     padding: 2rem;
     opacity: 0;
     transform: translateY(30px);
     transition: opacity .6s ease, transform .6s ease, border-color .3s, box-shadow .3s;
 }

 .feature-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .feature-card:hover {
     border-color: rgba(92, 184, 92, .35);
     transform: translateY(-4px);
     box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
 }

 .feature-icon {
     width: 52px;
     height: 52px;
     background: rgba(92, 184, 92, .12);
     border: 1px solid rgba(92, 184, 92, .25);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     margin-bottom: 1.2rem;
 }

 .feature-card h3 {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: .5rem;
 }

 .feature-card p {
     font-size: .92rem;
     color: rgba(255, 255, 255, .55);
 }

 /* ── Pricing ────────────────────────────────────────── */
 #pricing {
     padding: 100px 0;
     background:
         radial-gradient(ellipse 70% 50% at 50% 0%, rgba(92, 184, 92, .07) 0%, transparent 70%),
         var(--dark2);
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
     gap: 1.5rem;
     align-items: start;
 }

 .pricing-card {
     background: var(--dark3);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: var(--radius);
     padding: 2.2rem 2rem;
     position: relative;
     opacity: 0;
     transform: translateY(30px);
     transition: opacity .6s ease, transform .6s ease, border-color .3s, box-shadow .3s;
 }

 .pricing-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .pricing-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow);
 }

 .pricing-card.featured {
     border-color: var(--green);
     background: linear-gradient(145deg, #162016 0%, #1a261a 100%);
     box-shadow: 0 0 0 1px var(--green), 0 20px 60px rgba(92, 184, 92, .2);
 }

 .pricing-card.featured:hover {
     box-shadow: 0 0 0 1px var(--green), 0 24px 80px rgba(92, 184, 92, .35);
 }

 .plan-badge {
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--green);
     color: #fff;
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     padding: 4px 16px;
     border-radius: 40px;
 }

 .plan-name {
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--green);
     margin-bottom: .75rem;
 }

 .plan-price {
     font-size: 3rem;
     font-weight: 900;
     line-height: 1;
     margin-bottom: .25rem;
 }

 .plan-price sup {
     font-size: 1.4rem;
     vertical-align: super;
     font-weight: 700;
 }

 .plan-price span {
     font-size: 1rem;
     font-weight: 400;
     color: var(--muted);
 }

 .plan-desc {
     font-size: .88rem;
     color: var(--muted);
     margin-bottom: 1.5rem;
 }

 .plan-features {
     list-style: none;
     margin-bottom: 2rem;
 }

 .plan-features li {
     padding: .55rem 0;
     font-size: .93rem;
     border-bottom: 1px solid rgba(255, 255, 255, .05);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .plan-features li::before {
     content: '✓';
     color: var(--green);
     font-weight: 800;
     font-size: .85rem;
     flex-shrink: 0;
 }

 .plan-features li.no::before {
     content: '✕';
     color: #555;
 }

 .plan-features li.no {
     color: #555;
 }

 .btn-plan {
     display: block;
     width: 100%;
     padding: 14px;
     border-radius: 50px;
     font-weight: 700;
     font-size: .95rem;
     text-align: center;
     transition: all .25s;
     cursor: pointer;
     border: none;
 }

 .btn-plan-outline {
     background: transparent;
     border: 1.5px solid rgba(255, 255, 255, .2);
     color: rgba(255, 255, 255, .8);
 }

 .btn-plan-outline:hover {
     border-color: var(--green);
     color: var(--green);
 }

 .btn-plan-fill {
     background: var(--green);
     color: #fff;
 }

 .btn-plan-fill:hover {
     background: var(--green-d);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(92, 184, 92, .4);
 }

 /* ── About ──────────────────────────────────────────── */
 #about {
     padding: 100px 0;
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
 }

 .about-visual {
     position: relative;
 }

 .about-image-wrap {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
 }

 .about-image-wrap img {
     width: 100%;
     filter: drop-shadow(0 20px 50px rgba(92, 184, 92, .2));
 }

 .about-accent {
     position: absolute;
     bottom: -20px;
     right: -20px;
     width: 160px;
     height: 160px;
     background: conic-gradient(var(--green), var(--gold), var(--green));
     border-radius: 50%;
     opacity: .12;
     filter: blur(30px);
 }

 .about-tag {
     display: inline-block;
     background: rgba(240, 168, 0, .12);
     border: 1px solid rgba(240, 168, 0, .3);
     color: var(--gold);
     font-size: 1rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     padding: 5px 14px;
     border-radius: 40px;
     margin-bottom: 1.2rem;
 }

 .about-text h2 {
     font-size: clamp(1.8rem, 4vw, 2.6rem);
     font-weight: 900;
     line-height: 1.15;
     margin-bottom: 1.2rem;
 }

 .about-text p {
     color: rgba(255, 255, 255, .6);
     margin-bottom: 1rem;
     font-size: .98rem;
 }

 .about-pillars {
     display: flex;
     gap: 1rem;
     margin-top: 2rem;
     flex-wrap: wrap;
 }

 .pillar {
     background: var(--dark2);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 10px;
     padding: .75rem 1.2rem;
     font-size: .85rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .75);
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .pillar-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--green);
 }

 /* ── Testimonials ───────────────────────────────────── */
 #testimonials {
     padding-top: 7rem;
     background: var(--dark2);
     border-top: 1px solid rgba(255, 255, 255, .05);
 }

 .testimonials-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
     gap: 2rem;
     align-items: start;
     padding-top: 1.7rem;
 }

 .testimonial-card {
     background: var(--dark3);
     border: 0.3rem solid rgba(255, 255, 255, .08);
     border-radius: var(--radius);
     padding: 1.3rem 1rem;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity .6s ease, transform .6s ease;
 }

 .testimonial-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .stars {
     color: var(--gold);
     font-size: 1rem;
     margin-bottom: 1rem;
     letter-spacing: 2px;
 }

 .testimonial-text {
     font-size: .95rem;
     color: rgba(255, 255, 255, .7);
     margin-bottom: 1.2rem;
     font-style: italic;
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .author-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--green), var(--gold));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .9rem;
     font-weight: 700;
     color: #000;
 }

 .author-name {
     font-size: .88rem;
     font-weight: 700;
 }

 .author-role {
     font-size: .78rem;
     color: var(--muted);
 }

 .project-img {
     display: block;
     margin: 0 auto;
     box-shadow: var(--shadow);
     filter: drop-shadow(33px 47px 50px var(--shadow));
 }

 /* ── Contact ────────────────────────────────────────── */
 #contact {
     padding: 100px 0;
 }

 .contact-wrap {
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 4rem;
     align-items: start;
 }

 .contact-info h2 {
     font-size: clamp(1.8rem, 4vw, 2.6rem);
     font-weight: 900;
     margin-bottom: 1rem;
 }

 .contact-info p {
     color: rgba(255, 255, 255, .6);
     margin-bottom: 2rem;
     font-size: .98rem;
 }

 .contact-perks {
     display: flex;
     flex-direction: column;
     gap: .85rem;
 }

 .contact-perk {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: .92rem;
     color: rgba(255, 255, 255, .7);
 }

 .perk-icon {
     width: 36px;
     height: 36px;
     border-radius: 9px;
     background: rgba(92, 184, 92, .12);
     border: 1px solid rgba(92, 184, 92, .25);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     flex-shrink: 0;
     margin-top: 1px;
 }

 .contact-form {
     background: var(--dark2);
     border: 1px solid rgba(255, 255, 255, .07);
     border-radius: 20px;
     padding: 2.5rem;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 .form-group {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-bottom: 1.2rem;
 }

 .form-group label {
     font-size: .82rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .6);
     text-transform: uppercase;
     letter-spacing: .07em;
 }

 .form-group input,
 .form-group textarea,
 .form-group select {
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 10px;
     padding: 13px 16px;
     color: var(--white);
     font-size: .95rem;
     font-family: inherit;
     outline: none;
     transition: border-color .25s, background .25s;
     width: 100%;
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: rgba(255, 255, 255, .25);
 }

 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
     border-color: var(--green);
     background: rgba(92, 184, 92, .05);
 }

 .form-group textarea {
     resize: vertical;
     min-height: 120px;
 }

 .form-group select option {
     background: #1c1c1c;
 }

 .form-submit {
     width: 100%;
     background: var(--green);
     color: #fff;
     border: none;
     padding: 16px;
     border-radius: 50px;
     font-size: 1rem;
     font-weight: 700;
     cursor: pointer;
     transition: background .25s, transform .2s, box-shadow .25s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .form-submit:hover {
     background: var(--green-d);
     transform: translateY(-2px);
     box-shadow: 0 8px 28px rgba(92, 184, 92, .4);
 }

 .form-note {
     text-align: center;
     font-size: .78rem;
     color: rgba(255, 255, 255, .3);
     margin-top: 1rem;
 }

 /* success message */
 .form-success {
     display: none;
     text-align: center;
     padding: 2rem;
     color: var(--green);
     font-size: 1.1rem;
     font-weight: 700;
 }

 /* ── Footer ─────────────────────────────────────────── */
 footer {
     background: #0a0a0a;
     border-top: 1px solid rgba(255, 255, 255, .05);
     padding: 3rem 0;
 }

 .footer-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .footer-logo img {
     height: 36px;
 }

 .footer-copy {
     font-size: .82rem;
     color: rgba(255, 255, 255, .3);
 }

 .footer-links {
     display: flex;
     gap: 1.5rem;
 }

 .footer-links a {
     font-size: .82rem;
     color: rgba(255, 255, 255, .35);
     transition: color .2s;
 }

 .footer-links a:hover {
     color: var(--green);
 }

 /* ── Theme toggle button ────────────────────────────── */

 .theme-toggle {
     background: none;
     border: 1px solid rgb(255 255 255 / 15%);
     border-radius: 3.125rem;
     padding: 0.313rem 0.75rem;
     cursor: pointer;
     font-size: 0.95rem;
     color: inherit;
     transition: border-color .25s, background .25s;
     line-height: 1;
     margin-left: .5rem;
 }

 .theme-toggle:hover {
     border-color: var(--green);
     background: rgb(92 184 92 / 8%);
 }

 /* ── Responsive ─────────────────────────────────────── */
 @media (max-width: 768px) {
     .hero-content {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .hero-text {
         order: 2;
     }

     .hero-visual {
         order: 1;
     }

     .hero-sub {
         margin: 0 auto 2rem;
     }

     .hero-actions {
         justify-content: center;
     }

     .hero-stats {
         justify-content: center;
     }

     .about-grid,
     .contact-wrap {
         grid-template-columns: 1fr;
         gap: 2.5rem;
     }

     .form-row {
         grid-template-columns: 1fr;
     }

     .nav-links {
         display: none;
     }

     .footer-inner {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
 }