*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy: #0c0c24;
  --navy-mid: #12122e;
  --blue: #4f6ef5;
  --blue-bright: #6b88ff;
  --blue-glow: rgba(79,110,245,0.35);
  --accent: #a78bfa;
  --white: #ffffff;
  --gray-50: #f8f9fc;
  --gray-100: #eef0f6;
  --gray-200: #dde1ec;
  --gray-400: #8b92a8;
  --gray-500: #6b7394;
  --gray-700: #353a50;
  --green: #34d399;
  --amber: #fbbf24;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--gray-700); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ANIM */
@keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes pulse { 0%{ transform:scale(0.8); opacity:0.5; } 100%{ transform:scale(2.2); opacity:0; } }
.anim { opacity:0; transform:translateY(40px); transition: all 0.75s cubic-bezier(0.22,1,0.36,1); }
.anim.vis { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s} .d6{transition-delay:.6s}

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,64px); background:rgba(255,255,255,0.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(0,0,0,0.04); transition:all .35s; }
nav.scrolled { box-shadow:0 4px 30px rgba(12,12,36,0.06); height:66px; }
.nav-logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
.logo-mark { width:38px; height:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; }
.logo-mark span { width:100%; aspect-ratio:1; border-radius:3px; background:var(--blue); transition:.3s; }
.nav-logo:hover .logo-mark span { border-radius:50%; }
.logo-words { display:flex; flex-direction:column; line-height:1; }
.logo-words strong { font-size:18px; font-weight:800; letter-spacing:1.5px; color:var(--navy); }
.logo-words small { font-size:9px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { text-decoration:none; color:var(--gray-500); font-size:13.5px; font-weight:500; padding:8px 16px; border-radius:8px; transition:.25s; }
.nav-links a:hover { color:var(--navy); background:var(--gray-50); }
.nav-links a.active { color:var(--navy); font-weight:600; }
.btn { display:inline-flex; align-items:center; gap:10px; font-family:inherit; font-weight:600; border:none; cursor:pointer; text-decoration:none; transition:all .35s; }
.btn-cta { background:var(--navy); color:var(--white); padding:12px 22px 12px 24px; border-radius:100px; font-size:13.5px; font-weight:700; letter-spacing:.2px; box-shadow:0 6px 20px rgba(12,12,36,0.18); position:relative; }
.btn-cta:hover { background:#1a1a40; box-shadow:0 10px 32px rgba(12,12,36,0.3); transform:translateY(-2px); }
.btn-cta .arr { width:24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; transition:all .3s; }
.btn-cta:hover .arr { transform:translateX(3px) rotate(-8deg); background:var(--blue-bright); box-shadow:0 0 12px var(--blue-glow); }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; }

/* Language toggle */
.lang-toggle { display:inline-flex; align-items:center; background:var(--gray-50); border:1px solid var(--gray-100); border-radius:100px; padding:3px; margin-left:8px; font-size:11.5px; font-weight:700; }
.lang-toggle button { background:transparent; border:none; color:var(--gray-500); padding:6px 12px; border-radius:100px; cursor:pointer; font-family:inherit; font-weight:700; letter-spacing:.5px; transition:.25s; }
.lang-toggle button.on { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(79,110,245,0.25); }

/* HERO */
.hero { min-height:100vh; display:flex; align-items:center; background:var(--navy); position:relative; overflow:hidden; padding:100px clamp(24px,5vw,64px) 80px; }
.hero-bg { position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,12,36,0.88), rgba(14,14,42,0.95)), url('https://images.unsplash.com/photo-1511578314322-379afb476865?w=1920&q=80&auto=format') center/cover no-repeat; }
.hero-bg::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(79,110,245,0.22) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(167,139,250,0.15) 0%, transparent 50%); pointer-events:none; }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size:72px 72px; }
.hero-inner { max-width:1240px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; position:relative; z-index:1; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:100px; background:rgba(79,110,245,0.1); border:1px solid rgba(79,110,245,0.2); font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue-bright); margin-bottom:28px; animation:fadeUp .8s ease both; }
.hero-tag .dot { width:6px; height:6px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 10px var(--blue-glow); }
.hero h1 { font-size:clamp(36px,4.5vw,56px); font-weight:800; color:var(--white); line-height:1.12; margin-bottom:24px; letter-spacing:-.5px; animation:fadeUp .8s .15s ease both; }
.hero h1 em { font-family:'Playfair Display',serif; font-style:italic; background:linear-gradient(135deg,var(--blue-bright),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-desc { font-size:17px; color:var(--gray-400); line-height:1.75; margin-bottom:40px; max-width:520px; animation:fadeUp .8s .3s ease both; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp .8s .45s ease both; }
.btn-hero { background:var(--blue); color:var(--white); padding:15px 32px; border-radius:14px; font-size:15px; box-shadow:0 8px 32px rgba(79,110,245,0.3); }
.btn-hero:hover { background:var(--blue-bright); box-shadow:0 12px 40px rgba(79,110,245,0.4); transform:translateY(-2px); }
.btn-hero-ghost { color:rgba(255,255,255,0.7); padding:15px 28px; border-radius:14px; font-size:15px; border:1.5px solid rgba(255,255,255,0.12); background:transparent; }
.btn-hero-ghost:hover { border-color:rgba(255,255,255,0.3); color:var(--white); background:rgba(255,255,255,0.04); }
.hero-right { position:relative; height:480px; animation:fadeUp 1s .5s ease both; }
.fcard { position:absolute; background:rgba(255,255,255,0.04); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.06); border-radius:24px; padding:28px 24px; width:220px; transition:all .5s cubic-bezier(.22,1,.36,1); }
.fcard:hover { background:rgba(79,110,245,0.08); border-color:rgba(79,110,245,0.2); transform:translateY(-8px) scale(1.02)!important; box-shadow:0 0 60px rgba(79,110,245,0.15); }
.fcard:nth-child(1){top:0;left:10%;animation:float 6s ease-in-out infinite}
.fcard:nth-child(2){top:40px;right:5%;animation:float 6s 1.5s ease-in-out infinite}
.fcard:nth-child(3){bottom:80px;left:5%;animation:float 6s 3s ease-in-out infinite}
.fcard:nth-child(4){bottom:20px;right:10%;animation:float 6s 4.5s ease-in-out infinite}
.fc-ico { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; }
.fc-ico.a{background:rgba(79,110,245,0.15);color:var(--blue-bright)} .fc-ico.b{background:rgba(167,139,250,0.15);color:var(--accent)} .fc-ico.c{background:rgba(52,211,153,0.15);color:#34d399} .fc-ico.d{background:rgba(251,191,36,0.15);color:#fbbf24}
.fcard h4 { color:var(--white); font-size:14px; font-weight:700; margin-bottom:6px; }
.fcard p { color:var(--gray-400); font-size:12.5px; line-height:1.5; }

/* TRUST */
.trust { background:linear-gradient(180deg,var(--white) 0%,var(--gray-50) 100%); padding:56px 0; border-bottom:1px solid var(--gray-100); position:relative; overflow:hidden; }
.trust::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:3px; background:linear-gradient(90deg,var(--blue),var(--accent)); border-radius:0 0 4px 4px; }
.trust-inner { max-width:1240px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:28px; padding:0 clamp(24px,5vw,64px); }
.trust-label { font-size:11.5px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:3px; position:relative; padding:0 36px; }
.trust-label::before, .trust-label::after { content:''; position:absolute; top:50%; width:24px; height:1px; background:var(--gray-200); }
.trust-label::before { left:0; }
.trust-label::after { right:0; }
.trust-marquee { width:100%; overflow:hidden; position:relative; mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.trust-track { display:flex; gap:14px; align-items:center; width:max-content; animation:marquee 38s linear infinite; padding:6px 0; }
.trust-track:hover { animation-play-state:paused; }
.tg-item { font-size:14px; font-weight:700; color:var(--navy); letter-spacing:.3px; white-space:nowrap; padding:10px 20px; background:var(--white); border:1px solid var(--gray-100); border-radius:100px; box-shadow:0 2px 8px rgba(12,12,36,0.04); transition:color .3s ease,border-color .3s ease,box-shadow .3s ease; flex-shrink:0; }
.tg-item:hover { color:var(--blue); border-color:rgba(79,110,245,0.35); box-shadow:0 8px 24px rgba(79,110,245,0.12); }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-track { animation:none; } }

/* SECTIONS */
section { padding:110px clamp(24px,5vw,64px); }
.container { max-width:1240px; margin:0 auto; }
.stitle { text-align:center; max-width:640px; margin:0 auto 72px; }
.stag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.stag::before { content:''; width:24px; height:2px; background:var(--blue); border-radius:2px; }
.stitle h2 { font-size:clamp(30px,3.5vw,44px); font-weight:800; color:var(--navy); line-height:1.18; margin-bottom:16px; }
.stitle p { font-size:16.5px; color:var(--gray-500); line-height:1.7; }

/* PAGE HERO (inner pages) */
.page-hero { background:var(--navy); padding:160px clamp(24px,5vw,64px) 100px; position:relative; overflow:hidden; text-align:center; }
.page-hero::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,12,36,0.82), rgba(12,12,36,0.94)), url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1920&q=80&auto=format') center/cover no-repeat; }
.page-hero::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(79,110,245,0.2), transparent 60%); }
.page-hero-inner { position:relative; z-index:1; max-width:820px; margin:0 auto; }
.page-hero .stag { color:var(--blue-bright); justify-content:center; }
.page-hero h1 { font-size:clamp(34px,4.5vw,54px); font-weight:800; color:var(--white); line-height:1.15; margin-bottom:20px; }
.page-hero h1 em { font-family:'Playfair Display',serif; font-style:italic; background:linear-gradient(135deg,var(--blue-bright),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-hero p { font-size:17px; color:rgba(255,255,255,0.7); line-height:1.7; max-width:640px; margin:0 auto; }

/* SERVICE OVERVIEW */
#svc-overview { background:var(--white); }
.svc-ov-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.svc-ov { background:var(--gray-50); border-radius:24px; padding:36px 28px; border:1px solid var(--gray-100); text-align:center; transition:all .45s; position:relative; }
.svc-ov::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--accent)); opacity:0; transition:opacity .4s; }
.svc-ov:hover { background:var(--white); box-shadow:0 24px 64px rgba(12,12,36,0.08); transform:translateY(-8px); border-color:transparent; }
.svc-ov:hover::after { opacity:1; }
.svc-ov-ico { width:68px; height:68px; border-radius:20px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-size:26px; transition:all .4s; }
.svc-ov-ico.c1{background:rgba(79,110,245,0.08);color:var(--blue)} .svc-ov-ico.c2{background:rgba(167,139,250,0.08);color:var(--accent)} .svc-ov-ico.c3{background:rgba(52,211,153,0.08);color:#34d399} .svc-ov-ico.c4{background:rgba(251,191,36,0.08);color:#fbbf24}
.svc-ov:hover .svc-ov-ico { transform:scale(1.1); }
.svc-ov h4 { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.svc-ov p { font-size:13px; color:var(--gray-500); line-height:1.6; margin-bottom:16px; }
.svc-ov-link { font-size:12px; font-weight:600; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:gap .3s; }
.svc-ov:hover .svc-ov-link { gap:10px; }

/* PORTFOLIO */
#portfolio { background:var(--white); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.portfolio-card { border-radius:20px; overflow:hidden; position:relative; aspect-ratio:1/1.15; cursor:pointer; transition:all .5s cubic-bezier(.22,1,.36,1); }
.portfolio-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(12,12,36,0.7) 0%,rgba(79,110,245,0.3) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:32px 24px; opacity:0; transition:opacity .5s; }
.portfolio-card:hover { transform:translateY(-8px); box-shadow:0 24px 64px rgba(12,12,36,0.15); }
.portfolio-card:hover img { transform:scale(1.08); }
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-card-title { font-size:18px; font-weight:800; color:var(--white); margin-bottom:6px; }
.portfolio-card-client { font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:12px; }
.portfolio-tag { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--white); background:rgba(79,110,245,0.6); padding:6px 12px; border-radius:6px; }

