/* ============================================
   CarleonTech v4 — Dark Bold
   ============================================ */
:root {
    --bg:      #06080f;
    --bg2:     #0a0e1a;
    --card:    #0d1221;
    --card-h:  #111830;
    --border:  rgba(255,255,255,.06);
    --border-h:rgba(255,255,255,.12);
    --text:    #f0f2f5;
    --text-s:  #8892a4;
    --text-d:  #4a5568;
    --grad1:   #3b82f6;
    --grad2:   #8b5cf6;
    --green:   #22c55e;
    --amber:   #f59e0b;
    --font:    'Inter', -apple-system, sans-serif;
    --mono:    'JetBrains Mono', monospace;
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font);background:var(--bg);color:var(--text-s);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Grain */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}

a{color:var(--text-s);text-decoration:none;transition:color .2s}
a:hover{color:var(--text)}
strong{color:var(--text);font-weight:700}
.container{max-width:1140px;margin:0 auto;padding:0 32px}

/* ---- Shared ---- */
.label{
    font-family:var(--mono);font-size:.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:3px;
    background:linear-gradient(135deg,var(--grad1),var(--grad2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    display:block;margin-bottom:14px;
}
.section-title{
    font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;
    color:var(--text);letter-spacing:-.04em;line-height:1.1;
    margin-bottom:56px;
}
.section-title--big{font-size:clamp(2rem,5vw,3.2rem)}

/* Gradient divider */
.divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--grad1) 30%,var(--grad2) 70%,transparent 100%);opacity:.2}

/* ============================================
   NAV
   ============================================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(6,8,15,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav--scrolled{border-bottom-color:var(--border);background:rgba(6,8,15,.92)}
.nav__inner{max-width:1140px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:60px}
.nav__logo{font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--text);letter-spacing:-.02em}
.nav__logo span{color:var(--text-d);font-weight:400}
.nav__links{display:flex;gap:32px;align-items:center}
.nav__links a{color:var(--text-d);font-size:.82rem;font-weight:500;transition:color .2s}
.nav__links a:hover{color:var(--text)}
.nav__cta{color:var(--text-s)!important;padding:6px 18px;border-radius:6px;background:linear-gradient(135deg,var(--grad1),var(--grad2));color:var(--bg)!important;font-weight:600!important;transition:opacity .2s!important}
.nav__cta:hover{opacity:.85!important}
.nav__lang{font-family:var(--mono);font-size:.62rem!important;font-weight:600!important;padding:4px 10px;border:1px solid var(--border);border-radius:4px;color:var(--text-d)!important;letter-spacing:.8px;transition:border-color .2s!important}
.nav__lang:hover{border-color:var(--border-h);color:var(--text-s)!important}

.nav__burger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.nav__burger span{display:block;width:20px;height:1.5px;background:var(--text-s);margin:5px 0;transition:transform .3s,opacity .3s}
.nav__burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav__burger.active span:nth-child(2){opacity:0}
.nav__burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ============================================
   HERO
   ============================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:100px 0 60px}
.hero__bg{position:absolute;inset:0}
.hero__grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse 55% 50% at 50% 30%,black 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 30%,black 10%,transparent 70%)}
.hero__glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse,rgba(59,130,246,.12) 0%,rgba(139,92,246,.06) 40%,transparent 65%);filter:blur(50px)}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero__content{max-width:540px}

.hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:500;color:var(--text-d);padding:6px 14px 6px 10px;background:var(--card);border:1px solid var(--border);border-radius:100px;margin-bottom:28px}
.hero__badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.hero__title{font-size:clamp(2.6rem,5.5vw,4.2rem);font-weight:900;line-height:1.04;color:var(--text);letter-spacing:-.05em;margin-bottom:22px}
.hero__sub{font-size:1.05rem;color:var(--text-d);line-height:1.75;margin-bottom:36px}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:.85rem;font-weight:600;padding:13px 28px;border:none;border-radius:8px;cursor:pointer;transition:all .2s;text-decoration:none}
.btn--grad{background:linear-gradient(135deg,var(--grad1),var(--grad2));color:#fff}
.btn--grad:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 28px rgba(59,130,246,.25);color:#fff}
.btn--ghost{color:var(--text-s);background:transparent;border:1px solid var(--border-h)}
.btn--ghost:hover{background:var(--card);border-color:var(--text-d);color:var(--text)}
.btn--full{width:100%}

/* ============================================
   TERMINAL
   ============================================ */
