/* ============================================
   NEDILKO STUDIO — style.css
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

   /* ─── RESET & BASE ─── */
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; font-size: 18px; }
   
   :root {
     --bg:          #05070f;
     --bg2:         #080c18;
     --bg3:         #0b1020;
     --green:       #00ff87;
     --blue:        #00d4ff;
     --purple:      #7b2fff;
     --green-dim:   rgba(0,255,135,0.08);
     --blue-dim:    rgba(0,212,255,0.08);
     --white:       #ffffff;
     --text:        #c8ccd8;
     --muted:       #4a5568;
     --border:      rgba(255,255,255,0.06);
     --border-hover:rgba(0,255,135,0.25);
     --card:        rgba(255,255,255,0.025);
     --radius:      2px;
     --nav-h:       72px;
     --section-pad: 110px 0;
     --container:   1200px;
   }
   
   body {
     background: var(--bg);
     color: var(--text);
     font-family: 'Space Mono', monospace;
     overflow-x: hidden;
     cursor: none;
     -webkit-font-smoothing: antialiased;
   }
   
   /* ─── SCROLLBAR ─── */
   ::-webkit-scrollbar { width: 2px; }
   ::-webkit-scrollbar-track { background: var(--bg); }
   ::-webkit-scrollbar-thumb { background: var(--green); }
   
   /* ─── CURSOR ─── */
   #cursor {
     position: fixed; z-index: 9999;
     width: 10px; height: 10px;
     background: var(--green);
     border-radius: 50%;
     pointer-events: none;
     transform: translate(-50%,-50%);
     transition: width .2s, height .2s, background .2s, box-shadow .2s;
     box-shadow: 0 0 12px var(--green), 0 0 24px rgba(0,255,135,.4);
     will-change: left, top;
   }
   #cursor-ring {
     position: fixed; z-index: 9998;
     width: 34px; height: 34px;
     border: 1px solid rgba(0,255,135,.3);
     border-radius: 50%;
     pointer-events: none;
     transform: translate(-50%,-50%);
     will-change: left, top;
   }
   body.hovered #cursor { width: 18px; height: 18px; background: var(--blue); box-shadow: 0 0 16px var(--blue), 0 0 32px rgba(0,212,255,.4); }
   body.hovered #cursor-ring { width: 46px; height: 46px; border-color: rgba(0,212,255,.25); }
   
   /* ─── NOISE TEXTURE ─── */
   body::after {
     content: ''; position: fixed; inset: 0; z-index: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
     pointer-events: none; opacity: .5;
   }
   
   /* ─── CONTAINER ─── */
   .container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }
   @media (max-width: 768px) { .container { padding: 0 20px; } }
   
   /* ─── TYPOGRAPHY ─── */
   .label {
     font-size: .75rem; letter-spacing: .25em; text-transform: uppercase;
     color: var(--green); margin-bottom: 14px; display: block;
   }
   .section-title {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: clamp(2.4rem, 4.5vw, 4rem);
     line-height: 1.05;
     letter-spacing: -.03em;
     color: var(--white);
     margin-bottom: 60px;
   }
   .section-title em {
     font-style: normal;
     background: linear-gradient(135deg, var(--green), var(--blue));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
   }
   .divider {
     width: 48px; height: 1px;
     background: linear-gradient(90deg, var(--green), var(--blue));
     margin-bottom: 32px; position: relative;
   }
   .divider::after {
     content: ''; position: absolute; right: -8px; top: -3px;
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--blue); box-shadow: 0 0 8px var(--blue);
   }
   
   /* ─── REVEAL ─── */
   .reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s ease; }
   .reveal.in { opacity: 1; transform: translateY(0); }
   .reveal.d1 { transition-delay: .1s; }
   .reveal.d2 { transition-delay: .2s; }
   .reveal.d3 { transition-delay: .3s; }
   .reveal.d4 { transition-delay: .4s; }
   
   /* ─── BUTTONS ─── */
   .btn {
     display: inline-flex; align-items: center; gap: 10px;
     font-family: 'Space Mono', monospace; font-size: .72rem;
     font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
     text-decoration: none; border: none; cursor: pointer;
     padding: 15px 32px; transition: all .3s; position: relative;
     will-change: transform;
   }
   .btn-primary {
     background: var(--green); color: #000;
     box-shadow: 0 0 0 rgba(0,255,135,0);
   }
   .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 0 30px rgba(0,255,135,.45), 0 0 60px rgba(0,255,135,.15);
   }
   .btn-outline {
     background: transparent; color: var(--text);
     border: 1px solid var(--border);
   }
   .btn-outline:hover {
     border-color: var(--blue); color: var(--blue);
     box-shadow: 0 0 20px rgba(0,212,255,.2);
     transform: translateY(-3px);
   }
   
   /* ─── NAVIGATION ─── */
   #nav {
     position: fixed; top: 0; left: 0; right: 0; z-index: 500;
     height: var(--nav-h);
     display: flex; align-items: center;
     background: rgba(5,7,15,.8);
     border-bottom: 1px solid transparent;
     backdrop-filter: blur(24px);
     transition: all .3s;
   }
   #nav.scrolled {
     height: 60px;
     border-bottom-color: var(--border);
     background: rgba(5,7,15,.95);
   }
   .nav-inner {
     width: 100%; display: flex; align-items: center;
     justify-content: space-between; gap: 32px;
   }
   .nav-logo {
     font-family: 'Syne', sans-serif; font-weight: 800;
     font-size: .95rem; letter-spacing: .02em; color: var(--white);
     text-decoration: none; white-space: nowrap;
   }
   .nav-logo span { color: var(--green); }
   .nav-links {
     display: flex; gap: 28px; list-style: none;
     flex: 1; justify-content: center;
   }
   .nav-links a {
     font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
     color: var(--muted); text-decoration: none;
     transition: color .3s; position: relative; padding-bottom: 2px;
   }
   .nav-links a::after {
     content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
     height: 1px; background: var(--green);
     transform: scaleX(0); transition: transform .3s;
   }
   .nav-links a:hover, .nav-links a.active { color: var(--green); }
   .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
   .nav-right { display: flex; align-items: center; gap: 8px; }
   .lang-btn {
     background: none; border: 1px solid var(--border);
     color: var(--muted); font-family: 'Space Mono', monospace;
     font-size: .72rem; padding: 5px 10px; cursor: pointer;
     transition: all .3s; letter-spacing: .08em;
   }
   .lang-btn:hover, .lang-btn.active {
     border-color: var(--green); color: var(--green);
     box-shadow: 0 0 10px rgba(0,255,135,.2);
   }
   
   /* Burger */
   .nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
   .nav-burger span { display: block; width: 22px; height: 1px; background: var(--green); box-shadow: 0 0 6px var(--green); transition: all .3s; }
   .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
   .nav-burger.open span:nth-child(2) { opacity: 0; }
   .nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }
   
   /* Mobile menu */
   #mobile-menu {
     display: none; position: fixed;
     top: var(--nav-h); left: 0; right: 0; z-index: 499;
     background: rgba(5,7,15,.98); border-bottom: 1px solid var(--border);
     padding: 32px 24px; flex-direction: column; gap: 0;
     backdrop-filter: blur(24px);
   }
   #mobile-menu.open { display: flex; }
   #mobile-menu a {
     color: var(--muted); text-decoration: none;
     font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
     padding: 16px 0; border-bottom: 1px solid var(--border);
     transition: color .3s;
   }
   #mobile-menu a:hover { color: var(--green); }
   
   /* Mobile language toggle (в хедері зліва) */
   .mobile-lang-toggle {
     display: none; /* Приховано на десктопі */
     position: relative;
   }
   .mobile-lang-btn {
     display: flex; align-items: center; gap: 6px;
     background: none; border: 1px solid var(--border);
     color: var(--muted); font-family: 'Space Mono', monospace;
     font-size: .7rem; padding: 6px 12px; cursor: pointer;
     transition: all .3s; letter-spacing: .08em;
   }
   .mobile-lang-btn:hover, .mobile-lang-toggle.open .mobile-lang-btn {
     border-color: var(--green); color: var(--green);
     box-shadow: 0 0 10px rgba(0,255,135,.2);
   }
   .mobile-lang-btn svg {
     transition: transform .3s;
   }
   .mobile-lang-toggle.open .mobile-lang-btn svg {
     transform: rotate(180deg);
   }
   .mobile-lang-dropdown {
     display: none; position: absolute; top: calc(100% + 8px); left: 0;
     background: rgba(5,7,15,.98); border: 1px solid var(--border);
     min-width: 60px; z-index: 1000;
     backdrop-filter: blur(24px);
     box-shadow: 0 8px 32px rgba(0,0,0,.5);
   }
   .mobile-lang-toggle.open .mobile-lang-dropdown {
     display: flex; flex-direction: column;
   }
   .mobile-lang-option {
     background: none; border: none;
     color: var(--muted); font-family: 'Space Mono', monospace;
     font-size: .7rem; padding: 10px 16px; cursor: pointer;
     text-align: left; transition: all .3s;
     border-bottom: 1px solid var(--border);
   }
   .mobile-lang-option:last-child { border-bottom: none; }
   .mobile-lang-option:hover {
     background: rgba(0,255,135,.05); color: var(--green);
   }
   .mobile-lang-option.active {
     color: var(--green); background: rgba(0,255,135,.08);
   }
   
   @media (max-width: 900px) {
     .nav-links { display: none; }
     .nav-right .lang-btn { display: none; }
     .nav-burger { display: flex; }
     .mobile-lang-toggle { display: block; } /* Показуємо на мобільних/планшетах */
   }
   
   /* ─── HERO ─── */
   #hero {
     min-height: 100vh;
     display: flex; align-items: center;
     padding: calc(var(--nav-h) + 40px) 0 80px;
     position: relative; overflow: hidden;
   }
   
   /* Grid bg */
   .hero-grid {
     position: absolute; inset: 0; z-index: 0;
     background-image:
       linear-gradient(rgba(0,255,135,.035) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0,255,135,.035) 1px, transparent 1px);
     background-size: 64px 64px;
     animation: gridFade 5s ease-in-out infinite alternate;
   }
   @keyframes gridFade { from { opacity: .5; } to { opacity: 1; } }
   
   /* Orbs */
   .hero-orb {
     position: absolute; border-radius: 50%;
     filter: blur(90px); pointer-events: none;
   }
   .orb1 {
     width: 600px; height: 600px;
     background: radial-gradient(circle, rgba(0,255,135,.1) 0%, transparent 70%);
     top: -150px; right: -100px;
     animation: orbPulse 7s ease-in-out infinite;
   }
   .orb2 {
     width: 400px; height: 400px;
     background: radial-gradient(circle, rgba(0,212,255,.08) 0%, transparent 70%);
     bottom: -100px; left: 5%;
     animation: orbPulse 9s 2s ease-in-out infinite;
   }
   @keyframes orbPulse { 0%,100% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.1) translate(15px,-20px); } }
   
   /* Scan line */
   .hero-scan {
     position: absolute; left: 0; right: 0; height: 1px; z-index: 1;
     background: linear-gradient(90deg, transparent 0%, rgba(0,255,135,.2) 50%, transparent 100%);
     animation: scan 5s linear infinite;
   }
   @keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
   
   /* Hero layout */
   .hero-inner {
     position: relative; z-index: 2;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 64px;
     align-items: center;
     width: 100%;
   }
   .hero-text { }
   .hero-tag {
     display: inline-flex; align-items: center; gap: 8px;
     border: 1px solid rgba(0,255,135,.3); padding: 6px 16px;
     font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
     color: var(--green); margin-bottom: 32px;
     animation: fadeUp .8s both;
   }
   .hero-tag-dot {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--green); box-shadow: 0 0 8px var(--green);
     animation: blink 1.4s infinite;
   }
   @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
   
   .hero-title {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
     font-size: clamp(3rem, 6vw, 5.5rem);
     line-height: .95;
     letter-spacing: -.04em;
     animation: fadeUp .8s .08s both;
   }
   .hero-title .t1 { display: block; color: var(--white); }
   .hero-title .t2 {
     display: block;
     background: linear-gradient(120deg, var(--green) 30%, var(--blue) 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     animation: shimmerTitle 4s linear infinite;
     background-size: 200% auto;
   }
   .hero-title .t3 { display: block; color: rgba(255,255,255,.1); }
   @keyframes shimmerTitle { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
   
   .hero-divider {
     width: 72px; height: 2px; margin: 28px 0;
     background: linear-gradient(90deg, var(--green), transparent);
     animation: fadeUp .8s .15s both;
   }
   .hero-sub {
     font-size: clamp(.9rem, 1.3vw, 1.05rem);
     line-height: 1.85; color: var(--muted);
     max-width: 480px; margin-bottom: 40px;
     animation: fadeUp .8s .2s both;
   }
   .hero-sub strong { color: var(--green); font-weight: 400; }
   .hero-ctas {
     display: flex; gap: 14px; flex-wrap: wrap;
     animation: fadeUp .8s .28s both;
   }
   .hero-stats {
     display: flex; gap: 48px; margin-top: 56px;
     animation: fadeUp .8s .36s both;
   }
   .stat-num {
     font-family: 'Syne', sans-serif; font-weight: 800;
     font-size: 2.4rem; line-height: 1;
     color: var(--green);
     text-shadow: 0 0 20px rgba(0,255,135,.35);
   }
   .stat-lbl { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
   
   /* Hero photo */
   .hero-photo {
     position: relative; flex-shrink: 0;
     width: 380px; animation: fadeUp .8s .1s both;
   }
   .hero-photo::before {
     content: ''; position: absolute; inset: -2px; z-index: -1;
     background: linear-gradient(135deg, var(--green), var(--blue), var(--purple), var(--green));
     background-size: 300% 300%;
     animation: borderSpin 4s linear infinite;
     filter: blur(8px); opacity: .5;
   }
   @keyframes borderSpin { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
   .hero-photo img { width: 100%; display: block; position: relative; z-index: 1; }
   
   /* Particles */
   .particle {
     position: absolute; border-radius: 50%;
     pointer-events: none; animation: rise linear infinite;
   }
   @keyframes rise {
     0% { transform: translateY(0) translateX(0); opacity: 0; }
     10% { opacity: 1; }
     90% { opacity: .6; }
     100% { transform: translateY(-100vh) translateX(var(--dx)); opacity: 0; }
   }
   
   @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
   
   /* ─── ABOUT ─── */
   #about { padding: var(--section-pad); background: var(--bg2); position: relative; }
   .about-grid {
     display: grid; grid-template-columns: 400px 1fr;
     gap: 72px; align-items: center;
   }
   .about-photo-wrap {
     position: relative;
   }
   .about-photo-wrap::before {
     content: ''; position: absolute; inset: -2px; z-index: 0;
     background: linear-gradient(135deg, var(--green), var(--blue), var(--purple), var(--green));
     background-size: 300% 300%;
     animation: borderSpin 4s linear infinite;
     filter: blur(6px); opacity: .4;
   }
   .about-photo-wrap img {
     position: relative; z-index: 1;
     width: 100%; display: block;
     filter: saturate(.95);
   }
   .about-badge {
     position: absolute; top: 20px; left: 20px; z-index: 2;
     border: 1px solid rgba(0,255,135,.3); padding: 5px 14px;
     font-size: .58rem; letter-spacing: .15em; text-transform: uppercase;
     color: var(--green); background: rgba(5,7,15,.8);
     display: flex; align-items: center; gap: 7px;
   }
   .about-body p {
     font-size: .92rem; line-height: 1.95; color: var(--muted); margin-bottom: 20px;
   }
   .about-meta {
     margin-top: 32px; display: flex; flex-direction: column; gap: 12px;
   }
   .meta-row { display: flex; align-items: center; gap: 16px; }
   .meta-key {
     font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
     color: var(--muted); min-width: 90px;
   }
   .meta-val { font-size: .88rem; color: var(--white); }
   .meta-val.green { color: var(--green); display: flex; align-items: center; gap: 7px; }
   .online-dot {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--green); box-shadow: 0 0 8px var(--green);
     animation: blink 1.4s infinite;
   }
   
   /* ─── SERVICES ─── */
   #services { padding: var(--section-pad); background: var(--bg); }
   .services-grid {
     display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 18px;
   }
   .svc-card {
     background: var(--card); border: 1px solid var(--border);
     padding: 36px 32px; position: relative; overflow: hidden;
     transition: border-color .4s, transform .4s, box-shadow .4s;
   }
   .svc-card::before {
     content: ''; position: absolute; top: 0; left: 0; right: 0;
     height: 1px; background: linear-gradient(90deg, transparent, var(--green), transparent);
     transform: scaleX(0); transition: transform .5s;
   }
   .svc-card:hover { border-color: var(--border-hover); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(0,255,135,.06); }
   .svc-card:hover::before { transform: scaleX(1); }
   .svc-num {
     position: absolute; top: 20px; right: 24px;
     font-family: 'Syne', sans-serif; font-size: 3.5rem;
     font-weight: 800; color: rgba(255,255,255,.025); line-height: 1;
   }
   .svc-icon { width: 44px; height: 44px; margin-bottom: 22px; color: var(--green); }
   .svc-icon svg { width: 100%; height: 100%; }
   .svc-name {
     font-family: 'Syne', sans-serif; font-weight: 700;
     font-size: 1.25rem; color: var(--white); margin-bottom: 12px;
     transition: all .3s;
   }
   .svc-card:hover .svc-name {
     background: linear-gradient(90deg, var(--white), var(--green));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
   }
   .svc-desc { font-size: .82rem; line-height: 1.8; color: var(--muted); margin-bottom: 20px; }
   .svc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
   .tag {
     font-size: .68rem; letter-spacing: .07em;
     padding: 4px 12px; border: 1px solid rgba(0,255,135,.18);
     color: var(--green);
   }
   
   /* ─── PROJECTS ─── */
   #projects { padding: var(--section-pad); background: var(--bg2); }
   .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
     gap: 20px;
   }
   .proj-card {
     background: var(--card); border: 1px solid var(--border);
     overflow: hidden; position: relative;
     transition: border-color .4s, transform .4s, box-shadow .4s;
   }
   .proj-card:hover {
     border-color: rgba(0,212,255,.35); transform: translateY(-6px);
     box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,212,255,.08);
   }
   /* Corner brackets */
   .proj-card::before, .proj-card::after {
     content: ''; position: absolute; z-index: 3;
     width: 28px; height: 28px; opacity: 0; transition: opacity .4s;
   }
   .proj-card::before { top: 0; left: 0; border-top: 2px solid var(--green); border-left: 2px solid var(--green); }
   .proj-card::after  { bottom: 0; right: 0; border-bottom: 2px solid var(--blue); border-right: 2px solid var(--blue); }
   .proj-card:hover::before, .proj-card:hover::after { opacity: 1; }
   
   .proj-preview {
     height: 210px; position: relative; overflow: hidden;
     background: linear-gradient(135deg, #0b1020, #080c18);
     display: flex; align-items: center; justify-content: center;
   }
   .proj-preview img {
     width: 100%; height: 100%;
     object-fit: cover; object-position: center;
     display: block; transition: transform .4s;
   }
   .proj-card:hover .proj-preview img {
     transform: scale(1.05);
   }
   .proj-overlay {
     position: absolute; inset: 0;
     background: linear-gradient(to bottom, transparent 40%, var(--bg2) 100%);
   }
   .proj-glow {
     position: absolute; inset: 0;
     background: radial-gradient(circle, rgba(0,212,255,.07) 0%, transparent 70%);
     opacity: 0; transition: opacity .4s;
   }
   .proj-card:hover .proj-glow { opacity: 1; }
   
   .proj-info { padding: 24px 26px; }
   .proj-type { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 7px; }
   .proj-name {
     font-family: 'Syne', sans-serif; font-weight: 700;
     font-size: 1.15rem; color: var(--white); margin-bottom: 8px;
   }
   .proj-desc { font-size: .78rem; line-height: 1.75; color: var(--muted); margin-bottom: 16px; }
   .proj-link {
     display: inline-flex; align-items: center; gap: 6px;
     font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
     color: var(--green); text-decoration: none;
     transition: gap .3s;
   }
   .proj-link:hover { gap: 10px; }
   .proj-link svg { width: 11px; height: 11px; }
   
   /* ─── CALCULATOR ─── */
   #calculator { padding: var(--section-pad); background: var(--bg); }
   .calc-wrap {
     max-width: 780px; margin: 0 auto;
     background: var(--card); border: 1px solid var(--border);
     padding: 52px; position: relative; overflow: hidden;
   }
   .calc-wrap::before {
     content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
     background: linear-gradient(90deg, var(--green), var(--blue), var(--purple));
   }
   .calc-prog { display: flex; gap: 6px; margin-bottom: 40px; }
   .prog-dot { flex: 1; height: 2px; background: var(--border); transition: background .4s; }
   .prog-dot.done { background: var(--green); }
   .prog-dot.cur  { background: var(--blue); }
   
   .calc-step { display: none; animation: fadeUp .4s both; }
   .calc-step.active { display: block; }
   
   .calc-q {
     font-family: 'Syne', sans-serif; font-weight: 700;
     font-size: 1.5rem; color: var(--white); margin-bottom: 28px;
   }
   .calc-opts {
     display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
     gap: 12px; margin-bottom: 32px;
   }
   .calc-opt {
     border: 1px solid var(--border); padding: 18px 20px;
     background: none; cursor: pointer; transition: all .3s;
     font-family: 'Space Mono', monospace; font-size: .8rem;
     color: var(--muted); text-align: left; position: relative; overflow: hidden;
   }
   .calc-opt::after {
     content: ''; position: absolute; inset: 0;
     background: linear-gradient(135deg, rgba(0,255,135,.06), rgba(0,212,255,.04));
     opacity: 0; transition: opacity .3s;
   }
   .calc-opt:hover, .calc-opt.sel {
     border-color: var(--green); color: var(--green);
     box-shadow: 0 0 20px rgba(0,255,135,.12);
   }
   .calc-opt:hover::after, .calc-opt.sel::after { opacity: 1; }
   .opt-title { font-weight: 700; display: block; margin-bottom: 4px; color: var(--white); }
   .calc-opt:hover .opt-title, .calc-opt.sel .opt-title { color: var(--green); }
   .opt-price { font-size: .58rem; color: var(--blue); }
   
   .calc-result { text-align: center; padding: 20px 0; }
   .result-lbl { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
   .result-price {
     font-family: 'Syne', sans-serif; font-weight: 800;
     font-size: clamp(3.5rem, 6vw, 5rem);
     background: linear-gradient(135deg, var(--green), var(--blue));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     margin: 16px 0 6px; animation: pricePulse 2s ease-in-out infinite;
   }
   @keyframes pricePulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(0,255,135,.3)); } 50% { filter: drop-shadow(0 0 22px rgba(0,255,135,.7)); } }
   .result-time { font-size: .72rem; color: var(--muted); margin-bottom: 32px; }
   .result-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
   .calc-footnote {
     margin-top: 24px; font-size: .72rem; color: var(--muted);
     line-height: 1.7; text-align: center;
   }
   .calc-footnote span { color: var(--green); }
   .calc-reset {
     margin-top: 18px; background: none; border: none;
     font-family: 'Space Mono', monospace; font-size: .72rem;
     color: var(--muted); cursor: pointer; letter-spacing: .1em; text-transform: uppercase;
     transition: color .3s;
   }
   .calc-reset:hover { color: var(--green); }
   
   /* ─── REVIEWS ─── */
   #reviews { padding: var(--section-pad); background: var(--bg2); }
   .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
   .rev-card {
     background: var(--card); border: 1px solid var(--border);
     padding: 32px; transition: all .4s;
   }
   .rev-card:hover { border-color: rgba(0,255,135,.18); box-shadow: 0 0 30px rgba(0,255,135,.04); }
   .rev-quote {
     font-family: 'Syne', sans-serif; font-size: 3rem; color: var(--green);
     opacity: .35; line-height: .8; margin-bottom: 16px;
     text-shadow: 0 0 20px rgba(0,255,135,.3);
   }
   .rev-text { font-size: .84rem; line-height: 1.85; color: var(--muted); margin-bottom: 24px; }
   .rev-author { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem; color: var(--white); }
   .rev-role { font-size: .7rem; letter-spacing: .1em; color: var(--blue); margin-top: 2px; }
   
   /* ─── CONTACT ─── */
   #contact { padding: var(--section-pad); background: var(--bg); }
   .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 960px; }
   .form-group { margin-bottom: 18px; }
   .form-group label {
     display: block; font-size: .7rem; letter-spacing: .18em;
     text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
   }
   .form-group input,
   .form-group textarea,
   .form-group select {
     width: 100%; background: rgba(255,255,255,.03);
     border: 1px solid var(--border); color: var(--white);
     font-family: 'Space Mono', monospace; font-size: .85rem;
     padding: 14px 16px; outline: none;
     transition: border-color .3s, box-shadow .3s; -webkit-appearance: none;
   }
   .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
     border-color: var(--green); box-shadow: 0 0 16px rgba(0,255,135,.1);
   }
   .form-group textarea { min-height: 100px; resize: vertical; }
   .form-group select option { background: #080c18; }
   
   .contact-list { display: flex; flex-direction: column; gap: 12px; }
   .contact-item {
     display: flex; align-items: center; gap: 16px;
     padding: 16px; border: 1px solid var(--border);
     text-decoration: none; color: inherit;
     transition: border-color .3s, background .3s;
   }
   .contact-item:hover { border-color: var(--border-hover); background: rgba(0,255,135,.02); }
   .contact-item:hover .ci-icon { background: rgba(0,255,135,.1); box-shadow: 0 0 18px rgba(0,255,135,.15); }
   .ci-icon {
     width: 40px; height: 40px; flex-shrink: 0;
     display: flex; align-items: center; justify-content: center;
     border: 1px solid rgba(0,255,135,.18); color: var(--green);
     transition: all .3s;
   }
   .ci-icon svg { width: 18px; height: 18px; }
   .ci-label { font-size: .68rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
   .ci-val { font-size: .88rem; color: var(--white); margin-top: 2px; }
   
   /* ─── FLOATING WA ─── */
   #wa-float {
     position: fixed; bottom: 28px; right: 28px; z-index: 400;
     width: 56px; height: 56px; border-radius: 50%;
     background: #25D366;
     display: flex; align-items: center; justify-content: center;
     text-decoration: none;
     box-shadow: 0 0 20px rgba(37,211,102,.5), 0 0 40px rgba(37,211,102,.25);
     animation: waPulse 2.5s ease-in-out infinite;
     transition: transform .3s;
   }
   #wa-float:hover { transform: scale(1.1); }
   #wa-float svg { width: 28px; height: 28px; fill: #fff; }
   @keyframes waPulse {
     0%,100% { box-shadow: 0 0 18px rgba(37,211,102,.5), 0 0 36px rgba(37,211,102,.2); }
     50%      { box-shadow: 0 0 28px rgba(37,211,102,.8), 0 0 56px rgba(37,211,102,.4), 0 0 80px rgba(37,211,102,.15); }
   }
   
   /* ─── FOOTER ─── */
   #footer {
     padding: 40px 0; border-top: 1px solid var(--border);
     position: relative;
   }
   #footer::before {
     content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
     background: linear-gradient(90deg, transparent, var(--green), var(--blue), transparent);
     animation: footerLine 3s ease-in-out infinite;
   }
   @keyframes footerLine { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
   .footer-inner {
     display: flex; align-items: center; justify-content: space-between;
     flex-wrap: wrap; gap: 16px;
   }
   .footer-logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--white); }
   .footer-logo span { color: var(--green); }
   .footer-copy { font-size: .7rem; color: var(--muted); letter-spacing: .08em; }
   .footer-links { display: flex; gap: 20px; }
   .footer-links a {
     font-size: .7rem; color: var(--muted); text-decoration: none;
     letter-spacing: .1em; text-transform: uppercase; transition: color .3s;
   }
   .footer-links a:hover { color: var(--green); }
   
   /* ─── RESPONSIVE ─── */
   @media (max-width: 1024px) {
     .hero-photo { width: 300px; }
     .about-grid { grid-template-columns: 340px 1fr; gap: 48px; }
     .projects-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
     .proj-preview { height: 240px; }
   }
   
   @media (max-width: 900px) {
     :root { --section-pad: 80px 0; }
     .hero-inner { grid-template-columns: 1fr; gap: 48px; }
     .hero-photo { width: 100%; max-width: 400px; margin: 0 auto; }
     .hero-title { font-size: clamp(2.5rem, 8vw, 4.5rem); }
     .hero-stats { gap: 32px; }
     .about-grid { grid-template-columns: 1fr; }
     .about-photo-wrap { max-width: 360px; }
     .contact-grid { grid-template-columns: 1fr; gap: 48px; }
     .calc-wrap { padding: 36px 24px; }
     .projects-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
     .proj-preview { height: 220px; }
   }
   
   @media (max-width: 600px) {
     :root { --section-pad: 64px 0; --nav-h: 60px; }
     .hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
     .hero-ctas { flex-direction: column; }
     .hero-ctas .btn { width: 100%; justify-content: center; }
     .hero-stats { gap: 24px; }
     .stat-num { font-size: 1.8rem; }
     .projects-grid { grid-template-columns: 1fr; gap: 16px; }
     .proj-preview { height: 200px; }
     .calc-opts { grid-template-columns: 1fr 1fr; }
     #wa-float { bottom: 20px; right: 20px; }
   }