/* ABOUT */
#about { background:var(--gray-50); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-visual { position:relative; }
.about-box { background:linear-gradient(150deg,#0c0c24 0%,#141438 60%,#1a1a50 100%); border-radius:28px; padding:52px 48px; color:var(--white); position:relative; box-shadow:0 24px 64px rgba(12,12,36,0.18); isolation:isolate; }
.about-box::before { content:''; position:absolute; top:-120px; right:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(79,110,245,0.32) 0%,transparent 70%); z-index:-1; pointer-events:none; }
.about-box::after { content:''; position:absolute; bottom:-80px; left:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(167,139,250,0.18) 0%,transparent 70%); z-index:-1; pointer-events:none; }
.about-box-badge { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--blue-bright); background:rgba(79,110,245,0.14); padding:7px 14px 7px 12px; border-radius:100px; margin-bottom:24px; }
.about-box-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 10px var(--blue-glow); }
.about-box h3 { font-size:28px; font-weight:800; margin-bottom:20px; line-height:1.22; letter-spacing:-.3px; }
.about-box h3 em { font-family:'Playfair Display',serif; font-style:italic; background:linear-gradient(135deg,var(--blue-bright),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.about-box > p { color:rgba(255,255,255,0.78); font-size:14.5px; line-height:1.75; margin-bottom:36px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.1); }
.stat { text-align:center; padding:4px 0; }
.stat .n { font-size:30px; font-weight:900; background:linear-gradient(135deg,var(--blue-bright),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.1; letter-spacing:-.5px; }
.stat .l { font-size:10.5px; font-weight:600; color:rgba(255,255,255,0.55); margin-top:6px; text-transform:uppercase; letter-spacing:1.4px; }
.about-txt .stag { text-align:left; justify-content:flex-start; }
.about-txt h2 { font-size:36px; font-weight:800; color:var(--navy); margin-bottom:20px; line-height:1.2; text-align:left; }
.about-txt > p { font-size:15.5px; color:var(--gray-500); line-height:1.8; margin-bottom:14px; }
.about-feats { margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.af { display:flex; align-items:flex-start; gap:14px; }
.af-ico { width:42px; height:42px; border-radius:12px; background:rgba(79,110,245,0.06); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.af h5 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.af p { font-size:13px; color:var(--gray-500); line-height:1.5; }

/* TESTIMONIALS */
#testimonials { background:var(--white); }
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.test-card { background:var(--gray-50); border-radius:24px; padding:36px; border:1px solid var(--gray-100); transition:all .4s; }
.test-card:hover { box-shadow:0 16px 48px rgba(12,12,36,0.06); transform:translateY(-4px); }
.test-quote { font-size:14.5px; color:var(--gray-700); line-height:1.7; margin-bottom:24px; font-style:italic; position:relative; padding-left:20px; border-left:3px solid var(--blue); }
.test-author { display:flex; align-items:center; gap:14px; }
.test-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:#fff; flex-shrink:0; }
.test-avatar.av1 { background:linear-gradient(135deg,#4f6ef5,#6b88ff); }
.test-avatar.av2 { background:linear-gradient(135deg,#a78bfa,#c4b5fd); }
.test-avatar.av3 { background:linear-gradient(135deg,#34d399,#6ee7b7); }
.test-name { font-size:14px; font-weight:700; color:var(--navy); }
.test-role { font-size:12px; color:var(--gray-400); }

/* CTA */
.cta-sec { background:var(--navy); padding:120px clamp(24px,5vw,64px); position:relative; overflow:hidden; }
.cta-bg { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,36,0.82), rgba(12,12,36,0.92)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&q=80&auto=format') center/cover no-repeat; }
.cta-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 80% at 50% 50%, rgba(79,110,245,0.18), transparent 60%); }
.cta-inner { position:relative; z-index:1; text-align:center; max-width:640px; margin:0 auto; }
.cta-inner h2 { font-size:clamp(32px,4vw,48px); font-weight:800; color:var(--white); margin-bottom:20px; line-height:1.15; }
.cta-inner h2 em { font-family:'Playfair Display',serif; font-style:italic; background:linear-gradient(135deg,var(--blue-bright),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.cta-inner p { font-size:17px; color:var(--gray-400); margin-bottom:40px; line-height:1.7; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* CONTACT */
#contact { background:var(--gray-50); }
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; }
.cl h3 { font-size:32px; font-weight:800; color:var(--navy); margin-bottom:16px; line-height:1.2; }
.cl > p { font-size:15px; color:var(--gray-500); line-height:1.7; margin-bottom:36px; }
.cd { display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.cd-ico { width:52px; height:52px; border-radius:16px; background:var(--white); border:1px solid var(--gray-100); box-shadow:0 2px 8px rgba(12,12,36,0.04); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--blue); flex-shrink:0; }
.cd small { font-size:12px; color:var(--gray-400); display:block; margin-bottom:2px; }
.cd strong { font-size:15px; color:var(--navy); font-weight:600; }
.form-card { background:var(--white); border-radius:28px; padding:44px; border:1px solid var(--gray-100); box-shadow:0 8px 32px rgba(12,12,36,0.06); }
.form-card h4 { font-size:20px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.form-card > p { font-size:13.5px; color:var(--gray-400); margin-bottom:28px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:12.5px; font-weight:600; color:var(--gray-700); margin-bottom:6px; }
.fg input,.fg textarea,.fg select { width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--gray-200); font-family:inherit; font-size:14px; color:var(--navy); background:var(--gray-50); outline:none; transition:.3s; }
.fg input:focus,.fg textarea:focus,.fg select:focus { border-color:var(--blue); background:var(--white); box-shadow:0 0 0 4px rgba(79,110,245,0.08); }
.fg textarea { resize:vertical; min-height:110px; }
.form-sub { width:100%; padding:15px; border-radius:14px; background:var(--blue); color:var(--white); font-family:inherit; font-size:15px; font-weight:600; border:none; cursor:pointer; transition:.35s; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 4px 16px rgba(79,110,245,0.2); }
.form-sub:hover { background:var(--blue-bright); transform:translateY(-2px); box-shadow:0 8px 32px rgba(79,110,245,0.3); }

/* FOOTER */
footer { background:var(--navy); padding:64px clamp(24px,5vw,64px) 32px; }
.ft-top { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.06); }
.ft-brand .logo-words strong{color:var(--white)} .ft-brand .logo-words small{color:var(--blue-bright)}
.ft-brand > p { color:var(--gray-400); font-size:13.5px; line-height:1.65; margin-top:16px; max-width:280px; }
.ft-col h5 { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gray-400); margin-bottom:20px; }
.ft-col a { display:block; color:rgba(255,255,255,0.45); text-decoration:none; font-size:14px; padding:5px 0; transition:.25s; }
.ft-col a:hover { color:var(--white); transform:translateX(4px); }
.ft-soc { display:flex; gap:10px; margin-top:16px; }
.ft-soc a { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:15px; transition:.3s; padding:0; }
.ft-soc a:hover { background:var(--blue); color:var(--white); border-color:var(--blue); transform:translateY(-2px); }
.ft-bottom { max-width:1240px; margin:24px auto 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.ft-bottom span { font-size:13px; color:rgba(255,255,255,0.3); }
.ft-bottom a { color:var(--blue-bright); text-decoration:none; }

/* SERVICES-page specific */
.svc-detail { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.svc-block { background:var(--white); border-radius:24px; padding:40px 32px; border:1px solid var(--gray-100); transition:all .4s; }
.svc-block:hover { box-shadow:0 16px 48px rgba(12,12,36,0.06); transform:translateY(-4px); }
.svc-block-ico { width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px; }
.svc-block-ico.c1{background:rgba(79,110,245,0.08);color:var(--blue)} .svc-block-ico.c2{background:rgba(167,139,250,0.08);color:var(--accent)} .svc-block-ico.c3{background:rgba(52,211,153,0.08);color:#34d399} .svc-block-ico.c4{background:rgba(251,191,36,0.08);color:#fbbf24}
.svc-block h3 { font-size:22px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.svc-block > p { font-size:14.5px; color:var(--gray-500); line-height:1.65; margin-bottom:18px; }
.svc-block ul { list-style:none; padding:0; margin:0; }
.svc-block ul li { font-size:13.5px; color:var(--gray-700); padding:7px 0 7px 22px; position:relative; }
.svc-block ul li::before { content:'\2713'; position:absolute; left:0; color:var(--blue); font-weight:800; }

/* PROCESS */
#process { background:var(--gray-50); }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.process-step { background:var(--white); border-radius:22px; padding:32px 26px; border:1px solid var(--gray-100); position:relative; transition:all .4s; }
.process-step:hover { box-shadow:0 16px 48px rgba(12,12,36,0.08); transform:translateY(-6px); }
.process-num { font-family:'Playfair Display',serif; font-size:42px; font-weight:700; font-style:italic; background:linear-gradient(135deg,var(--blue),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; margin-bottom:14px; }
.process-step h4 { font-size:17px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.process-step p { font-size:13.5px; color:var(--gray-500); line-height:1.65; }

/* STATS BAR */
.stats-bar { background:var(--navy); padding:70px clamp(24px,5vw,64px); position:relative; overflow:hidden; }
.stats-bar::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(79,110,245,0.15), transparent 60%); }
.stats-bar-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; z-index:1; }
.sb { text-align:center; color:var(--white); }
.sb .num { font-size:clamp(30px,3.5vw,44px); font-weight:900; background:linear-gradient(135deg,var(--blue-bright),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:6px; }
.sb .lbl { font-size:12.5px; color:var(--gray-400); letter-spacing:1.5px; text-transform:uppercase; font-weight:600; }

/* FAQ */
#faq { background:var(--white); }
.faq-wrap { max-width:820px; margin:0 auto; }
.faq-item { background:var(--gray-50); border:1px solid var(--gray-100); border-radius:16px; margin-bottom:12px; overflow:hidden; transition:all .3s; }
.faq-item[open] { background:var(--white); box-shadow:0 8px 28px rgba(12,12,36,0.06); border-color:rgba(79,110,245,0.25); }
.faq-item summary { list-style:none; cursor:pointer; padding:22px 26px; font-size:15.5px; font-weight:700; color:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'\2b'; font-family:'Font Awesome 6 Free'; font-weight:900; width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; transition:transform .3s; }
.faq-item[open] summary::after { content:'\f068'; }
.faq-item .faq-a { padding:0 26px 22px; font-size:14.5px; color:var(--gray-500); line-height:1.7; }

/* APPROACH / VALUES */
.vals-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.val-card { background:var(--white); border-radius:22px; padding:34px 28px; border:1px solid var(--gray-100); transition:all .4s; }
.val-card:hover { box-shadow:0 16px 48px rgba(12,12,36,0.06); transform:translateY(-4px); }
.val-ico { width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,rgba(79,110,245,0.1),rgba(167,139,250,0.1)); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
.val-card h4 { font-size:18px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.val-card p { font-size:14px; color:var(--gray-500); line-height:1.65; }

/* SPECIALTIES BADGES */
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px; }
.spec-card { background:var(--white); border-radius:24px; padding:40px 34px; border:1px solid var(--gray-100); position:relative; overflow:hidden; transition:all .4s; }
.spec-card:hover { box-shadow:0 24px 64px rgba(12,12,36,0.08); transform:translateY(-4px); }
.spec-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--blue),var(--accent)); }
.spec-card .spec-ico { width:56px; height:56px; border-radius:16px; background:rgba(79,110,245,0.08); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:22px; }
.spec-card.two .spec-ico { background:rgba(167,139,250,0.08); color:var(--accent); }
.spec-card h3 { font-size:22px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.spec-card > p { font-size:14.5px; color:var(--gray-500); line-height:1.7; margin-bottom:18px; }
.spec-card ul { list-style:none; padding:0; margin:0; }
.spec-card ul li { font-size:13.5px; color:var(--gray-700); padding:6px 0 6px 22px; position:relative; }
.spec-card ul li::before { content:'\2713'; position:absolute; left:0; color:var(--blue); font-weight:800; }

/* HOURS */
.hours-box { background:var(--white); border-radius:22px; padding:28px; border:1px solid var(--gray-100); margin-top:24px; }
.hours-box h5 { font-size:13px; font-weight:700; color:var(--navy); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
.hours-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; color:var(--gray-700); border-bottom:1px dashed var(--gray-100); }
.hours-row:last-child { border-bottom:none; }
.hours-row strong { color:var(--navy); font-weight:600; }

/* WORKS / PORTFOLIO GRID */
#works { background:var(--white); }
.works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; grid-auto-flow:dense; }
.works-grid.works-2 { grid-template-columns:repeat(2,1fr); max-width:960px; margin:0 auto; gap:32px; }
.works-grid.works-3 { grid-template-columns:repeat(3,1fr); gap:28px; }
.work-card { background:var(--white); border-radius:22px; overflow:hidden; border:1px solid var(--gray-100); transition:all .45s ease; display:flex; flex-direction:column; margin:0; }
.work-card:hover { box-shadow:0 24px 60px rgba(12,12,36,0.12); transform:translateY(-6px); border-color:transparent; }
.work-card.wc-lg { grid-column:span 2; }
.work-media { aspect-ratio:4/3; background:linear-gradient(135deg,var(--gray-50),var(--gray-100)); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.work-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.work-card:hover .work-media img { transform:scale(1.04); }
.work-ph { width:72px; height:72px; border-radius:20px; background:var(--white); color:var(--gray-300); display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 6px 20px rgba(12,12,36,0.06); }
.work-card figcaption { padding:24px 26px 26px; }
.wc-cat { display:inline-block; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue); background:rgba(79,110,245,0.08); padding:5px 12px; border-radius:100px; margin-bottom:12px; }
.work-card h3 { font-size:19px; font-weight:800; color:var(--navy); margin-bottom:8px; line-height:1.3; }
.work-card figcaption p { font-size:14px; color:var(--gray-500); line-height:1.65; }

@media(max-width:1024px){
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .works-grid.works-3{grid-template-columns:repeat(2,1fr)}
  .work-card.wc-lg{grid-column:span 2}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .stats-bar-inner{grid-template-columns:repeat(2,1fr);gap:32px}
  .vals-grid{grid-template-columns:repeat(2,1fr)}
  .spec-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .works-grid{grid-template-columns:1fr;gap:18px}
  .work-card.wc-lg{grid-column:span 1}
  .work-card figcaption{padding:20px 22px 22px}
  .work-card h3{font-size:17px}
  .vals-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr;gap:14px}
  .process-step{padding:24px 22px}
  .stats-bar{padding:44px 20px}
  .stats-bar-inner{gap:24px}
  .faq-item summary{padding:18px 20px;font-size:14.5px}
  .faq-item .faq-a{padding:0 20px 18px;font-size:14px}
  .spec-card{padding:28px 22px}
  .spec-card h3{font-size:19px}
}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center} .hero-desc{margin:0 auto 40px} .hero-btns{justify-content:center} .hero-right{display:none}
  .svc-ov-grid{grid-template-columns:repeat(2,1fr)} .portfolio-grid{grid-template-columns:repeat(2,1fr)} .svc-detail{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:48px} .test-grid{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr;gap:40px}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{height:64px;padding:0 18px}
  nav.scrolled{height:60px}
  .logo-mark{width:32px;height:32px}
  .logo-words strong{font-size:16px}
  .logo-words small{font-size:8.5px;letter-spacing:2.5px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--white);padding:16px;gap:4px;border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 32px rgba(12,12,36,0.08)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 16px;font-size:15px;border-radius:10px}
  .nav-links .btn-cta{margin-top:8px;justify-content:center}
  .nav-links .lang-toggle{margin-left:0;align-self:center;margin-top:6px}
  .hamburger{display:flex}

  section{padding:64px 18px}
  .stitle{margin:0 auto 48px}
  .stitle h2{font-size:28px}
  .stitle p{font-size:15px}

  .page-hero{padding:110px 20px 64px}

  .hero{padding:84px 18px 56px;min-height:auto}
  .hero h1{font-size:32px;line-height:1.15}
  .hero-desc{font-size:15.5px;margin-bottom:28px}
  .hero-btns{gap:10px}
  .btn-hero,.btn-hero-ghost{padding:13px 22px;font-size:14px;width:100%;justify-content:center}

  .trust{padding:40px 0}
  .trust-inner{gap:20px;padding:0 18px}
  .trust-label{letter-spacing:2px;padding:0 28px}
  .trust-label::before,.trust-label::after{width:18px}
  .trust-track{gap:10px;animation-duration:30s}
  .tg-item{font-size:12.5px;padding:8px 16px}

  .svc-ov-grid{grid-template-columns:1fr;gap:16px}
  .svc-ov{padding:28px 22px}

  .portfolio-grid{grid-template-columns:1fr;gap:16px}
  .portfolio-card{aspect-ratio:1/0.85}
  .portfolio-overlay{opacity:1;background:linear-gradient(0deg,rgba(12,12,36,0.85) 0%,rgba(12,12,36,0.1) 50%,transparent 100%);padding:24px 20px}

  .about-grid{gap:36px}
  .about-visual{padding-bottom:0}
  .about-box{padding:32px 22px 28px;border-radius:20px}
  .about-box::before{width:180px;height:180px;top:-60px;right:-60px}
  .about-box h3{font-size:19px;line-height:1.3;margin-bottom:12px}
  .about-box > p{font-size:13.5px;line-height:1.65;margin-bottom:20px}
  .about-stats{grid-template-columns:repeat(3,1fr);gap:8px;padding:0;margin-top:0;position:relative;z-index:1}
  .stat{padding:14px 6px;border-radius:12px;box-shadow:0 4px 14px rgba(12,12,36,0.12)}
  .stat .n{font-size:20px}
  .stat .l{font-size:10px;margin-top:2px}
  .about-txt h2{font-size:26px}
  .about-txt > p{font-size:14.5px}

  .test-grid{grid-template-columns:1fr;gap:16px}
  .test-card{padding:26px 22px;border-radius:20px}
  .test-quote{font-size:14px;margin-bottom:18px}

  .cta-sec{padding:72px 20px}
  .cta-inner h2{font-size:28px;line-height:1.2}
  .cta-inner p{font-size:15px;margin-bottom:28px}
  .cta-btns{flex-direction:column;gap:10px}
  .cta-btns .btn{width:100%;justify-content:center}

  .contact-grid{gap:32px}
  .cl h3{font-size:24px}
  .cl > p{font-size:14.5px;margin-bottom:24px}
  .cd{gap:14px;margin-bottom:16px}
  .cd-ico{width:44px;height:44px;border-radius:12px;font-size:16px}
  .form-card{padding:26px 22px;border-radius:22px}
  .form-card h4{font-size:18px}
  .frow{grid-template-columns:1fr;gap:0}

  .svc-block{padding:28px 22px;border-radius:20px}
  .svc-block h3{font-size:19px}

  footer{padding:48px 20px 28px}
  .ft-top{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .ft-bottom{flex-direction:column;text-align:center;margin-top:20px}
}
@media(max-width:420px){
  .hero h1{font-size:28px}
  .stitle h2{font-size:24px}
  .page-hero h1{font-size:28px}
  .about-box{padding:26px 18px 22px}
  .about-box h3{font-size:17.5px}
  .about-box > p{font-size:13px;margin-bottom:16px}
  .about-stats{gap:6px}
  .stat{padding:12px 4px}
  .stat .n{font-size:18px}
  .stat .l{font-size:9px}
}