:root{
      /* ===== Brand Palette ===== */
      --primary-blue:#0B4CC5;    /* Buttons, Links, CTA */
      --primary-light:#2D8CFF;   /* Hover / Highlight */
      --primary-dark:#072E74;    /* Dark surfaces (header/footer bg alt) */
      /* Backgrounds */
      --bg-main:#F7F9FC;         /* Main page background */
      --surface:#FFFFFF;         /* Cards/Panels */
      --divider:#E0E4EB;         /* Lines/Borders */
      /* Typography */
      --text-primary:#1E1E1E;    /* Main headings */
      --text-secondary:#5A5F6E;  /* Body text */
      --text-muted:#A0A7B4;      /* Muted info */
      --text-on-dark:#FFFFFF;    /* On dark bg */
      /* Feedback */
      --success:#00B894;--warning:#F39C12;--error:#E74C3C;--info:#3498DB;

      --radius-lg:22px; --radius:16px; --radius-sm:12px;
      --shadow:0 10px 28px rgba(17,24,39,.08);
      --shadow-strong:0 12px 34px rgba(0,0,0,.10);
      --blur-bg:rgba(255,255,255,.55);
    }

    /* ===== Base ===== */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family:'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg-main); color:var(--text-primary)}
    body.menu-open{overflow:hidden}
    .container{width:min(1200px,90%); margin-inline:auto}
    a{color:inherit}
    img{max-width:100%; display:block}
    section{scroll-margin-top:120px}

    /* ===== Header (Glass + Expand on Scroll) ===== */
    .header-outer{position:fixed; inset:0 0 auto 0; z-index:1000; padding:14px 0 6px; transition:padding .35s ease}
    .header-outer.expanded{padding:0}
    .header-inner{width:min(1200px,90%); margin:auto; transition:width .35s ease}
    .header-outer.expanded .header-inner{width:100%}

    .header-card{backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
      background:var(--blur-bg); border:1px solid rgba(255,255,255,.40); border-radius:var(--radius-lg);
      height:64px; display:flex; align-items:center; gap:16px; padding-inline:16px; flex-wrap:nowrap;
      box-shadow:var(--shadow-strong); transition:all .35s ease; overflow:visible; position:relative}
    .header-outer.expanded .header-card{border-radius:0; border-left:none; border-right:none; background:rgba(255,255,255,.80); box-shadow:0 10px 30px rgba(0,0,0,.08)}

    .header-brand{display:flex; align-items:center; gap:0; transition:transform .3s ease; flex-shrink:0; margin-inline:0; order:0}
    .header-outer.expanded .header-brand{transform:scale(.95)}
    .header-brand img{
      width:132px; height:132px; border-radius:32px;
      object-fit:contain; background:transparent;
    }

    .header-nav{display:flex; align-items:center; gap:26px; flex:1; order:1}
    .header-nav a{color:var(--text-secondary); text-decoration:none; font-weight:800; transition:color .2s}
    .header-nav a:hover{color:var(--primary-blue)}

    .header-actions{display:flex; align-items:center; gap:12px; order:2; margin-inline-start:12px}

    .btn-menu{display:none; align-items:center; gap:8px; padding:10px 14px; border-radius:14px;
      border:1px solid var(--primary-blue); background:#fff; color:var(--primary-blue); font-weight:900;
      cursor:pointer; transition:all .25s ease}
    .btn-menu svg{width:18px; height:18px; fill:currentColor}
    .btn-menu:hover{background:var(--primary-blue); color:#fff}

    .mobile-menu{position:fixed; inset:0; background:rgba(7,14,25,.55); backdrop-filter:blur(6px);
      display:none; align-items:flex-start; justify-content:flex-end; padding:20px; z-index:1400}
    .mobile-menu.open{display:flex}
    .mobile-menu__panel{width:min(360px,90vw); background:var(--surface); border-radius:22px;
      box-shadow:var(--shadow-strong); padding:24px; display:flex; flex-direction:column; gap:18px; position:relative}
    .mobile-menu__close{position:absolute; top:14px; left:14px; background:none; border:none; cursor:pointer;
      padding:6px; border-radius:50%; transition:background .2s}
    .mobile-menu__close:hover{background:rgba(0,0,0,.08)}
    .mobile-menu__links{display:flex; flex-direction:column; gap:12px; margin-top:24px}
    .mobile-menu__links a{text-decoration:none; font-weight:700; color:var(--text-primary); padding:8px 0; border-bottom:1px solid var(--divider)}
    .mobile-menu__links a:last-child{border-bottom:none}
    .mobile-menu__cta{display:flex; flex-direction:column; gap:10px; margin-top:10px}

    .btn-auth{display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:14px;
      border:1px solid var(--primary-blue); background:#fff; color:var(--primary-blue); font-weight:900;
      text-decoration:none; transition:all .25s ease; order:3; margin-inline-start:16px; white-space:nowrap}
    .btn-auth svg{width:16px; height:16px; fill:currentColor}
    .btn-auth:hover{background:var(--primary-blue); color:#fff}
    .btn-auth:hover svg{fill:#fff}

    /* Phone button placeholder removed */

    /* ===== Main / Hero ===== */
    main{margin-top:56px} /* reduced from 120px */
    .hero{position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding:40px 0 40px} /* reduced top padding */
    .hero > *:not(.hero-floating){position:relative; z-index:1}
    .hero-content{display:flex; flex-direction:column; gap:18px}
    .eyebrow{color:var(--primary-blue); font-weight:900; letter-spacing:.5px}
    .hero h1{font-size:clamp(28px,4.2vw,52px); font-weight:900; line-height:1.25; margin:8px 0 10px}
    .hero p{color:var(--text-secondary); font-size:18px; margin:0 0 18px}
    .actions{display:flex; gap:12px; flex-wrap:wrap}
    .btn{padding:12px 18px; border-radius:12px; font-weight:900; border:0; cursor:pointer; transition:all .2s ease}
    .btn-primary{background:var(--primary-blue); color:#fff}
    .btn-primary:hover{background:var(--primary-light)}
    .btn-outline{border:2px solid var(--primary-blue); background:transparent; color:var(--primary-blue)}
    .btn-outline:hover{border-color:var(--primary-light); color:var(--primary-light)}

    .device{border-radius:20px; overflow:hidden; box-shadow:var(--shadow-strong); background:var(--surface); border:1px solid var(--divider)}
    .hero-visual{display:flex; align-items:center; justify-content:center; position:relative; z-index:1; overflow:hidden}
    .hero-visual__player{width:100%; max-width:540px; min-height:360px; opacity:0; transition:opacity .4s ease; z-index:1; border-radius:28px; display:flex; align-items:center; justify-content:center; overflow:hidden}
    .hero-visual lottie-player{width:100%; max-width:540px; min-height:360px}
    .hero-visual.is-loaded .hero-visual__player{opacity:1}
    .hero-visual__player svg{width:100%; height:100%; display:block}
    .hero-floating{position:absolute; inset:0; pointer-events:none; z-index:0}
    .hero-float{position:absolute; width:12px; height:12px; border-radius:50%; background:rgba(45,140,255,.3); box-shadow:0 0 14px rgba(45,140,255,.45); animation:heroFloat 9s ease-in-out infinite; opacity:.45}
    .hero-float:nth-child(1){top:18%; inset-inline-start:6%; animation-delay:-1s}
    .hero-float:nth-child(2){top:64%; inset-inline-start:18%; width:10px; height:10px; animation-duration:8s; animation-delay:-3s}
    .hero-float:nth-child(3){top:26%; inset-inline-end:14%; width:9px; height:9px; animation-duration:7.5s; animation-delay:-5s}
    .hero-float:nth-child(4){bottom:12%; inset-inline-end:4%; width:11px; height:11px; animation-duration:10s; animation-delay:-2s}
    .hero-float::after{content:''; position:absolute; inset:-6px; border-radius:inherit; border:1px solid rgba(45,140,255,.25); opacity:.7}

    /* ===== Sections ===== */
    section{padding:60px 0}
    .section-title{font-size:28px; font-weight:900; margin:0 0 8px}
    .section-desc{color:var(--text-secondary); margin:0 0 22px}

    /* Services */
    #services{text-align:center}
    #services .section-desc{margin:0 auto; max-width:680px}
    #services .cards{margin-top:38px}
    .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px}
    .card{position:relative; background:linear-gradient(155deg,var(--card-bg-start,#ffffff),var(--card-bg-end,rgba(255,255,255,.96))); border-radius:28px; border:1px solid rgba(11,76,197,.08); box-shadow:0 22px 46px rgba(7,46,116,.12); padding:48px 32px 36px; overflow:hidden; isolation:isolate; transition:transform .35s ease, box-shadow .35s ease}
    .card::after{content:''; position:absolute; inset:-60% 60% auto -20%; aspect-ratio:1; background:radial-gradient(circle,var(--card-glow,rgba(45,140,255,.28)),transparent 65%); transform:rotate(-18deg); opacity:.85; z-index:-1}
    .card:hover{transform:translateY(-10px); box-shadow:0 32px 60px rgba(7,46,116,.2)}
    .card h3{margin:0 0 12px; font-size:20px}
    .card p{margin:0; color:var(--text-secondary); line-height:1.85}
    .card-icon{width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--card-icon, var(--primary-blue)); background:var(--card-icon-bg, rgba(11,76,197,.18))}
    .card-icon svg{width:26px; height:26px; fill:currentColor}
    .card-index{position:absolute; inset-block-start:18px; inset-inline-start:50%; transform:translateX(-50%); font-weight:800; font-size:13px; color:var(--card-accent, var(--primary-blue)); background:rgba(11,76,197,.12); padding:6px 14px; border-radius:999px; letter-spacing:.5px}
    .card-list{margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; text-align:start}
    .card-list li{display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:14px; line-height:1.6}
    .card-list li::before{content:''; width:9px; height:9px; border-radius:999px; background:var(--card-accent, var(--primary-blue)); opacity:.8; flex-shrink:0}

    /* Process */
    .process-journey{position:relative; margin-top:48px; padding:48px 42px 60px; border-radius:34px;
      background:linear-gradient(135deg, rgba(11,76,197,.1), rgba(255,255,255,.96)); overflow:hidden}
    .process-journey::before{content:''; position:absolute; inset:0; background:
      linear-gradient(120deg, rgba(11,76,197,.12), transparent 60%),
      radial-gradient(circle at 15% 25%, rgba(45,140,255,.18), transparent 58%),
      radial-gradient(circle at 80% 30%, rgba(11,76,197,.18), transparent 60%); z-index:0}
    .process-journey__track{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; z-index:2}
    .process-journey__step{background:rgba(255,255,255,.94); border-radius:28px;
      border:1px solid rgba(11,76,197,.12); padding:36px 28px 32px; box-shadow:0 18px 44px rgba(7,46,116,.17);
      position:relative; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease}
    .process-journey__step::before{content:''; position:absolute; inset-inline:32px; bottom:-60px; height:140px;
      background:radial-gradient(circle, rgba(11,76,197,.25), transparent 70%); opacity:0; transition:opacity .35s ease}
    .process-journey__step::after{content:''; position:absolute; inset-inline:-30px; top:-40px; height:160px;
      background:radial-gradient(circle, rgba(255,255,255,.65), transparent 70%); opacity:.9; mix-blend-mode:screen}
    .process-journey__step:hover{transform:translateY(-12px); box-shadow:0 28px 58px rgba(7,46,116,.24)}
    .process-journey__step:hover::before{opacity:.8}
    .process-journey__step-index{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
      border-radius:50%; margin-bottom:20px; font-weight:800; font-size:18px; color:#fff;
      background:linear-gradient(135deg, var(--primary-blue), var(--primary-light)); box-shadow:0 14px 28px rgba(11,76,197,.30)}
    .process-journey__step-title{margin:0 0 12px; font-size:20px}
    .process-journey__step-text{margin:0; color:var(--text-secondary); line-height:1.9}

    /* Portfolio */
    #works{position:relative; padding-block:70px}
    #works .section-desc{max-width:620px; margin-bottom:34px; color:var(--text-secondary)}
    .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
    .work{position:relative; background:var(--surface); border-radius:26px; overflow:hidden;
      box-shadow:0 24px 48px rgba(7,46,116,.16); display:flex; flex-direction:column; min-height:100%;
      transition:transform .4s ease, box-shadow .4s ease}
    .work:hover{transform:translateY(-12px); box-shadow:0 32px 58px rgba(7,46,116,.22)}
    .work-preview{position:relative; aspect-ratio:16/8.6; min-height:clamp(280px,32vw,420px); border-radius:26px; margin:14px; overflow:hidden;
      background:linear-gradient(135deg, rgba(11,76,197,.14), rgba(45,140,255,.08))}
    .work-preview iframe, .work-preview img{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; border-radius:inherit; transition:transform .45s ease}
    .work:hover .work-preview iframe, .work:hover .work-preview img{transform:scale(1.02)}
    .work-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:24px;
      background:linear-gradient(180deg, rgba(5,15,35,0) 25%, rgba(5,15,35,.78) 95%); color:#fff;
      transform:translateY(32%); transition:transform .4s ease, opacity .4s ease; opacity:0; pointer-events:none}
    .work-overlay__tag{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.2); padding:6px 12px;
      border-radius:999px; font-size:11px; letter-spacing:1px; text-transform:uppercase; font-weight:800}
    .work-overlay h3{margin:0; font-size:18px; font-weight:800}
    .work-overlay p{margin:0; font-size:13px; line-height:1.7; opacity:.9}
    .work-preview:hover .work-overlay, .work:hover .work-overlay{transform:translateY(0); opacity:1}
    .work-scroll{position:absolute; top:50%; left:50%; transform:translate(-50%,-45%); width:32px; height:32px;
      display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none}
    .work-scroll::after{content:''; width:18px; height:18px; border-right:3px solid rgba(255,255,255,.95);
      border-bottom:3px solid rgba(255,255,255,.95); border-radius:2px; transform:rotate(45deg); opacity:0}
    .work:hover .work-scroll, .work-preview:hover .work-scroll{animation:scrollFade 2s ease forwards}
    .work:hover .work-scroll::after,
    .work-preview:hover .work-scroll::after{animation:scrollArrow 1.8s ease forwards}
    .work-body{padding:0 22px 26px; display:flex; flex-direction:column; gap:16px}
    .work-topline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    .work-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:700;
      background:rgba(11,76,197,.12); color:var(--primary-blue)}
    .work-title{margin:0; font-size:19px}
    .work-meta{display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:600; color:var(--text-secondary)}
    .work-meta a{color:var(--primary-blue); text-decoration:none; font-weight:800; display:inline-flex; align-items:center; gap:6px}
    .work-meta a:hover{color:var(--primary-light)}

    /* Team */
    #team{margin-top:90px}
    .team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:40px}
    .team-card{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:30px 26px 32px; border-radius:28px; border:1px solid rgba(11,76,197,.16); background:linear-gradient(150deg, rgba(11,76,197,.06) 0%, rgba(255,255,255,.98) 55%, rgba(45,140,255,.08) 100%); box-shadow:0 22px 36px rgba(11,76,197,.10); overflow:hidden; backdrop-filter:blur(4px)}
    .team-card::before{content:''; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(135deg, rgba(45,140,255,.45), rgba(11,76,197,0)); opacity:0; transition:opacity .35s ease}
    .team-card::after{content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at top right, rgba(45,140,255,.18), transparent 58%); opacity:0; transition:opacity .35s ease}
    .team-card:hover::before,
    .team-card:hover::after{opacity:1}
    .team-card > *{position:relative; z-index:1}
    .team-photo{width:100%; aspect-ratio:1; border-radius:24px; overflow:hidden; position:relative; box-shadow:0 20px 30px rgba(7,46,116,.20)}
    .team-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(7,46,116,.18)); opacity:.0; transition:opacity .4s ease}
    .team-photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .5s ease}
    .team-card:hover .team-photo img{transform:scale(1.08)}
    .team-card:hover .team-photo::after{opacity:.85}
    .team-role{display:inline-flex; align-items:center; justify-content:center; padding:6px 16px; border-radius:999px; background:rgba(11,76,197,.12); color:var(--primary-dark); font-size:13px; font-weight:700; letter-spacing:.3px}
    .team-name{margin:0; font-size:21px; font-weight:900; color:var(--text-primary)}
    .team-bio{margin:0; font-size:14px; line-height:1.85; color:var(--text-secondary); max-width:260px}
    .team-tags{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
    .team-tags span{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:14px; background:rgba(11,76,197,.10); color:var(--primary-dark); font-size:12px; font-weight:700; letter-spacing:.2px; box-shadow:0 10px 20px rgba(11,76,197,.12)}
    .team-card:hover .team-tags span{background:rgba(11,76,197,.18)}
    @keyframes scrollArrow{
      0%{transform:translateY(-8px) rotate(45deg); opacity:0;}
      20%{opacity:1;}
      100%{transform:translateY(16px) rotate(45deg); opacity:0;}
    }
    @keyframes scrollFade{0%{opacity:1;} 60%{opacity:1;} 100%{opacity:0;}}

    /* FAQ */
    .faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:32px}
    .qa{position:relative; padding:22px 24px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.08);
      box-shadow:0 10px 24px rgba(15,23,42,.06); transition:border-color .25s ease, box-shadow .25s ease; cursor:pointer}
    .qa:hover{box-shadow:0 14px 32px rgba(15,23,42,.08); border-color:rgba(0,0,0,.12)}
    .qa.open{border-color:rgba(0,0,0,.18); box-shadow:0 18px 38px rgba(15,23,42,.10)}
    .qa-head{display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:1}
    .qa h4{margin:0; font-size:17px; line-height:1.5}
    .qa-toggle{flex-shrink:0; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
      background:rgba(0,0,0,.06); color:rgba(0,0,0,.6); font-size:18px; font-weight:600; transition:background .3s ease, color .3s ease}
    .qa.open .qa-toggle{background:rgba(0,0,0,.75); color:#fff}
    
    .qa-body{margin-top:0; max-height:0; overflow:hidden; transition:max-height .35s ease}
    .qa.open .qa-body{margin-top:14px}
    .qa-body p{margin:0; color:var(--text-secondary); line-height:1.75}

    /* Contact */
    .contact{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
    form{background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
    .field{display:grid; gap:6px; margin-bottom:12px}
    .field label{font-weight:900}
    .field input, .field textarea{border:1px solid var(--divider); border-radius:12px; padding:10px 12px; font-family:inherit; font-size:14px; background:#fff}
    .help{font-size:12px; color:var(--text-muted)}

    /* Footer (card) */
    .footer-wrap{margin-top:90px; margin-bottom:70px}
    .footer-card{background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius-lg); box-shadow:0 18px 38px rgba(7,46,116,.12); padding:42px 40px 36px}
    .footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; align-items:start}
    .footer-brand{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-top:6px}
    .footer-brand img{width:190px; height:190px; object-fit:contain}
    .footer-brand strong{font-size:22px; letter-spacing:.6px}
    .footer-brand__text{display:flex; flex-direction:column; gap:8px; align-items:center; max-width:420px}
    .footer-brand p{margin:0; color:var(--text-secondary); line-height:1.85}
    .footer-social{display:flex; align-items:center; gap:16px; justify-content:center; margin-top:6px}
    .footer-social a{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,133,51,.12); color:#FF8533; transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
    .footer-social a:hover{transform:translateY(-4px); box-shadow:0 12px 22px rgba(255,133,51,.2); background:rgba(255,133,51,.18)}
    .footer-social svg{width:20px; height:20px}
    .footer-col h4{margin:0 0 16px; font-size:17px}
    .footer-col a{display:block; text-decoration:none; color:var(--text-secondary); padding:6px 0}
    .footer-col a:hover{color:var(--primary-blue)}
    .footer-services a{display:flex; align-items:center; justify-content:space-between; padding:10px 0; font-weight:700; border-bottom:1px solid rgba(224,228,235,.55)}
    .footer-services a:last-child{border-bottom:none}
    .footer-services a svg{width:15px; height:15px; opacity:.5; transform:scaleX(-1); transition:opacity .25s ease, transform .25s ease}
    .footer-services a:hover svg{opacity:.9; transform:scaleX(-1) translateX(-2px)}
    .footer-awards{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}
    .awards-list{display:flex; flex-direction:column; gap:14px; width:100%; align-items:center}
    .award-card{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:280px; padding:16px 20px; border-radius:22px; border:1px solid rgba(11,76,197,.16); background:#f3f7ff; box-shadow:0 12px 26px rgba(11,76,197,.08); overflow:hidden}
    .award-text{display:flex; flex-direction:column; gap:6px; text-align:right; flex:1; min-width:0}
    .award-tag{font-size:13px; font-weight:600; color:var(--text-muted)}
    .award-title{font-size:18px; font-weight:800; color:var(--primary-blue)}
    .award-logo{flex:0 0 110px; display:flex; align-items:center; justify-content:flex-end; padding-inline-end:6px; overflow:hidden}
    .award-logo img{max-width:100%; max-height:52px; object-fit:contain}
    .award-logo--ex img{max-width:70%; max-height:38px}
    .awards-cta{display:flex; align-items:center; justify-content:center; width:100%; max-width:280px; padding:12px 22px; border-radius:18px; background:rgba(11,76,197,.12); color:var(--primary-blue); font-weight:700; font-size:15px; text-decoration:none; transition:background .2s ease,color .2s ease,box-shadow .2s ease}
    .awards-cta:hover{background:rgba(11,76,197,.18); color:var(--primary-dark); box-shadow:0 14px 28px rgba(11,76,197,.18)}
    .footer-extras{margin-top:36px; display:flex; flex-direction:column; gap:26px}
    .footer-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; border-top:1px solid var(--divider); padding-top:24px}
    .footer-tags a{display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); text-decoration:none; font-weight:700; padding:8px 16px; border-radius:999px; background:rgba(11,76,197,.08); transition:background .2s ease,color .2s ease,transform .2s ease}
    .footer-tags a::before{content:"#"; font-weight:900; color:var(--primary-blue); font-size:14px}
    .footer-tags a:hover{color:#fff; background:var(--primary-blue); transform:translateY(-2px)}
    .footer-map{border-radius:22px; overflow:hidden; box-shadow:0 16px 32px rgba(7,46,116,.12); border:1px solid rgba(11,76,197,.12);}
    .footer-map iframe{width:100%; min-height:220px; border:0}
    .footer-meta{display:flex; flex-wrap:wrap; gap:18px 32px; justify-content:center; align-items:center; font-weight:700; color:var(--text-secondary)}
    .footer-meta__item{display:inline-flex; align-items:center; gap:8px; font-size:14px}
    .footer-meta__icon{width:18px; height:18px; color:var(--primary-blue)}
    .footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:32px; padding-top:20px; border-top:1px solid var(--divider); color:var(--text-secondary); font-size:14px}

    /* Animations */
    [data-animate]{opacity:0; transform:translateY(16px)}
    .in-view{animation:.8s ease-out both fadeUp}
    @keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
    @keyframes heroFloat{
      0%{transform:translate3d(0,0,0) scale(1); opacity:.35}
      50%{transform:translate3d(-10px,-18px,0) scale(1.08); opacity:.6}
      100%{transform:translate3d(8px,-6px,0) scale(.97); opacity:.4}
    }

    /* Responsive */
    @media(max-width:1100px){
      .cards{grid-template-columns:repeat(2,1fr)}
      .process-journey__track{grid-template-columns:repeat(2,1fr)}
      .process-journey{padding:38px}
      .grid{grid-template-columns:repeat(2,1fr)}
      .contact{grid-template-columns:1fr}
    }
    @media(max-width:780px){
      .hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px; padding:46px 0 40px}
      .hero-content{order:1; align-items:center; text-align:center}
      .hero-content .actions{justify-content:center}
      .hero-visual{order:0; width:100%; display:flex; justify-content:center}
      .header-card{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:12px; min-height:68px}
      .header-nav{display:none}
      .btn-menu{display:inline-flex; padding:6px 10px; border-radius:12px}
      .btn-menu span{display:none}
      .btn-menu svg{width:20px; height:20px}
      .header-brand{margin:0 auto; order:1}
      .header-brand img{width:120px; height:auto}
      .btn-auth{margin:0; order:2; padding:7px 14px; font-size:13px; border-radius:12px; gap:4px}
      .btn-auth svg{width:14px; height:14px}
      .header-actions{order:0; margin-inline-start:0}
      .hero-float{opacity:.35}
      .process-journey{padding:36px 28px 48px}
      .process-journey__track{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px}
      .process-journey__step{padding:32px 24px 30px}
      .process-journey__step-title{font-size:18px}
      .work-preview{
        margin:14px 10px;
        border-radius:20px;
        min-height:240px;
        aspect-ratio:16/10;
      }
      .work-body{padding:0 18px 20px}
      .cards{gap:18px}
      .card{padding:36px 24px 28px}
      .card-icon{width:52px; height:52px; margin-bottom:18px}
      .card-index{inset-inline-start:50%; transform:translateX(-50%); inset-block-start:16px}
      .faq{grid-template-columns:1fr}
      .footer-top{grid-template-columns:1fr 1fr}
      .footer-brand{grid-column:1 / -1}
      .footer-awards{align-items:center}
      .awards-list{gap:12px; width:100%}
      .award-card{max-width:320px}
      .footer-brand img{width:160px; height:160px}
      .footer-brand__text{max-width:360px}
      .footer-social{gap:12px}
      .footer-social a{width:38px; height:38px}
      .hero-visual__player{max-width:420px}
      .hero-visual lottie-player{max-width:420px}
      .footer-extras{gap:24px}
      .footer-tags{gap:10px 18px}
      .footer-meta{justify-content:flex-start}
      .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .team-card{padding:26px 22px}
      .team-tags span{font-size:11px; padding:6px 10px}
      .award-logo{flex:0 0 120px}
      .awards-cta{max-width:320px}
    }
    @media(max-width:520px){
      .process-journey{padding:32px 20px 44px}
      .process-journey__track{grid-template-columns:1fr; gap:18px}
      .process-journey__step{padding:28px 20px 26px}
      .process-journey__step-title{font-size:17px}
      .process-journey__step-index{width:44px; height:44px; font-size:16px; margin-bottom:14px}
      .cards{grid-template-columns:1fr}
      .card{padding:32px 22px 26px}
      .card-icon{width:48px; height:48px}
      .grid{grid-template-columns:1fr}
      .work-preview{
        margin:10px 0;
        border-radius:16px;
        min-height:200px;
        aspect-ratio:auto;
      }
      .work-preview img{
        position:relative;
        inset:auto;
        width:100%;
        height:100%;
        object-fit:cover;
      }
      .work-body{padding:0 16px 20px}
      .footer-top{grid-template-columns:1fr}
      .hero-floating{display:none}
      .footer-awards{align-items:center}
      .award-card{width:100%; max-width:100%; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:14px 18px; overflow:hidden}
      .award-text{text-align:center}
      .award-logo{flex:0 0 auto; width:100%; max-width:180px; justify-content:center}
      .team-grid{grid-template-columns:1fr}
      .team-card{padding:22px 20px}
      .team-tags{gap:8px}
      .team-tags span{font-size:11px}
      .footer-brand img{width:150px; height:150px}
      .footer-social{gap:10px}
      .footer-social a{width:36px; height:36px}
      .footer-brand__text{max-width:100%}
      .hero-visual__player{max-width:320px}
      .hero-visual lottie-player{max-width:320px}
      .footer-extras{gap:20px}
      .footer-tags{flex-direction:column; align-items:flex-start; gap:8px; border-top:1px solid var(--divider); padding-top:20px}
      .footer-map iframe{min-height:200px}
      .footer-meta{flex-direction:column; align-items:flex-start; gap:12px}
      .awards-cta{max-width:100%}
      .mobile-menu__panel{width:100%; border-radius:18px}
    }