@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
:root {
      --bg-0:          #07070e;
      --bg-1:          #0d0d18;
      --bg-2:          #12121f;
      --text-1:        #f0f0fa;
      --text-2:        #8a8aaa;
      --text-3:        #50506a;
      --accent-i:      #6366f1;
      --accent-v:      #8b5cf6;
      --accent-g:      #d4a843;
      --grad:          linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d4a843 100%);
      --grad-subtle:   linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));
      --glass:         rgba(255,255,255,.045);
      --glass-b:       rgba(255,255,255,.08);
      --glow:          0 0 48px rgba(99,102,241,.22);
      --card-shadow:   0 8px 40px rgba(0,0,0,.55);
      --r:             16px;
      --r-sm:          8px;
      --r-lg:          24px;
      --ease:          cubic-bezier(.4,0,.2,1);
      --t:             all .3s var(--ease);
      --t-slow:        all .6s var(--ease);
    }

    /* ============================================================
       RESET
       ============================================================ */
    *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; scroll-padding-top:76px; }
    body {
      font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
      background:var(--bg-0); color:var(--text-1);
      overflow-x:hidden; line-height:1.6;
    }
    ::-webkit-scrollbar        { width:5px; }
    ::-webkit-scrollbar-track  { background:var(--bg-0); }
    ::-webkit-scrollbar-thumb  { background:var(--accent-i); border-radius:3px; }
    ::selection                { background:rgba(99,102,241,.3); }
    img,svg { display:block; max-width:100%; }
    button,input,select,textarea { font-family:inherit; }

    /* ============================================================
       LOADER
       ============================================================ */
    #loader {
      position:fixed; inset:0; z-index:9999;
      background:var(--bg-0);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
      transition:opacity .7s ease, visibility .7s ease;
    }
    #loader.out { opacity:0; visibility:hidden; }
    .ld-logo {
      font-size:2.6rem; font-weight:800; letter-spacing:-.05em;
      background:var(--grad); -webkit-background-clip:text;
      -webkit-text-fill-color:transparent; background-clip:text;
      animation:lPulse 1.6s ease-in-out infinite;
    }
    .ld-track {
      width:200px; height:2px;
      background:rgba(255,255,255,.08); border-radius:1px; overflow:hidden;
    }
    .ld-fill {
      height:100%; background:var(--grad); border-radius:1px;
      animation:lFill 2s ease forwards;
    }
    @keyframes lFill   { 0%{width:0} 100%{width:100%} }
    @keyframes lPulse  { 0%,100%{opacity:1} 50%{opacity:.35} }

    /* ============================================================
       UTILS
       ============================================================ */
    .container { max-width:1280px; margin:0 auto; padding:0 36px; }
    .section   { padding:120px 0; }

    .grad-text {
      background:var(--grad);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .section-tag {
      display:inline-block;
      font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
      color:var(--accent-i); background:rgba(99,102,241,.1);
      border:1px solid rgba(99,102,241,.2); padding:5px 14px; border-radius:50px;
      margin-bottom:18px;
    }
    .section-title {
      font-size:clamp(2rem,5vw,3.6rem); font-weight:800;
      line-height:1.06; letter-spacing:-.034em; margin-bottom:18px;
    }
    .section-sub {
      font-size:1.05rem; color:var(--text-2); max-width:540px; line-height:1.75;
    }

    /* Scroll reveal */
    .rv { opacity:0; transform:translateY(38px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
    .rv.in { opacity:1; transform:none; }
    .rv.d1 { transition-delay:.1s; } .rv.d2 { transition-delay:.2s; }
    .rv.d3 { transition-delay:.3s; } .rv.d4 { transition-delay:.4s; }

    /* Glass card */
    .glass-card {
      background:var(--glass); border:1px solid var(--glass-b);
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      border-radius:var(--r); transition:var(--t);
    }
    .glass-card:hover {
      background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
      transform:translateY(-4px); box-shadow:var(--card-shadow);
    }

    /* Buttons */
    .btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:13px 28px; border-radius:50px;
      font-size:.92rem; font-weight:600; cursor:pointer;
      transition:var(--t); text-decoration:none; border:none;
    }
    .btn-p { background:var(--grad); color:#fff; box-shadow:0 4px 24px rgba(99,102,241,.28); }
    .btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(99,102,241,.45); }
    .btn-s { background:transparent; color:var(--text-1); border:1px solid var(--glass-b); }
    .btn-s:hover { background:var(--glass); border-color:rgba(255,255,255,.18); transform:translateY(-2px); }

    /* ============================================================
       NAVBAR
       ============================================================ */
    #navbar {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      padding:22px 0; transition:var(--t);
    }
    #navbar.stuck {
      background:rgba(7,7,14,.82);
      backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
      border-bottom:1px solid var(--glass-b); padding:13px 0;
    }
    .nav-wrap {
      max-width:1280px; margin:0 auto; padding:0 36px;
      display:flex; align-items:center; justify-content:space-between;
    }
    .nav-logo {
      font-size:1.6rem; font-weight:800; letter-spacing:-.05em;
      text-decoration:none; background:var(--grad);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .nav-links { display:flex; align-items:center; gap:4px; list-style:none; }
    .nav-links a {
      color:var(--text-2); text-decoration:none;
      font-size:.875rem; font-weight:500;
      padding:8px 15px; border-radius:var(--r-sm); transition:var(--t);
    }
    .nav-links a:hover { color:var(--text-1); background:var(--glass); }
    .nav-cta { background:var(--grad) !important; color:#fff !important; border-radius:50px !important; }
    .nav-cta:hover { opacity:.88; transform:translateY(-1px); box-shadow:var(--glow) !important; }
    .burger {
      display:none; flex-direction:column; gap:5px;
      cursor:pointer; padding:4px; background:none; border:none;
    }
    .burger span { display:block; width:24px; height:2px; background:var(--text-1); border-radius:1px; transition:var(--t); }

    /* ============================================================
       MOBILE MENU
       ============================================================ */
    .m-overlay {
      display:none; position:fixed; inset:0;
      background:rgba(0,0,0,.75); backdrop-filter:blur(5px); z-index:1998;
    }
    .m-overlay.on { display:block; }
    .m-menu {
      position:fixed; top:0; right:0; bottom:0;
      width:min(320px,90vw); z-index:1999;
      background:var(--bg-1); border-left:1px solid var(--glass-b);
      display:flex; flex-direction:column; padding:80px 32px 32px;
      gap:4px; transform:translateX(100%);
      transition:transform .4s var(--ease);
    }
    .m-menu.on { transform:translateX(0); }
    .m-menu a {
      display:block; padding:14px 0; color:var(--text-2);
      text-decoration:none; font-size:1.05rem; font-weight:500;
      border-bottom:1px solid var(--glass-b); transition:color .2s;
    }
    .m-menu a:hover { color:var(--text-1); }
    .m-close {
      position:absolute; top:20px; right:20px;
      width:40px; height:40px; border-radius:50%;
      background:var(--glass); border:1px solid var(--glass-b);
      color:var(--text-1); cursor:pointer; font-size:1rem;
      display:flex; align-items:center; justify-content:center;
    }

    /* ============================================================
       HERO
       ============================================================ */
    #hero {
      position:relative; min-height:100vh;
      display:flex; align-items:center; overflow:hidden;
    }
    #c { position:absolute; inset:0; width:100%; height:100%; }
    .h-glow {
      position:absolute; border-radius:50%;
      filter:blur(130px); pointer-events:none;
    }
    .h-g1 { width:640px; height:640px; top:-220px; left:-120px; background:radial-gradient(circle,rgba(99,102,241,.28) 0%,transparent 70%); }
    .h-g2 { width:560px; height:560px; bottom:-200px; right:-80px;  background:radial-gradient(circle,rgba(212,168,67,.18)  0%,transparent 70%); }
    .hero-inner {
      position:relative; z-index:2;
      max-width:1280px; margin:0 auto;
      padding:0 36px; padding-top:110px;
    }
    .h-badge {
      display:inline-flex; align-items:center; gap:8px;
      font-size:.78rem; font-weight:700; color:var(--accent-g);
      background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.22);
      padding:6px 16px; border-radius:50px; margin-bottom:28px;
      animation:fuUp .8s var(--ease) .2s both;
    }
    .h-badge::before {
      content:''; width:6px; height:6px;
      background:var(--accent-g); border-radius:50%;
      animation:blink 1.6s ease infinite;
    }
    .h-title {
      font-size:clamp(3.2rem,8.5vw,7rem); font-weight:800;
      line-height:1.0; letter-spacing:-.04em;
      margin-bottom:24px; animation:fuUp .8s var(--ease) .4s both;
    }
    .h-sub {
      font-size:clamp(1rem,2vw,1.25rem); color:var(--text-2);
      max-width:500px; line-height:1.8;
      margin-bottom:40px; animation:fuUp .8s var(--ease) .6s both;
    }
    .h-actions { display:flex; gap:14px; flex-wrap:wrap; animation:fuUp .8s var(--ease) .8s both; }
    .h-stats {
      display:flex; gap:52px; flex-wrap:wrap;
      margin-top:80px; padding-top:40px;
      border-top:1px solid var(--glass-b);
      animation:fuUp .8s var(--ease) 1s both;
    }
    .h-stat-val {
      font-size:2.1rem; font-weight:800; letter-spacing:-.03em;
      background:var(--grad); -webkit-background-clip:text;
      -webkit-text-fill-color:transparent; background-clip:text;
    }
    .h-stat-lbl { font-size:.82rem; color:var(--text-2); margin-top:3px; }
    .scroll-ind {
      position:absolute; bottom:36px; left:50%;
      transform:translateX(-50%); display:flex;
      flex-direction:column; align-items:center; gap:8px;
      z-index:2; animation:fadeIn 1s var(--ease) 1.6s both;
    }
    .scroll-ind span { font-size:.7rem; color:var(--text-3); letter-spacing:.12em; text-transform:uppercase; }
    .scroll-line {
      width:1px; height:44px;
      background:linear-gradient(to bottom,var(--text-3),transparent);
      animation:scDrop 1.6s ease-in-out infinite;
    }

    @keyframes fuUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    @keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes scDrop {
      0%   { transform:scaleY(0); transform-origin:top; }
      50%  { transform:scaleY(1); transform-origin:top; }
      51%  { transform:scaleY(1); transform-origin:bottom; }
      100% { transform:scaleY(0); transform-origin:bottom; }
    }

    /* ============================================================
       ABOUT
       ============================================================ */
    #about { background:var(--bg-1); position:relative; overflow:hidden; }
    #about::before {
      content:''; position:absolute; top:-1px; left:0; right:0; height:90px;
      background:var(--bg-0); clip-path:ellipse(60% 100% at 50% 0%);
    }
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
    .about-visual { position:relative; }
    .about-img {
      width:100%; aspect-ratio:4/3;
      background:var(--grad-subtle);
      border-radius:var(--r-lg); border:1px solid var(--glass-b);
      display:flex; align-items:center; justify-content:center;
      font-size:5rem; overflow:hidden; position:relative;
    }
    .about-img::after {
      content:''; position:absolute; inset:0;
      background:var(--grad); opacity:.04; border-radius:var(--r-lg);
    }
    .ab-badge {
      position:absolute; bottom:-22px; right:-22px;
      background:var(--grad); padding:22px 26px;
      border-radius:var(--r); text-align:center;
      box-shadow:0 10px 36px rgba(99,102,241,.32);
    }
    .ab-num { font-size:2.1rem; font-weight:800; color:#fff; line-height:1; }
    .ab-txt { font-size:.72rem; color:rgba(255,255,255,.8); margin-top:4px; }
    .mv-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:38px; }
    .mv-card {
      padding:22px; border-radius:var(--r);
      background:var(--glass); border:1px solid var(--glass-b); transition:var(--t);
    }
    .mv-card:hover { border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.06); }
    .mv-icon { font-size:1.4rem; margin-bottom:10px; }
    .mv-t { font-size:.95rem; font-weight:700; margin-bottom:6px; }
    .mv-d { font-size:.85rem; color:var(--text-2); line-height:1.6; }

    /* Timeline */
    .tl { margin-top:80px; }
    .tl-h { font-size:1.5rem; font-weight:700; text-align:center; margin-bottom:44px; }
    .tl-track {
      position:relative; display:flex;
      justify-content:space-between; align-items:flex-start; padding:0 16px;
    }
    .tl-track::before {
      content:''; position:absolute;
      top:19px; left:16px; right:16px;
      height:2px; background:var(--grad); z-index:0;
    }
    .tl-item {
      flex:1; display:flex; flex-direction:column;
      align-items:center; gap:14px; position:relative; z-index:1;
    }
    .tl-dot {
      width:38px; height:38px; border-radius:50%;
      background:var(--bg-1); border:2px solid var(--accent-i);
      display:flex; align-items:center; justify-content:center;
      font-size:.72rem; font-weight:700; color:var(--accent-i);
      transition:var(--t);
    }
    .tl-item:hover .tl-dot { background:var(--accent-i); color:#fff; box-shadow:0 0 22px rgba(99,102,241,.5); }
    .tl-c { text-align:center; padding:0 4px; }
    .tl-y { font-size:.78rem; font-weight:700; color:var(--accent-g); margin-bottom:3px; }
    .tl-e { font-size:.85rem; font-weight:600; margin-bottom:2px; }
    .tl-d { font-size:.75rem; color:var(--text-3); }

    /* ============================================================
       SERVICES
       ============================================================ */
    #services { position:relative; }
    .svc-hd {
      display:flex; justify-content:space-between;
      align-items:flex-end; gap:40px; margin-bottom:56px;
    }
    .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .svc-card {
      padding:36px 30px; border-radius:var(--r-lg);
      background:var(--glass); border:1px solid var(--glass-b);
      position:relative; overflow:hidden; cursor:default;
      transition:all .45s var(--ease);
    }
    .svc-card::before {
      content:''; position:absolute; inset:0;
      background:var(--grad); opacity:0; transition:opacity .4s ease; z-index:0;
    }
    .svc-card:hover::before { opacity:.06; }
    .svc-card:hover {
      border-color:rgba(99,102,241,.38);
      transform:translateY(-9px);
      box-shadow:0 24px 64px rgba(0,0,0,.42), 0 0 44px rgba(99,102,241,.1);
    }
    .svc-card > * { position:relative; z-index:1; }
    .svc-num {
      position:absolute; top:22px; right:22px; z-index:1;
      font-size:4.5rem; font-weight:800; line-height:1;
      color:rgba(255,255,255,.03); transition:var(--t);
    }
    .svc-card:hover .svc-num { color:rgba(99,102,241,.07); }
    .svc-ico {
      width:54px; height:54px; border-radius:14px;
      background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.2);
      display:flex; align-items:center; justify-content:center;
      font-size:1.35rem; margin-bottom:22px; transition:var(--t);
    }
    .svc-card:hover .svc-ico {
      background:var(--grad); border-color:transparent;
      box-shadow:0 8px 22px rgba(99,102,241,.32);
    }
    .svc-t { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
    .svc-d { font-size:.88rem; color:var(--text-2); line-height:1.7; margin-bottom:18px; }
    .svc-lk {
      font-size:.83rem; color:var(--accent-i); font-weight:600;
      display:flex; align-items:center; gap:6px;
      text-decoration:none; transition:gap .2s;
    }
    .svc-lk:hover { gap:10px; }

    /* ============================================================
       PORTFOLIO
       ============================================================ */
    #portfolio { background:var(--bg-1); position:relative; overflow:hidden; }
    #portfolio::before {
      content:''; position:absolute; top:-1px; left:0; right:0; height:90px;
      background:var(--bg-0); clip-path:ellipse(60% 100% at 50% 0%);
    }
    .pf-hd {
      display:flex; justify-content:space-between;
      align-items:flex-end; gap:40px; margin-bottom:48px;
    }
    .pf-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
    .f-btn {
      padding:7px 20px; border-radius:50px;
      border:1px solid var(--glass-b); background:transparent;
      color:var(--text-2); font-size:.83rem; font-weight:500;
      cursor:pointer; transition:var(--t);
    }
    .f-btn.on,.f-btn:hover { background:var(--grad); border-color:transparent; color:#fff; }
    .pf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .pf-card {
      border-radius:var(--r); overflow:hidden;
      position:relative; cursor:pointer; aspect-ratio:4/3;
    }
    .pf-bg {
      width:100%; height:100%; transition:transform .6s var(--ease);
      display:flex; align-items:center; justify-content:center; font-size:3.2rem;
    }
    .pf-card:hover .pf-bg { transform:scale(1.08); }
    .pf-ov {
      position:absolute; inset:0;
      background:linear-gradient(to top,rgba(7,7,14,.96) 0%,rgba(7,7,14,.4) 55%,transparent 100%);
      opacity:0; transition:opacity .4s ease;
      display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
    }
    .pf-card:hover .pf-ov { opacity:1; }
    .pf-tag {
      font-size:.72rem; font-weight:700; text-transform:uppercase;
      letter-spacing:.1em; color:var(--accent-g); margin-bottom:7px;
      transform:translateY(10px); transition:transform .4s ease .05s;
    }
    .pf-card:hover .pf-tag { transform:none; }
    .pf-t {
      font-size:1.15rem; font-weight:700;
      transform:translateY(10px); transition:transform .4s ease .1s;
    }
    .pf-card:hover .pf-t { transform:none; }
    .pf-d {
      font-size:.83rem; color:var(--text-2); margin-top:5px;
      transform:translateY(10px); transition:transform .4s ease .15s;
    }
    .pf-card:hover .pf-d { transform:none; }
    .bg1{background:linear-gradient(135deg,#1a1a2e,#16213e)}
    .bg2{background:linear-gradient(135deg,#0f3460,#533483)}
    .bg3{background:linear-gradient(135deg,#1c1c1c,#2d2b2b)}
    .bg4{background:linear-gradient(135deg,#1b1b2f,#2e294e)}
    .bg5{background:linear-gradient(135deg,#181a14,#2c2810)}
    .bg6{background:linear-gradient(135deg,#0d1117,#161b22)}

    /* ============================================================
       TESTIMONIALS
       ============================================================ */
    #testimonials { position:relative; overflow:hidden; }
    .t-bg {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:900px; height:420px;
      background:radial-gradient(ellipse,rgba(99,102,241,.09) 0%,transparent 70%);
      pointer-events:none;
    }
    .t-hd { text-align:center; margin-bottom:56px; }
    .t-slider { overflow:hidden; }
    .t-track { display:flex; transition:transform .52s var(--ease); }
    .t-card { min-width:100%; padding:0 80px; text-align:center; }
    .t-quote {
      font-size:clamp(1.05rem,2.5vw,1.45rem);
      font-weight:500; line-height:1.75; color:var(--text-1);
      margin-bottom:40px; position:relative;
    }
    .t-quote::before {
      content:'"'; position:absolute;
      top:-44px; left:50%; transform:translateX(-50%);
      font-size:7rem; line-height:1;
      background:var(--grad); -webkit-background-clip:text;
      -webkit-text-fill-color:transparent; background-clip:text;
      opacity:.25;
    }
    .t-author { display:flex; flex-direction:column; align-items:center; gap:10px; }
    .t-avatar {
      width:64px; height:64px; border-radius:50%;
      background:var(--grad); display:flex; align-items:center; justify-content:center;
      font-size:1.4rem; font-weight:700; color:#fff;
      border:2px solid rgba(255,255,255,.18);
    }
    .t-stars { color:var(--accent-g); font-size:.88rem; margin-bottom:2px; }
    .t-name  { font-size:.98rem; font-weight:700; }
    .t-role  { font-size:.82rem; color:var(--text-3); }
    .t-nav {
      display:flex; justify-content:center; align-items:center;
      gap:14px; margin-top:48px;
    }
    .t-nav-btn {
      width:44px; height:44px; border-radius:50%;
      background:var(--glass); border:1px solid var(--glass-b);
      color:var(--text-1); cursor:pointer; transition:var(--t);
      display:flex; align-items:center; justify-content:center; font-size:.88rem;
    }
    .t-nav-btn:hover { background:var(--grad); border-color:transparent; }
    .t-dots { display:flex; gap:8px; }
    .t-dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--text-3); cursor:pointer; transition:var(--t);
    }
    .t-dot.on { background:var(--accent-i); width:26px; border-radius:4px; }

    /* ============================================================
       FAQ
       ============================================================ */
    #faq { background:var(--bg-1); position:relative; }
    #faq::before {
      content:''; position:absolute; top:-1px; left:0; right:0; height:90px;
      background:var(--bg-0); clip-path:ellipse(60% 100% at 50% 0%);
    }
    .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
    .faq-list { display:flex; flex-direction:column; gap:11px; }
    .faq-item { border-radius:var(--r); border:1px solid var(--glass-b); overflow:hidden; transition:border-color .3s; }
    .faq-item.open { border-color:rgba(99,102,241,.3); }
    .faq-q {
      width:100%; padding:19px 22px;
      background:transparent; border:none; color:var(--text-1);
      font-size:.92rem; font-weight:600; text-align:left;
      cursor:pointer; display:flex; justify-content:space-between;
      align-items:center; gap:16px; transition:background .3s;
    }
    .faq-q:hover { background:var(--glass); }
    .faq-ico {
      width:28px; height:28px; border-radius:50%;
      background:var(--glass); border:1px solid var(--glass-b);
      display:flex; align-items:center; justify-content:center;
      font-size:.68rem; flex-shrink:0; transition:transform .3s,background .3s;
    }
    .faq-item.open .faq-ico { transform:rotate(180deg); background:var(--accent-i); border-color:var(--accent-i); }
    .faq-a { max-height:0; overflow:hidden; transition:max-height .42s ease; }
    .faq-a.open { max-height:280px; }
    .faq-ai { padding:0 22px 18px; font-size:.88rem; color:var(--text-2); line-height:1.75; }

    /* ============================================================
       BLOG
       ============================================================ */
    #blog { position:relative; }
    .blog-hd {
      display:flex; justify-content:space-between;
      align-items:flex-end; gap:40px; margin-bottom:52px;
    }
    .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .blog-card {
      border-radius:var(--r); overflow:hidden;
      background:var(--glass); border:1px solid var(--glass-b);
      transition:all .4s ease;
    }
    .blog-card:hover {
      transform:translateY(-7px);
      border-color:rgba(99,102,241,.28);
      box-shadow:0 22px 50px rgba(0,0,0,.35);
    }
    .blog-img {
      height:196px; display:flex; align-items:center; justify-content:center;
      font-size:3.2rem; position:relative; overflow:hidden;
    }
    .blog-img-ov {
      position:absolute; inset:0; opacity:0; transition:opacity .3s;
      display:flex; align-items:center; justify-content:center;
      font-size:.9rem; font-weight:600; color:#fff;
    }
    .blog-card:hover .blog-img-ov { opacity:1; }
    .blog-body { padding:24px; }
    .blog-meta { display:flex; gap:14px; margin-bottom:10px; }
    .blog-cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-i); }
    .blog-date { font-size:.72rem; color:var(--text-3); }
    .blog-t { font-size:1rem; font-weight:700; margin-bottom:9px; line-height:1.45; transition:color .2s; }
    .blog-card:hover .blog-t { color:var(--accent-i); }
    .blog-ex { font-size:.855rem; color:var(--text-2); line-height:1.65; margin-bottom:18px; }
    .blog-lk {
      font-size:.83rem; font-weight:600; color:var(--accent-i);
      text-decoration:none; display:flex; align-items:center; gap:6px; transition:gap .2s;
    }
    .blog-lk:hover { gap:10px; }

    /* ============================================================
       CONTACT
       ============================================================ */
    #contact { background:var(--bg-1); position:relative; }
    #contact::before {
      content:''; position:absolute; top:-1px; left:0; right:0; height:90px;
      background:var(--bg-0); clip-path:ellipse(60% 100% at 50% 0%);
    }
    .ct-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:80px; align-items:start; }
    .ct-info { display:flex; flex-direction:column; gap:30px; }
    .ct-item { display:flex; gap:16px; align-items:flex-start; }
    .ct-ico {
      width:48px; height:48px; border-radius:12px;
      background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2);
      display:flex; align-items:center; justify-content:center;
      font-size:1.05rem; flex-shrink:0; color:var(--accent-i);
    }
    .ct-lbl { font-size:.75rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:3px; }
    .ct-val { font-size:.92rem; font-weight:500; }
    .socials { display:flex; gap:10px; }
    .soc {
      width:44px; height:44px; border-radius:50%;
      background:var(--glass); border:1px solid var(--glass-b);
      display:flex; align-items:center; justify-content:center;
      color:var(--text-2); text-decoration:none; transition:var(--t); font-size:.92rem;
    }
    .soc:hover { background:var(--grad); border-color:transparent; color:#fff; transform:translateY(-3px); }
    .map-ph {
      height:190px; background:var(--grad-subtle);
      border-radius:var(--r); border:1px solid var(--glass-b);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:10px; color:var(--text-2); font-size:.88rem; margin-top:28px;
    }
    .map-ph i { font-size:2rem; color:var(--accent-i); }
    .ct-form {
      background:var(--glass); border:1px solid var(--glass-b);
      border-radius:var(--r-lg); padding:40px;
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    }
    .ct-form h3 { font-size:1.25rem; font-weight:700; margin-bottom:26px; }
    .f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .f-grp { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
    .f-lbl { font-size:.82rem; font-weight:600; color:var(--text-2); }
    .f-inp {
      padding:13px 17px; background:rgba(255,255,255,.04);
      border:1px solid var(--glass-b); border-radius:var(--r-sm);
      color:var(--text-1); font-size:.88rem; outline:none;
      transition:var(--t); width:100%;
    }
    .f-inp:focus { border-color:var(--accent-i); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
    .f-inp::placeholder { color:var(--text-3); }
    textarea.f-inp { resize:none; min-height:115px; }

    /* ============================================================
       FOOTER
       ============================================================ */
    footer { background:var(--bg-0); border-top:1px solid var(--glass-b); padding:60px 0 30px; }
    .ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:44px; }
    .ft-desc { font-size:.88rem; color:var(--text-2); line-height:1.75; margin-top:14px; max-width:270px; }
    .ft-col-h { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); margin-bottom:14px; }
    .ft-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
    .ft-links a { font-size:.88rem; color:var(--text-2); text-decoration:none; transition:color .2s; }
    .ft-links a:hover { color:var(--text-1); }
    .ft-bot {
      padding-top:28px; border-top:1px solid var(--glass-b);
      display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
    }
    .ft-copy { font-size:.82rem; color:var(--text-3); }
    .ft-leg { display:flex; gap:22px; }
    .ft-leg a { font-size:.82rem; color:var(--text-3); text-decoration:none; transition:color .2s; }
    .ft-leg a:hover { color:var(--text-2); }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media(max-width:1100px) {
      .svc-grid,.pf-grid,.blog-grid { grid-template-columns:repeat(2,1fr); }
      .ft-grid { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:768px) {
      .section { padding:80px 0; }
      .container { padding:0 20px; }
      .nav-links { display:none; }
      .burger { display:flex; }
      .about-grid,.svc-hd,.pf-hd,.blog-hd,.ct-grid,.faq-grid { grid-template-columns:1fr; }
      .mv-grid { grid-template-columns:1fr; }
      .svc-grid,.pf-grid,.blog-grid { grid-template-columns:1fr; }
      .ft-grid { grid-template-columns:1fr; }
      .f-row { grid-template-columns:1fr; }
      .h-stats { flex-direction:column; gap:22px; }
      .t-card { padding:0 18px; }
      .tl-track {
        flex-direction:column; padding:0; gap:22px;
      }
      .tl-track::before {
        width:2px; height:auto;
        top:19px; bottom:19px; left:18px; right:auto;
      }
      .tl-item { flex-direction:row; }
      .tl-c { text-align:left; }
    }
    @media(max-width:480px) {
      .h-actions { flex-direction:column; }
      .h-actions .btn { width:100%; justify-content:center; }
      .h-badge { font-size:.7rem; }
    }