.terminal{position:relative;background:#080c18;border:1px solid var(--border-h);border-radius:16px;overflow:hidden;font-family:var(--mono);font-size:.8rem;box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04)}
.terminal__glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;height:80%;background:radial-gradient(ellipse,rgba(59,130,246,.1) 0%,rgba(139,92,246,.06) 50%,transparent 70%);filter:blur(30px);pointer-events:none}
.terminal__chrome{position:relative;display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border)}
.terminal__dots{display:flex;gap:6px}
.terminal__dots span{width:10px;height:10px;border-radius:50%}
.terminal__dots span:nth-child(1){background:#f87171}
.terminal__dots span:nth-child(2){background:#fbbf24}
.terminal__dots span:nth-child(3){background:#34d399}
.terminal__title{font-size:.7rem;color:var(--text-d);margin-left:auto}
.terminal__body{position:relative;padding:20px;line-height:2}
.terminal__line{opacity:0;transform:translateY(4px);animation:termIn .35s ease forwards}
.terminal__line--d1{animation-delay:.25s}
.terminal__line--d2{animation-delay:.45s}
.terminal__line--d3{animation-delay:.6s}
.terminal__line--d4{animation-delay:.75s}
.terminal__line--d5{animation-delay:.9s}
.terminal__line--d6{animation-delay:1.05s}
.terminal__line--d7{animation-delay:1.2s}
.terminal__line--d8{animation-delay:1.45s}
.terminal__line--d9{animation-delay:1.65s}
@keyframes termIn{to{opacity:1;transform:translateY(0)}}
.t-dim{color:var(--text-d)}.t-cmd{color:var(--text)}.t-key{color:var(--grad1)}.t-val{color:var(--text-s)}.t-num{color:var(--amber);font-weight:600}.t-ok{color:var(--green);font-weight:600}
.terminal__cursor{display:inline-block;width:8px;height:16px;background:var(--text-s);vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================
   LOGOS
   ============================================ */
.logos{padding:48px 0 56px}
.logos__label{font-size:.68rem;font-weight:500;color:var(--text-d);text-transform:uppercase;letter-spacing:2.5px;text-align:center;margin-bottom:24px}
.logos__strip{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--text-d);opacity:.35}
.logos__strip span{transition:opacity .3s}
.logos__strip span:hover{opacity:1.6}

/* ============================================
   SERVICES
   ============================================ */
.services{padding:120px 0}
.services__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scard{position:relative;background:var(--card);border:1px solid var(--border);border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--grad1),var(--grad2)) 1;border-image-slice:0 0 0 1;border-radius:14px;padding:36px 32px;overflow:hidden;transition:background .3s,border-color .3s}
.scard:hover{background:var(--card-h);border-color:var(--border-h)}
.scard__watermark{position:absolute;top:12px;right:20px;font-family:var(--mono);font-size:4rem;font-weight:900;line-height:1;color:rgba(255,255,255,.025);pointer-events:none;transition:color .3s}
.scard:hover .scard__watermark{color:rgba(59,130,246,.06)}
.scard h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-.01em;position:relative}
.scard p{font-size:.88rem;color:var(--text-d);line-height:1.65;position:relative}

/* Fix border-image + border-radius conflict */
.scard{border-left:none;position:relative}
.scard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--grad1),var(--grad2));border-radius:14px 0 0 14px}

/* ============================================
   NUMBERS
   ============================================ */
.numbers{padding:80px 0}
.numbers__row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.numbers__big{font-family:var(--mono);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;color:var(--text);letter-spacing:-.04em;display:inline}
.numbers__plus{font-family:var(--mono);font-size:clamp(1.4rem,3vw,2rem);color:var(--text-d)}
.numbers__big--green{color:var(--green)}
.numbers__label{display:block;color:var(--text-d);font-size:.72rem;margin-top:8px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}

/* ============================================
   PROCESS — timeline
   ============================================ */
