:root {
   --bg: #09090f;
   --bg2: #0f0f1a;
   --surface: #13131f;
   --border: #1e1e30;
   --accent: #00ff88;
   --accent2: #39d353;
   --green: #a8ff78;
   --text: #e8e8f0;
   --muted: #7b7b8a;
   --font-head: 'Syne', sans-serif;
   --font-mono: 'DM Mono', monospace;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--bg);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 15px;
   line-height: 1.7;
   overflow-x: hidden;
 }

 /* ─── NOISE OVERLAY ─── */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
   pointer-events: none;
   z-index: 9999;
   opacity: 0.35;
 }

 /* ─── NAV ─── */
 nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.2rem 4rem;
   background: rgba(9, 9, 15, 0.85);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid var(--border);
 }

 .nav-logo {
   font-family: var(--font-head);
   font-weight: 800;
   font-size: 1.25rem;
   letter-spacing: -0.02em;
   color: var(--text);
   text-decoration: none;
 }

 .nav-logo span {
   color: var(--accent);
 }

 .nav-links {
   display: flex;
   gap: 2.5rem;
   list-style: none;
 }

 .nav-links a {
   color: var(--muted);
   text-decoration: none;
   font-size: 0.8rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   transition: color 0.2s;
 }

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

 .nav-cta {
   background: var(--accent);
   color: var(--bg) !important;
   padding: 0.5rem 1.2rem;
   border-radius: 2px;
   font-weight: 500;
 }

 .nav-cta:hover {
   background: #00c8e0 !important;
   color: var(--bg) !important;
 }

 /* ─── HERO ─── */
 .hero {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 8rem 4rem 4rem;
   position: relative;
   overflow: hidden;
 }

 .hero-grid-bg {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(0, 255, 136, 0.04) 1px, transparent 1px),
     linear-gradient(90deg, rgba(0, 255, 136, 0.04) 1px, transparent 1px);
   background-size: 60px 60px;
   mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
 }

 .hero-glow {
   position: absolute;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(0, 255, 136, 0.08) 0%, transparent 70%);
   top: -200px;
   right: -200px;
   pointer-events: none;
 }

 .hero-glow2 {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(57, 211, 83, 0.07) 0%, transparent 70%);
   bottom: -100px;
   left: -100px;
   pointer-events: none;
 }

 .hero-tag {
   font-size: 0.75rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 1.5rem;
   display: flex;
   align-items: center;
   gap: 0.8rem;
 }

 .hero-tag::before {
   content: '';
   display: inline-block;
   width: 32px;
   height: 1px;
   background: var(--accent);
 }

 .hero h1 {
   font-family: var(--font-head);
   font-size: clamp(2.8rem, 6vw, 5.5rem);
   font-weight: 800;
   line-height: 1.05;
   letter-spacing: -0.03em;
   max-width: 820px;
   margin-bottom: 1.5rem;
 }

 .hero h1 .hl {
   color: var(--accent);
 }

 .hero h1 .hl2 {
   color: var(--accent2);
 }

 .hero-sub {
   font-size: 1rem;
   color: var(--muted);
   max-width: 520px;
   line-height: 1.8;
   margin-bottom: 3rem;
 }

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

 .btn-primary {
   background: var(--accent);
   color: var(--bg);
   padding: 0.85rem 2rem;
   border-radius: 2px;
   text-decoration: none;
   font-family: var(--font-head);
   font-weight: 700;
   font-size: 0.9rem;
   letter-spacing: 0.05em;
   transition: all 0.2s;
   border: 2px solid var(--accent);
 }

 .btn-primary:hover {
   background: transparent;
   color: var(--accent);
 }

 .btn-outline {
   border: 2px solid var(--border);
   color: var(--muted);
   padding: 0.85rem 2rem;
   border-radius: 2px;
   text-decoration: none;
   font-family: var(--font-head);
   font-weight: 600;
   font-size: 0.9rem;
   letter-spacing: 0.05em;
   transition: all 0.2s;
 }

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

 /* ─── STATS BAND ─── */
 .stats {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   margin: 0 4rem;
 }

 .stat {
   padding: 2.5rem 2rem;
   border-right: 1px solid var(--border);
   position: relative;
 }

 .stat:last-child {
   border-right: none;
 }

 .stat-num {
   font-family: var(--font-head);
   font-size: 2.8rem;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
   margin-bottom: 0.4rem;
 }

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

 /* ─── SECTION BASE ─── */
 section {
   padding: 6rem 4rem;
 }

 .section-tag {
   font-size: 0.72rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent2);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 0.8rem;
 }

 .section-tag::before {
   content: '';
   display: inline-block;
   width: 24px;
   height: 1px;
   background: var(--accent2);
 }

 .section-title {
   font-family: var(--font-head);
   font-size: clamp(1.8rem, 3.5vw, 3rem);
   font-weight: 800;
   letter-spacing: -0.02em;
   line-height: 1.1;
   margin-bottom: 1rem;
 }

 .section-sub {
   color: var(--muted);
   max-width: 540px;
   line-height: 1.8;
   margin-bottom: 3.5rem;
 }

 /* ─── SERVICES ─── */
 #services {
   background: var(--bg2);
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
 }

 .service-card {
   background: var(--surface);
   padding: 2.5rem;
   position: relative;
   transition: background 0.3s;
   overflow: hidden;
 }

 .service-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), var(--accent2));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
 }

 .service-card:hover::after {
   transform: scaleX(1);
 }

 .service-card:hover {
   background: #16162a;
 }

 .service-icon {
   font-size: 1.6rem;
   margin-bottom: 1.2rem;
   display: block;
 }

 .service-title {
   font-family: var(--font-head);
   font-size: 1.05rem;
   font-weight: 700;
   margin-bottom: 0.8rem;
   color: var(--text);
 }

 .service-desc {
   font-size: 0.82rem;
   color: var(--muted);
   line-height: 1.8;
 }

 .service-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   margin-top: 1.5rem;
 }

 .tag {
   font-size: 0.68rem;
   padding: 0.2rem 0.6rem;
   border: 1px solid var(--border);
   color: var(--muted);
   border-radius: 2px;
   letter-spacing: 0.08em;
 }

 .tag-accent {
   border-color: rgba(0, 255, 136, 0.3);
   color: var(--accent);
 }

 .tag-purple {
   border-color: rgba(57, 211, 83, 0.3);
   color: var(--accent2);
 }

 .tag-green {
   border-color: rgba(168, 255, 120, 0.3);
   color: var(--green);
 }

 /* ─── STACK ─── */
 #stack {
   background: var(--bg);
 }

 .stack-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
 }

 .stack-block {
   background: var(--surface);
   border: 1px solid var(--border);
   padding: 2rem;
   border-radius: 2px;
 }

 .stack-block-title {
   font-family: var(--font-head);
   font-size: 0.8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: var(--accent);
   margin-bottom: 1.2rem;
   padding-bottom: 0.8rem;
   border-bottom: 1px solid var(--border);
 }

 .stack-items {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }

 .stack-item {
   background: var(--bg);
   border: 1px solid var(--border);
   padding: 0.35rem 0.75rem;
   font-size: 0.78rem;
   color: var(--text);
   border-radius: 2px;
   transition: all 0.2s;
 }

 .stack-item:hover {
   border-color: var(--accent);
   color: var(--accent);
 }

 /* ─── REALISATIONS ─── */
 #realisations {
   background: var(--bg2);
 }

 .projects-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
 }

 .project-card {
   background: var(--surface);
   border: 1px solid var(--border);
   padding: 2rem;
   border-radius: 2px;
   position: relative;
   transition: border-color 0.3s, transform 0.3s;
 }

 .project-card:hover {
   border-color: var(--accent);
   transform: translateY(-4px);
 }

 .project-sector {
   font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: var(--accent2);
   margin-bottom: 0.8rem;
 }

 .project-title {
   font-family: var(--font-head);
   font-size: 1.2rem;
   font-weight: 700;
   margin-bottom: 0.8rem;
 }

 .project-desc {
   font-size: 0.8rem;
   color: var(--muted);
   line-height: 1.8;
   margin-bottom: 1.5rem;
 }

 .project-stack {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
 }

 /* ─── SAAS ─── */
 #saas {
   background: var(--bg);
   position: relative;
   overflow: hidden;
 }

 .saas-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
 }

 .saas-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   background: rgba(0, 255, 136, 0.08);
   border: 1px solid rgba(0, 255, 136, 0.2);
   color: var(--accent);
   font-size: 0.72rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   padding: 0.4rem 1rem;
   border-radius: 100px;
   margin-bottom: 1.5rem;
 }

 .saas-badge::before {
   content: '';
   width: 6px;
   height: 6px;
   background: var(--accent);
   border-radius: 50%;
   animation: pulse 2s infinite;
 }

 @keyframes pulse {

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

   50% {
     opacity: 0.5;
     transform: scale(1.4);
   }
 }

 .saas-title {
   font-family: var(--font-head);
   font-size: clamp(1.6rem, 3vw, 2.5rem);
   font-weight: 800;
   letter-spacing: -0.02em;
   line-height: 1.15;
   margin-bottom: 1rem;
 }

 .saas-desc {
   color: var(--muted);
   line-height: 1.9;
   margin-bottom: 2rem;
 }

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

 .saas-features li {
   padding: 0.6rem 0;
   border-bottom: 1px solid var(--border);
   font-size: 0.82rem;
   color: var(--text);
   display: flex;
   align-items: center;
   gap: 0.8rem;
 }

 .saas-features li::before {
   content: '→';
   color: var(--accent);
   font-size: 0.8rem;
 }

 .saas-visual {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: 2rem;
   position: relative;
   min-height: 320px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .saas-visual-bar {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 2px;
   height: 14px;
   position: relative;
   overflow: hidden;
 }

 .saas-visual-bar::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   background: linear-gradient(90deg, var(--accent), var(--accent2));
   border-radius: 2px;
   animation: barload 3s ease-in-out infinite alternate;
 }

 .saas-visual-bar:nth-child(1)::after {
   width: 75%;
   animation-delay: 0s;
 }

 .saas-visual-bar:nth-child(2)::after {
   width: 55%;
   animation-delay: 0.4s;
 }

 .saas-visual-bar:nth-child(3)::after {
   width: 88%;
   animation-delay: 0.8s;
 }

 .saas-visual-bar:nth-child(4)::after {
   width: 40%;
   animation-delay: 1.2s;
 }

 .saas-visual-bar:nth-child(5)::after {
   width: 65%;
   animation-delay: 1.6s;
 }

 @keyframes barload {
   from {
     opacity: 0.5;
   }

   to {
     opacity: 1;
   }
 }

 .saas-name {
   font-family: var(--font-head);
   font-size: 1.4rem;
   font-weight: 800;
   color: var(--accent);
   text-align: center;
   margin-top: auto;
   padding-top: 1.5rem;
   border-top: 1px solid var(--border);
 }

 /* ─── APROPOS ─── */
 #apropos {
   background: var(--bg2);
 }

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

 .about-text p {
   color: var(--muted);
   line-height: 1.9;
   margin-bottom: 1.2rem;
   font-size: 0.88rem;
 }

 .about-text p strong {
   color: var(--text);
 }

 .about-values {
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
 }

 .value-item {
   background: var(--surface);
   border: 1px solid var(--border);
   border-left: 3px solid var(--accent);
   padding: 1.2rem 1.5rem;
 }

 .value-item.v2 {
   border-left-color: var(--accent2);
 }

 .value-item.v3 {
   border-left-color: var(--accent);
 }

 .value-title {
   font-family: var(--font-head);
   font-size: 0.9rem;
   font-weight: 700;
   margin-bottom: 0.4rem;
 }

 .value-desc {
   font-size: 0.78rem;
   color: var(--muted);
   line-height: 1.7;
 }

 /* ─── CONTACT ─── */
 #contact {
   background: var(--bg);
 }

 .contact-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: start;
 }

 .contact-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .form-group {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
 }

 .form-group label {
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--muted);
 }

 .form-group input,
 .form-group textarea,
 .form-group select {
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
   padding: 0.85rem 1rem;
   font-family: var(--font-mono);
   font-size: 0.85rem;
   border-radius: 2px;
   outline: none;
   transition: border-color 0.2s;
 }

 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
   border-color: var(--accent);
 }

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

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

 .contact-info {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }

 .contact-item {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
 }

 .contact-icon {
   width: 40px;
   height: 40px;
   background: var(--surface);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   flex-shrink: 0;
   border-radius: 2px;
 }

 .contact-item-label {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--muted);
   margin-bottom: 0.2rem;
 }

 .contact-item-value {
   font-size: 0.88rem;
   color: var(--text);
 }

 .contact-item-value a {
   color: var(--accent);
   text-decoration: none;
 }

 /* ─── FOOTER ─── */
 footer {
   background: var(--surface);
   border-top: 1px solid var(--border);
   padding: 2rem 4rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .footer-logo {
   font-family: var(--font-head);
   font-weight: 800;
   font-size: 1rem;
   color: var(--text);
 }

 .footer-logo span {
   color: var(--accent);
 }

 .footer-copy {
   font-size: 0.72rem;
   color: var(--muted);
 }

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

 .footer-links a {
   font-size: 0.72rem;
   color: var(--muted);
   text-decoration: none;
   transition: color 0.2s;
 }

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

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

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

 .hero-tag {
   animation: fadeUp 0.6s ease both;
 }

 .hero h1 {
   animation: fadeUp 0.6s 0.15s ease both;
 }

 .hero-sub {
   animation: fadeUp 0.6s 0.3s ease both;
 }

 .hero-actions {
   animation: fadeUp 0.6s 0.45s ease both;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 900px) {
   nav {
     padding: 1rem 1.5rem;
   }

   .nav-links {
     display: none;
   }

   section {
     padding: 4rem 1.5rem;
   }

   .hero {
     padding: 7rem 1.5rem 3rem;
   }

   .stats {
     grid-template-columns: repeat(2, 1fr);
     margin: 0 1.5rem;
   }

   .services-grid {
     grid-template-columns: 1fr;
   }

   .stack-grid {
     grid-template-columns: 1fr;
   }

   .projects-grid {
     grid-template-columns: 1fr;
   }

   .saas-inner {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

   .about-inner {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

   .contact-inner {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

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

   footer {
     flex-direction: column;
     gap: 1rem;
     text-align: center;
     padding: 2rem 1.5rem;
   }
 }