.process{padding:120px 0}
.process__timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.process__line{position:absolute;top:14px;left:5%;right:5%;height:2px;background:linear-gradient(90deg,var(--grad1),var(--grad2));opacity:.2;border-radius:2px}
.process__step{position:relative;text-align:center}
.process__dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--grad1),var(--grad2));margin:8px auto 24px;position:relative;z-index:1;box-shadow:0 0 12px rgba(59,130,246,.3)}
.process__num{font-family:var(--mono);font-size:.6rem;font-weight:600;color:var(--grad1);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:8px}
.process__content h3{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.process__content p{font-size:.82rem;color:var(--text-d);line-height:1.6}

/* ============================================
   CASE STUDIES
   ============================================ */
.cases{padding:120px 0}
.casecard{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:start;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:44px 44px 40px;margin-bottom:16px;transition:border-color .3s}
.casecard:hover{border-color:var(--border-h)}
.casecard__client{font-family:var(--mono);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(135deg,var(--grad1),var(--grad2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:12px}
.casecard__left h3{font-size:1.35rem;font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:12px;line-height:1.25}
.casecard__left p{font-size:.9rem;color:var(--text-d);line-height:1.7;margin-bottom:16px;max-width:580px}
.casecard__tags{display:flex;gap:6px}
.casecard__tags span{font-size:.68rem;font-weight:500;color:var(--text-d);padding:4px 12px;border:1px solid var(--border);border-radius:100px}
.casecard__stats{display:flex;flex-direction:column;gap:20px;padding-left:32px;border-left:1px solid var(--border)}
.casecard__stat-num{font-family:var(--mono);font-size:1.8rem;font-weight:800;color:var(--text);letter-spacing:-.03em;display:block;line-height:1.1}
.casecard__stat-label{font-size:.72rem;color:var(--text-d);text-transform:uppercase;letter-spacing:.5px}

/* ============================================
   ABOUT
   ============================================ */
.about{padding:120px 0}
.about__layout{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:start}
.about__text p{color:var(--text-d);margin-bottom:20px;font-size:.95rem;line-height:1.8}
.about__facts{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:14px;overflow:hidden}
.about__fact{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:var(--card);transition:background .3s}
.about__fact:hover{background:var(--card-h)}
.about__fact-key{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--text-d);text-transform:uppercase;letter-spacing:1px}
.about__fact-val{font-size:.9rem;font-weight:600;color:var(--text)}

/* ============================================
   TECH
   ============================================ */
.tech{padding:80px 0 120px}
.tech__pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--text-d);padding:10px 22px;background:var(--card);border:1px solid var(--border);border-radius:100px;transition:all .25s;cursor:default}
.pill:hover{border-color:var(--border-h);color:var(--text-s);background:var(--card-h)}

/* ============================================
   CONTACT
   ============================================ */
.contact{padding:120px 0}
.contact__layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact__sub{color:var(--text-d);font-size:1rem;margin-bottom:24px;line-height:1.7}
.contact__link{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-d);transition:color .2s;margin-top:4px}
.contact__link:hover{color:var(--text)}
.contact__link svg{flex-shrink:0}
.form{display:flex;flex-direction:column;gap:12px}
.form input,.form textarea{width:100%;padding:13px 16px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font);font-size:.88rem;transition:border-color .25s,background .25s;outline:none}
.form input::placeholder,.form textarea::placeholder{color:var(--text-d)}
.form input:focus,.form textarea:focus{border-color:var(--border-h);background:var(--card-h)}
.form textarea{resize:vertical;min-height:120px}
.form .btn{margin-top:4px}
.alert{margin-bottom:12px;padding:12px 16px;border-radius:8px;font-size:.85rem}
.alert--ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:var(--green)}
.alert--err{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.15);color:#f87171}

/* ============================================
   FOOTER
   ============================================ */
.footer{padding:40px 0;border-top:1px solid var(--border)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.75rem;color:var(--text-d)}

/* ============================================
   FADE IN
   ============================================ */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}
.services__grid .scard:nth-child(2).fade-in{transition-delay:.08s}
.services__grid .scard:nth-child(3).fade-in{transition-delay:.16s}
.services__grid .scard:nth-child(4).fade-in{transition-delay:.24s}
.process__step:nth-child(3).fade-in{transition-delay:.08s}
.process__step:nth-child(4).fade-in{transition-delay:.16s}
.process__step:nth-child(5).fade-in{transition-delay:.24s}
.cases .casecard:nth-child(3).fade-in{transition-delay:.08s}
.cases .casecard:nth-child(4).fade-in{transition-delay:.16s}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
    .hero__inner{grid-template-columns:1fr;gap:48px}
    .hero__content{max-width:100%}
    .contact__layout,.about__layout{grid-template-columns:1fr;gap:48px}
    .casecard{grid-template-columns:1fr}
    .casecard__stats{flex-direction:row;gap:32px;padding-left:0;border-left:none;border-top:1px solid var(--border);padding-top:20px}
}
@media(max-width:768px){
    .container{padding:0 20px}
    .nav__inner{padding:0 20px}
    .nav__links{position:fixed;top:60px;left:0;width:100%;padding:24px 20px;background:rgba(6,8,15,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;gap:18px;align-items:center;border-bottom:1px solid var(--border);transform:translateY(-120%);transition:transform .3s ease}
    .nav__links.open{transform:translateY(0)}
    .nav__burger{display:block}
    .services__grid{grid-template-columns:1fr}
    .numbers__row{grid-template-columns:1fr 1fr;gap:24px}
    .process__timeline{grid-template-columns:1fr 1fr}
    .process__line{display:none}
    .services,.process,.cases,.about,.contact{padding:80px 0}
    .tech{padding:60px 0 80px}
}
@media(max-width:480px){
    .process__timeline{grid-template-columns:1fr}
    .hero__title{font-size:clamp(2rem,9vw,2.8rem)}
    .casecard{padding:28px 24px}
    .numbers__row{grid-template-columns:1fr 1fr}
}