:root {
  --navy: #071d3a;
  --navy-2: #0b2d55;
  --text: #0f2340;
  --muted: #60708a;
  --line: #e3eaf3;
  --bg: #f7fbff;
  --white: #ffffff;
  --cyan: #10c8df;
  --blue: #0b72e7;
  --blue-2: #144cff;
  --green: #20c77a;
  --pink: #ff4f7b;
  --orange: #ff981f;
  --purple: #7162f4;
  --shadow: 0 18px 60px rgba(21, 65, 110, .12);
  --shadow-soft: 0 10px 30px rgba(21, 65, 110, .08);
  --radius: 22px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; display: block; }

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(217,228,241,.8);
}

.nav-wrap {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 20px/1 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.7px;
  white-space: nowrap;
}
.brand > span:last-child > span { color: var(--blue); }

.brand-mark {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--cyan), var(--blue-2));
  box-shadow: 0 8px 20px rgba(20, 76, 255, .22);
  transform: skew(-7deg);
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: #364a67;
  transition: .25s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--blue); }
.main-nav a.active::after {
  content:"";
  position: absolute;
  height: 2px;
  left: 0; right: 0;
  bottom: -28px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  padding: 0 20px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue-2));
  box-shadow: 0 12px 30px rgba(11,114,231,.25);
}
.btn-secondary, .btn-outline {
  background: #fff;
  color: var(--text);
  border-color: #bfd0e4;
}
.btn-secondary:hover, .btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-nav {
  margin-left: 4px;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue-2));
  box-shadow: 0 10px 26px rgba(11,114,231,.22);
}
.large { min-height: 54px; padding-inline: 26px; font-size: 15px; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 0;
  background: #eef6ff;
  border-radius: 12px;
  padding: 10px;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: .25s ease;
}

.hero {
  position: relative;
  min-height: 690px;
  padding: 88px 0 78px;
  background:
    radial-gradient(circle at 20% 20%, rgba(108,184,255,.18), transparent 27%),
    radial-gradient(circle at 80% 14%, rgba(17,200,223,.17), transparent 23%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  isolation: isolate;
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background: linear-gradient(90deg, transparent, #dbe8f5, transparent);
}
.hero-glow {
  position:absolute;
  width:320px; height:320px;
  filter: blur(60px);
  border-radius:50%;
  opacity:.26;
  z-index:-1;
}
.hero-glow-a { background:#64d6ff; left:-120px; top:70px; }
.hero-glow-b { background:#8d63ff; right:-120px; bottom:40px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 60px;
}

.eyebrow {
  display:inline-block;
  color: var(--blue);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.hero h1 {
  margin: 0;
  max-width: 640px;
  font: 800 clamp(43px, 5vw, 68px)/1.04 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -2.8px;
}
.hero h1 span {
  background: linear-gradient(90deg, #0cc6de 0%, #0c71e7 55%, #2246ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy > p {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}
.hero-actions {
  display:flex;
  gap:14px;
  margin-top: 30px;
}
.play {
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#e8f3ff;
  color:var(--blue);
  font-size:10px;
}
.hero-features {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}
.mini-feature { display:flex; align-items:flex-start; gap:11px; }
.mini-feature strong { display:block; font-size:12px; margin-bottom:4px; }
.mini-feature small { display:block; color:#8190a4; font-size:10px; line-height:1.4; }
.mini-icon {
  flex: 0 0 34px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--blue);
  background:#e8f5ff;
  border:1px solid #d3e9fb;
  font-weight:800;
}

.hero-visual {
  position: relative;
  min-height: 470px;
}
.laptop {
  position:absolute;
  left:10px;
  top:60px;
  width: 92%;
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
  filter: drop-shadow(0 30px 35px rgba(19, 55, 92, .16));
}
.laptop-screen {
  position:relative;
  overflow:hidden;
  background:#fff;
  border:10px solid #182332;
  border-bottom-width: 14px;
  border-radius: 18px 18px 10px 10px;
  min-height:310px;
}
.mock-nav {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  border-bottom:1px solid #e7eef5;
  font-size:8px;
  color:#4c5c70;
}
.mock-nav > div { display:flex; gap:18px; }
.mock-logo {
  width:24px; height:24px;
  display:grid; place-items:center;
  border-radius:7px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#fff; font-weight:800;
}
.mock-hero {
  min-height:205px;
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:16px;
  padding:26px 24px 14px;
  background:linear-gradient(135deg,#f7fbff,#ffffff);
}
.mock-copy small { color:var(--blue); font-weight:800; font-size:7px; letter-spacing:.8px; }
.mock-copy h3 { margin:8px 0 6px; font-size:27px; line-height:1; letter-spacing:-1px; }
.mock-copy p { font-size:8px; line-height:1.6; color:#728197; width:95%; }
.mock-copy button {
  border:0; border-radius:5px;
  padding:7px 9px;
  font-size:7px;
  color:#fff;
  background:var(--blue);
}
.mock-copy button.outline { background:#fff; color:#42556f; border:1px solid #c9d6e5; }

.mountain-card {
  position:relative;
  overflow:hidden;
  border-radius: 10px;
  background:linear-gradient(180deg,#caeaff 0%, #f1f8ff 55%, #e9f6f0 56%, #b8ddcd 100%);
}
.sun {
  position:absolute; right:16px; top:18px;
  width:28px; height:28px; border-radius:50%;
  background:#fff6ba; box-shadow:0 0 30px #fff9d4;
}
.mountain {
  position:absolute;
  bottom:0;
  width:0; height:0;
  border-left:70px solid transparent;
  border-right:70px solid transparent;
  border-bottom:105px solid #6f93a9;
}
.m1 { left:-30px; border-bottom-color:#6c8ba1; }
.m2 { left:42px; border-left-width:88px; border-right-width:88px; border-bottom-width:130px; border-bottom-color:#3f6b87; }
.m3 { right:-50px; border-bottom-color:#89a8b8; }

.stats-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:10px 18px;
  background:#fff;
  border-top:1px solid #edf2f7;
}
.stats-row div { display:flex; flex-direction:column; gap:2px; }
.stats-row b { color:var(--navy); font-size:15px; }
.stats-row span { color:#8796a9; font-size:7px; }

.laptop-base {
  height:18px;
  width:108%;
  margin-left:-4%;
  background:linear-gradient(#c8d0d8,#eef3f7);
  border-radius:0 0 22px 22px;
  clip-path: polygon(4% 0,96% 0,100% 100%,0 100%);
}
.phone {
  position:absolute;
  right:-12px;
  top:160px;
  width:145px;
  height:290px;
  padding:24px 15px 14px;
  border:8px solid #152130;
  background:#fff;
  border-radius:28px;
  transform:rotate(3deg);
  box-shadow:0 25px 45px rgba(15,35,64,.2);
}
.phone-notch {
  position:absolute;
  width:60px; height:9px;
  background:#152130;
  border-radius:0 0 8px 8px;
  left:50%; top:-1px; transform:translateX(-50%);
}
.phone small { font-size:6px; color:#748399; }
.phone h4 { font-size:17px; line-height:1.15; margin:25px 0 20px; }
.chart {
  height:70px;
  display:flex;
  align-items:end;
  gap:5px;
  border-bottom:1px solid #dce7f1;
  position:relative;
}
.chart::after {
  content:"";
  position:absolute;
  left:0; right:0; top:30px;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transform:skewY(-17deg);
}
.chart i {
  display:block;
  width:8px;
  background:linear-gradient(var(--cyan),var(--blue));
  opacity:.18;
  border-radius:4px 4px 0 0;
}
.growth { margin-top:18px; display:flex; flex-direction:column; }
.growth b { color:var(--blue); font-size:18px; }
.growth span { color:#8190a4; font-size:8px; }
.scribble, .process-scribble, .cta-note {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  color:#4d5f7a;
  transform:rotate(-5deg);
  opacity:.8;
}
.top-note { position:absolute; right:0; top:8px; font-size:16px; }
.floating-pill {
  position:absolute;
  padding:8px 12px;
  background:#fff;
  border:1px solid #e2ebf5;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  box-shadow:var(--shadow-soft);
}
.pill-a { left:-8px; bottom:12px; color:var(--green); }
.pill-b { right:100px; top:35px; color:var(--purple); }

.section { padding: 96px 0; }
.section-head { margin-bottom: 46px; }
.section-head.centered { text-align:center; max-width:760px; margin-inline:auto; }
.section-head h2, .cta-section h2 {
  margin:0;
  font:800 clamp(30px,3vw,43px)/1.15 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-1.5px;
}
.section-head p { margin:13px 0 0; color:var(--muted); line-height:1.7; }
.section-head.split {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
}
.section-head.split > div { max-width:760px; }
.section-head.split > p { max-width:310px; text-align:right; }
.text-link { color:var(--blue); font-weight:800; font-size:14px; white-space:nowrap; padding-bottom:7px; }

.services {
  background:#fff;
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.service-card {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  min-height:145px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 30px rgba(35,72,112,.05);
  transition:.25s ease;
}
.service-card:hover {
  transform:translateY(-5px);
  border-color:#bdd9f4;
  box-shadow:var(--shadow-soft);
}
.service-card h3 { margin:0 0 6px; font-size:16px; }
.service-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.service-icon {
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  color:#fff;
  font-size:21px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.gradient-blue { background:linear-gradient(135deg,#6078ff,#5848f7); }
.gradient-pink { background:linear-gradient(135deg,#ff5987,#f13d67); }
.gradient-cyan { background:linear-gradient(135deg,#22d4d2,#13aeb9); }
.gradient-green { background:linear-gradient(135deg,#4cd56f,#18a950); }
.gradient-orange { background:linear-gradient(135deg,#ffad2f,#f07900); }
.gradient-purple { background:linear-gradient(135deg,#8e78ff,#5a55de); }
.arrow { color:var(--blue); font-size:18px; }

.process-section {
  position:relative;
  overflow:hidden;
  padding: 88px 0 94px;
  background:linear-gradient(135deg,#071a34,#0b315c 60%,#0a2648);
  color:#fff;
}
.process-section::before,
.process-section::after {
  content:"";
  position:absolute;
  width:330px; height:330px;
  border-radius:60px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,rgba(24,113,234,.12),rgba(124,81,242,.12));
}
.process-section::before { left:-180px; top:-120px; }
.process-section::after { right:-200px; bottom:-170px; }

.section-head.light h2 { color:#fff; }
.section-head.light p { color:#b7c5d5; }
.section-head.light .eyebrow { color:#3ad9ec; }

.process-grid {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:46px;
  max-width:900px;
  margin:55px auto 0;
}
.process-grid::before {
  content:"";
  position:absolute;
  top:17px;
  left:10%;
  right:10%;
  border-top:1px dashed rgba(255,255,255,.35);
}
.process-item {
  position:relative;
  text-align:center;
  z-index:1;
}
.process-number {
  width:36px; height:36px;
  margin:0 auto 22px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  font-weight:800;
  box-shadow:0 0 0 5px rgba(255,255,255,.06);
}
.process-icon { font-size:28px; margin-bottom:12px; color:#9edbff; }
.process-item h3 { margin:0 0 8px; font-size:15px; }
.process-item p { margin:0; color:#b7c5d5; font-size:11px; line-height:1.6; }
.process-scribble {
  position:absolute;
  right:5%;
  bottom:34px;
  color:#d7e6f8;
  font-size:15px;
  text-align:center;
}

.testimonials { background:#fff; }
.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.testimonial-card {
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.person { display:flex; align-items:center; gap:12px; }
.avatar {
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#8ed0ff,#315ddd);
}
.person strong { display:block; font-size:13px; }
.person span { display:block; font-size:10px; color:#8695a8; margin-top:3px; }
.testimonial-card p { min-height:86px; margin:20px 0 12px; color:#5f6e82; font-size:13px; line-height:1.7; }
.stars { color:#ffad16; letter-spacing:2px; font-size:15px; }
.logos {
  margin-top:42px;
  padding-top:28px;
  border-top:1px solid #edf2f7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  color:#758398;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:800;
  opacity:.8;
}

.pricing { background:linear-gradient(180deg,#fff,#f6fbff); }
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.price-card {
  position:relative;
  padding:30px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 12px 36px rgba(27,67,108,.06);
}
.price-card.featured {
  transform:translateY(-8px);
  border:2px solid #18bfe0;
  box-shadow:0 22px 55px rgba(23,116,209,.18);
}
.popular {
  position:absolute;
  top:-1px; left:28px; right:28px;
  transform:translateY(-50%);
  padding:7px 12px;
  text-align:center;
  border-radius:999px;
  color:#fff;
  font-size:9px;
  letter-spacing:1px;
  font-weight:800;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
}
.price-top h3 { margin:0 0 3px; font-size:19px; }
.price-top p { margin:0; color:#8090a5; font-size:11px; }
.price { margin-top:18px; font:800 34px/1 "Plus Jakarta Sans",sans-serif; color:#0b1f3b; }
.price-card ul {
  list-style:none;
  padding:0;
  margin:26px 0 28px;
}
.price-card li {
  position:relative;
  padding-left:23px;
  margin:12px 0;
  color:#53647b;
  font-size:13px;
}
.price-card li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:#12ba83;
  font-weight:800;
}
.price-card .btn { width:100%; }

.cta-section {
  padding:74px 0;
  background:
    radial-gradient(circle at 10% 30%,rgba(49,151,255,.12),transparent 22%),
    linear-gradient(135deg,#f8fcff,#f5f8ff);
  border-top:1px solid #e7eef6;
}
.cta-grid {
  position:relative;
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:60px;
  align-items:center;
}
.cta-grid p { margin:14px 0 0; color:var(--muted); }
.cta-actions { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.contact-inline { display:flex; gap:18px; flex-wrap:wrap; color:#42556e; font-size:12px; font-weight:700; }
.cta-note {
  position:absolute;
  right:0;
  bottom:-46px;
  font-size:13px;
  color:#546a89;
}

footer { background:#fff; }
.footer-grid {
  padding:58px 0 42px;
  display:grid;
  grid-template-columns:1.6fr .8fr 1fr .7fr;
  gap:42px;
}
.footer-brand p, footer p {
  color:#7b899c;
  font-size:12px;
  line-height:1.7;
}
footer h4 { margin:0 0 13px; font-size:12px; }
footer > .container a:not(.brand), .footer-grid > div > a {
  display:block;
  margin:8px 0;
  color:#60708a;
  font-size:11px;
}
.socials { display:flex; gap:9px; }
.socials a {
  width:32px; height:32px;
  display:grid !important; place-items:center;
  border-radius:50%;
  margin:0 !important;
  background:#edf4fb;
  font-weight:800;
}
.footer-bottom {
  min-height:62px;
  border-top:1px solid #edf1f5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#8492a4;
  font-size:10px;
}
.footer-bottom div { display:flex; gap:16px; }
.footer-bottom a { margin:0 !important; }

.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.10s; }
.delay-2 { transition-delay:.20s; }
.delay-3 { transition-delay:.30s; }

@media (max-width: 1080px) {
  .main-nav { gap:18px; }
  .btn-nav { display:none; }
  .hero-grid { gap:35px; }
  .hero-features { grid-template-columns:1fr; gap:12px; }
  .hero { min-height:auto; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .top-note { display:none; }
}

@media (max-width: 860px) {
  .nav-wrap { height:70px; }
  .menu-toggle { display:block; }
  .main-nav {
    position:fixed;
    inset:70px 0 auto 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:18px 20px 26px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 35px rgba(15,35,64,.1);
    transform:translateY(-120%);
    transition:.28s ease;
    z-index:-1;
  }
  .main-nav.open { transform:none; }
  .main-nav a { padding:14px 8px; border-bottom:1px solid #eef2f6; }
  .main-nav a.active::after { display:none; }

  .hero { padding-top:64px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }
  .hero-copy > p { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-features { grid-template-columns:repeat(3,1fr); text-align:left; }
  .hero-visual { min-height:460px; max-width:620px; margin:0 auto; width:100%; }

  .process-grid { gap:22px; }
  .process-scribble { display:none; }
  .testimonials-grid, .pricing-grid { grid-template-columns:1fr; }
  .price-card.featured { transform:none; }
  .section-head.split { align-items:flex-start; flex-direction:column; }
  .section-head.split > p { text-align:left; }
  .cta-grid { grid-template-columns:1fr; gap:30px; }
  .cta-note { display:none; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px) {
  .container { width:min(calc(100% - 28px), var(--container)); }
  .section { padding:72px 0; }
  .hero { padding:48px 0 62px; }
  .hero h1 { font-size:42px; letter-spacing:-2px; }
  .hero-copy > p { font-size:16px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .hero-features { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .service-card { min-height:130px; padding:20px; }
  .hero-visual { min-height:350px; }
  .laptop { width:96%; top:45px; left:-8px; }
  .laptop-screen { min-height:245px; border-width:7px; }
  .mock-hero { min-height:160px; padding:16px; }
  .mock-copy h3 { font-size:20px; }
  .mountain-card { min-height:120px; }
  .phone { width:105px; height:220px; right:-6px; top:120px; border-width:6px; padding:18px 10px 10px; }
  .phone h4 { font-size:12px; margin:16px 0 12px; }
  .chart { height:50px; }
  .floating-pill { display:none; }

  .process-grid {
    grid-template-columns:repeat(2,1fr);
    gap:38px 20px;
  }
  .process-grid::before { display:none; }

  .logos { justify-content:center; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; justify-content:center; padding:18px 0; }
  .footer-bottom div { flex-wrap:wrap; }
}

/* ===== V2: večja tipografija, boljši razmiki in portfolio ===== */
body { font-size: 16px; line-height: 1.6; }
.main-nav a { font-size: 15px; }
.btn { font-size: 15px; min-height: 48px; padding-inline: 22px; }
.hero-copy > p { font-size: 19px; line-height: 1.72; }
.eyebrow { font-size: 13px; }
.mini-feature strong { font-size: 13px; }
.mini-feature small { font-size: 11px; }
.section-head p { font-size: 16px; }
.service-card h3 { font-size: 18px; }
.service-card p { font-size: 14px; line-height: 1.65; }
.process-item h3 { font-size: 17px; }
.process-item p { font-size: 13px; line-height: 1.65; }
.person strong { font-size: 14px; }
.person span { font-size: 11px; }
.testimonial-card p { font-size: 15px; min-height: 110px; }
.price-top h3 { font-size: 21px; }
.price-top p { font-size: 13px; }
.price-card li { font-size: 14px; }
footer h4 { font-size: 13px; }
footer > .container a:not(.brand), .footer-grid > div > a { font-size: 12px; }
.footer-brand p, footer p { font-size: 13px; }

.hero-grid { align-items: center; }
.hero-visual { display: flex; align-items: center; justify-content: center; }
.laptop { left: 0; width: 90%; }
.phone { right: -4px; }
.section-head.split { align-items: center; }
.process-grid { max-width: 980px; }
.process-item { min-width: 0; }

.portfolio-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.portfolio-section .section-head { margin-bottom: 34px; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.project-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 44px rgba(21,65,110,.08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.project-card:hover {
  transform: translateY(-7px);
  border-color: #c7dbef;
  box-shadow: 0 24px 64px rgba(21,65,110,.14);
}
.project-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #edf4fa;
}
.project-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,29,58,.28));
  opacity: 0;
  transition: opacity .3s ease;
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover .project-image img { transform: scale(1.035); }
.project-card:hover .project-image::after { opacity: 1; }
.project-open {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7,29,58,.88);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  transition: .3s ease;
}
.project-card:hover .project-open { opacity: 1; transform: none; }
.project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 24px;
}
.project-info span {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1.15px;
  font-weight: 800;
}
.project-info h3 {
  margin: 0;
  font: 800 21px/1.25 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.55px;
}
.project-info > a {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: #edf6ff;
  font-weight: 800;
  transition: .25s ease;
}
.project-info > a:hover { color: #fff; background: var(--blue); transform: rotate(8deg); }

.testimonial-heading {
  max-width: 720px;
  margin: 84px auto 34px;
  text-align: center;
}
.testimonial-heading h2 {
  margin: 0;
  font: 800 clamp(28px, 3vw, 40px)/1.15 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -1.3px;
}
.testimonial-card { padding: 30px; }

@media (max-width: 1080px) {
  .hero-visual { transform: scale(.96); transform-origin: center; }
  .portfolio-grid { gap: 22px; }
}

@media (max-width: 860px) {
  .section-head.split { align-items: flex-start; }
  .hero-visual { transform: none; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .project-image { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .hero-copy > p { font-size: 17px; }
  .section-head p { font-size: 15px; }
  .service-card p { font-size: 13px; }
  .project-info { padding: 18px; }
  .project-info h3 { font-size: 18px; }
  .project-open { opacity: 1; transform: none; right: 12px; bottom: 12px; }
  .testimonial-heading { margin-top: 62px; }
  .testimonial-card p { min-height: 0; font-size: 14px; }
}


/* ===== V3: hero slogan, unified blue buttons & service subpages ===== */
.btn-primary,
.btn-nav {
  background: #0b72e7;
  background-image: none;
  border-color: #0b72e7;
  box-shadow: 0 12px 30px rgba(11,114,231,.23);
}
.btn-primary:hover,
.btn-nav:hover {
  background: #085fca;
  border-color: #085fca;
  box-shadow: 0 15px 32px rgba(11,114,231,.28);
}

.hero-visual { isolation: isolate; overflow: visible; }
.laptop { z-index: 2; }
.phone { z-index: 4; }
.floating-pill { z-index: 5; }
.top-note {
  display: flex;
  position: absolute;
  z-index: 12;
  right: -34px;
  top: -10px;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 22px 17px;
  border: 1px solid rgba(198,217,237,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 50px rgba(18,62,109,.15);
  color: #122d50;
  font-size: 29px;
  line-height: 1.02;
  letter-spacing: -1.2px;
  transform: rotate(-4deg);
  opacity: 1;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.top-note span { font-weight: 600; }
.top-note strong {
  color: #0b72e7;
  font-size: 1.12em;
  font-weight: 800;
}
.top-note b {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: #0b72e7;
  font-size: 18px;
}

.service-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.service-card .arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf6ff;
  transition: .25s ease;
}
.service-card:hover .arrow {
  color: #fff;
  background: #0b72e7;
  transform: translateX(3px);
}

/* Service detail pages */
.service-page { background: #fff; }
.service-page .site-header .main-nav a.active::after { display: none; }
.service-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: #718199;
  font-size: 13px;
  font-weight: 700;
}
.service-breadcrumb a { color: #0b72e7; }
.service-breadcrumb i { font-style: normal; color: #aab6c6; }
.service-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 92px;
  background:
    radial-gradient(circle at 8% 18%, rgba(11,114,231,.12), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(30,194,225,.11), transparent 26%),
    linear-gradient(180deg,#fff,#f6faff);
  border-bottom: 1px solid #e7eef6;
}
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(380px,.92fr);
  align-items: center;
  gap: 74px;
}
.service-hero h1 {
  margin: 0;
  max-width: 760px;
  font: 800 clamp(44px,5.2vw,68px)/1.04 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -2.7px;
}
.service-hero h1 em {
  display: block;
  font-style: normal;
  color: #0b72e7;
}
.service-hero-copy > p {
  max-width: 720px;
  margin: 25px 0 0;
  color: #5b6c83;
  font-size: 19px;
  line-height: 1.75;
}
.service-hero-actions { display: flex; gap: 13px; margin-top: 30px; flex-wrap: wrap; }
.service-trust {
  display: flex;
  gap: 24px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.service-trust span {
  position: relative;
  padding-left: 22px;
  color: #52647d;
  font-size: 13px;
  font-weight: 800;
}
.service-trust span::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: #13b77c;
  font-size: 15px;
}
.service-visual {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
}
.service-visual-main {
  position: relative;
  width: min(100%,440px);
  min-height: 350px;
  padding: 38px;
  overflow: hidden;
  border: 1px solid #dce8f4;
  border-radius: 34px;
  background: linear-gradient(145deg,#0b72e7,#174fb8);
  box-shadow: 0 35px 80px rgba(18,75,145,.24);
  color: #fff;
}
.service-visual-main::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.service-visual-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #0b72e7;
  background: #fff;
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}
.service-visual-main small {
  display: block;
  margin-top: 45px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
}
.service-visual-main h2 {
  max-width: 320px;
  margin: 8px 0 0;
  font: 800 31px/1.12 "Plus Jakarta Sans",sans-serif;
  letter-spacing: -1px;
}
.service-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #dce8f4;
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 45px rgba(20,68,117,.14);
  color: #233d5e;
  font-size: 13px;
  font-weight: 800;
}
.service-chip::before {
  content: "✓";
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9fbf4;
  color: #0dac74;
}
.service-chip.one { left: -8px; bottom: 58px; }
.service-chip.two { right: -15px; top: 56px; }

.service-intro { padding: 92px 0 76px; }
.service-intro-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 82px;
  align-items: start;
}
.service-intro h2,
.service-offer h2,
.service-process-detail h2,
.service-benefits h2,
.other-services h2 {
  margin: 0;
  font: 800 clamp(30px,3.5vw,45px)/1.12 "Plus Jakarta Sans",sans-serif;
  letter-spacing: -1.5px;
}
.service-intro-copy p {
  margin: 0 0 19px;
  color: #596a81;
  font-size: 17px;
  line-height: 1.8;
}
.service-highlight {
  margin-top: 30px;
  padding: 24px 26px;
  border-left: 4px solid #0b72e7;
  border-radius: 0 16px 16px 0;
  background: #f2f8ff;
  color: #24415f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}
.service-offer { padding: 78px 0 92px; background: #f7fbff; }
.service-offer .section-head { max-width: 780px; }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.offer-item {
  position: relative;
  min-height: 170px;
  padding: 27px 28px 26px 76px;
  border: 1px solid #e0eaf4;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 9px 30px rgba(24,68,111,.05);
}
.offer-item .check {
  position: absolute;
  left: 27px;
  top: 28px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eaf4ff;
  color: #0b72e7;
  font-weight: 900;
}
.offer-item h3 { margin: 0 0 8px; font-size: 18px; }
.offer-item p { margin: 0; color: #65758a; font-size: 14px; line-height: 1.7; }

.service-process-detail { padding: 92px 0; }
.detail-steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
  margin-top: 42px;
}
.detail-step {
  padding: 28px;
  border: 1px solid #e0e9f3;
  border-radius: 18px;
  background: #fff;
}
.detail-step b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
  background: #0b72e7;
}
.detail-step h3 { margin: 0 0 8px; font-size: 17px; }
.detail-step p { margin: 0; color: #65758a; font-size: 13px; line-height: 1.7; }

.service-benefits {
  padding: 86px 0;
  color: #fff;
  background: #082343;
}
.benefits-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.service-benefits h2 { color: #fff; }
.service-benefits p { color: #bed0e4; font-size: 16px; line-height: 1.75; }
.benefit-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.benefit-list div {
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  font-size: 14px;
  font-weight: 700;
}
.benefit-list div::before { content: "✓"; margin-right: 9px; color: #43d9aa; }

.other-services { padding: 92px 0; }
.other-service-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 38px;
}
.other-service-card {
  padding: 23px;
  border: 1px solid #e0e9f3;
  border-radius: 17px;
  background: #fff;
  transition: .25s ease;
}
.other-service-card:hover { transform: translateY(-4px); border-color: #bcd7f2; box-shadow: 0 13px 34px rgba(20,67,113,.09); }
.other-service-card small { display: block; margin-bottom: 7px; color: #0b72e7; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.other-service-card strong { display: block; font-size: 16px; }
.other-service-card span { display: block; margin-top: 12px; color: #0b72e7; font-size: 13px; font-weight: 800; }
.service-page-cta { margin-top: 0; }

@media (max-width: 1080px) {
  .top-note { display: flex; right: -5px; top: -24px; font-size: 25px; }
  .service-hero-grid { grid-template-columns: 1fr .82fr; gap: 42px; }
  .service-visual-main { min-height: 330px; }
}
@media (max-width: 860px) {
  .top-note { display: flex; right: 8px; top: 0; font-size: 24px; padding: 13px 18px; }
  .service-hero { padding: 62px 0 72px; }
  .service-hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .service-hero-copy { text-align: center; }
  .service-hero-copy > p { margin-inline: auto; }
  .service-hero-actions, .service-trust { justify-content: center; }
  .service-breadcrumb { justify-content: center; }
  .service-visual { max-width: 590px; width: 100%; margin: 0 auto; }
  .service-intro-grid, .benefits-grid { grid-template-columns: 1fr; gap: 36px; }
  .detail-steps { grid-template-columns: repeat(2,1fr); }
  .other-service-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .top-note { right: 5px; top: -4px; font-size: 18px; border-radius: 14px; padding: 10px 14px; }
  .top-note b { font-size: 13px; right: 7px; bottom: 6px; }
  .service-hero h1 { font-size: 41px; letter-spacing: -1.9px; }
  .service-hero-copy > p { font-size: 17px; }
  .service-hero-actions { flex-direction: column; }
  .service-hero-actions .btn { width: 100%; }
  .service-visual { min-height: 350px; }
  .service-visual-main { min-height: 305px; padding: 30px; }
  .service-visual-main h2 { font-size: 27px; }
  .service-chip { min-height: 45px; padding-inline: 13px; font-size: 11px; }
  .service-chip.one { left: 0; bottom: 20px; }
  .service-chip.two { right: 0; top: 40px; }
  .service-intro { padding: 72px 0 60px; }
  .service-offer, .service-process-detail, .other-services { padding: 68px 0; }
  .offer-grid, .detail-steps, .benefit-list, .other-service-grid { grid-template-columns: 1fr; }
  .offer-item { padding: 24px 22px 24px 68px; }
}


/* ===== V4: professional polish, contact, about, FAQ, accessibility ===== */
:root { --blue-dark:#075abf; --surface:#f7fbff; --ink:#0a203d; }
::selection { background:#dbeeff; color:#092849; }
:focus-visible { outline:3px solid rgba(11,114,231,.32); outline-offset:3px; border-radius:5px; }
body { text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
.site-header { box-shadow:0 1px 0 rgba(219,231,242,.65); }
.nav-wrap { gap:28px; }
.main-nav { gap:23px; }
.main-nav a { font-size:14px; }
.btn { position:relative; overflow:hidden; }
.btn-primary::after, .btn-nav::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 46%,transparent 70%); transform:translateX(-130%); transition:transform .65s ease; }
.btn-primary:hover::after, .btn-nav:hover::after { transform:translateX(130%); }
.btn-primary, .btn-nav { background:#0b72e7 !important; box-shadow:0 12px 28px rgba(11,114,231,.20); }
.btn-primary:hover, .btn-nav:hover { background:#075fca !important; }
.hero { min-height:720px; padding-top:96px; }
.hero-copy { position:relative; z-index:3; }
.hero h1 { max-width:680px; }
.hero-copy > p { max-width:650px; }
.hero-visual { min-height:500px; }
.top-note { right:-26px; top:-42px; min-width:218px; padding:20px 27px 23px; font-size:34px; line-height:.98; border:0; box-shadow:0 24px 70px rgba(13,55,99,.20); }
.top-note::before { content:""; position:absolute; inset:-3px; z-index:-1; border-radius:23px; background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(237,247,255,.96)); }
.top-note strong { margin-top:4px; font-size:1.08em; }
.top-note b { font-size:24px; right:15px; bottom:11px; }
.stats-row b { font-size:11px; letter-spacing:.8px; color:#0b72e7; }
.stats-row span { font-size:8px; }
.growth b { font-size:14px; letter-spacing:.7px; }
.section-head h2 { text-wrap:balance; }
.section-head p { max-width:720px; }
.service-card { min-height:162px; }
.service-card h3 { font-size:18px; }
.service-card p { font-size:14px; }
.project-card { box-shadow:0 16px 48px rgba(20,62,103,.08); }
.testimonial-heading p { max-width:720px; margin:14px auto 0; color:var(--muted); font-size:16px; line-height:1.75; }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.proof-card { min-height:225px; padding:30px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 12px 36px rgba(22,64,108,.06); }
.proof-card > span { display:inline-grid; place-items:center; width:42px; height:42px; margin-bottom:24px; border-radius:12px; color:#0b72e7; background:#eaf4ff; font-size:12px; font-weight:800; }
.proof-card h3 { margin:0 0 9px; font:800 19px/1.25 "Plus Jakarta Sans",sans-serif; }
.proof-card p { margin:0; color:#63758c; font-size:14px; line-height:1.75; }
.price small { margin-right:5px; color:#798aa0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }
.price-custom { font-size:27px; }
.pricing-note { max-width:850px; margin:30px auto 0; padding:18px 24px; text-align:center; border:1px solid #ddeaf5; border-radius:14px; background:#fff; color:#5d6f86; font-size:13px; line-height:1.7; }
.pricing-note strong { color:#163656; }

/* FAQ */
.faq-section, .service-faq-section { background:#fff; }
.service-faq-section { background:#f8fbff; }
.faq-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:74px; align-items:start; }
.faq-intro { position:sticky; top:112px; }
.faq-intro h2 { margin:0; font:800 clamp(30px,3.5vw,45px)/1.12 "Plus Jakarta Sans",sans-serif; letter-spacing:-1.5px; }
.faq-intro p { margin:16px 0 18px; color:var(--muted); font-size:16px; line-height:1.75; }
.faq-list { border-top:1px solid #dfe9f3; }
.faq-item { border-bottom:1px solid #dfe9f3; }
.faq-question { width:100%; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 4px; border:0; background:transparent; color:#102945; text-align:left; cursor:pointer; font-weight:800; font-size:17px; }
.faq-question b { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#edf6ff; color:#0b72e7; font-size:20px; transition:.25s ease; }
.faq-item.open .faq-question b { color:#fff; background:#0b72e7; transform:rotate(45deg); }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-answer > p { overflow:hidden; margin:0; color:#61738a; font-size:15px; line-height:1.8; }
.faq-item.open .faq-answer { grid-template-rows:1fr; }
.faq-item.open .faq-answer > p { padding:0 54px 25px 4px; }

/* CTA and footer */
.cta-section { position:relative; overflow:hidden; padding:84px 0; }
.cta-section::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; right:-120px; top:-180px; background:rgba(11,114,231,.08); }
.cta-grid { grid-template-columns:1.18fr .82fr; }
.cta-section h2 { max-width:760px; }
.contact-inline span { color:#7b8ca2; font-size:12px; }
.footer-grid-v4 { grid-template-columns:1.45fr .7fr .9fr 1fr; }
.footer-badge { display:inline-flex; margin-top:12px; padding:7px 11px; border-radius:999px; background:#f0f6fb; color:#62748b; font-size:10px; font-weight:800; letter-spacing:.35px; }
.footer-email { color:#0b72e7 !important; font-weight:800 !important; }

/* Shared inner-page hero */
.page-hero { position:relative; overflow:hidden; padding:92px 0 100px; background:radial-gradient(circle at 8% 14%,rgba(11,114,231,.12),transparent 27%),radial-gradient(circle at 88% 12%,rgba(20,201,222,.10),transparent 26%),linear-gradient(180deg,#fff,#f6faff); border-bottom:1px solid #e7eef6; }
.page-hero-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:76px; align-items:center; }
.page-hero h1, .contact-hero h1 { margin:0; font:800 clamp(46px,5.4vw,70px)/1.03 "Plus Jakarta Sans",sans-serif; letter-spacing:-2.8px; }
.page-hero h1 span, .contact-hero h1 span { display:block; color:#0b72e7; }
.page-hero p, .contact-hero p { max-width:720px; margin:25px 0 0; color:#5c6e85; font-size:19px; line-height:1.75; }
.about-visual { min-height:440px; display:grid; place-items:center; }
.about-orbit { position:relative; width:390px; height:390px; display:grid; place-items:center; border:1px solid #d4e5f5; border-radius:50%; background:radial-gradient(circle,#fff 0 43%,#f2f8ff 44% 66%,transparent 67%); box-shadow:0 34px 80px rgba(18,75,145,.12); }
.about-orbit::before, .about-orbit::after { content:""; position:absolute; border:1px dashed #bfd9ef; border-radius:50%; }
.about-orbit::before { inset:34px; } .about-orbit::after { inset:78px; }
.about-core { position:relative; z-index:3; width:210px; min-height:175px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; border-radius:30px; background:#0b72e7; color:#fff; box-shadow:0 24px 55px rgba(11,114,231,.25); }
.about-core span { width:55px; height:55px; display:grid; place-items:center; margin-bottom:16px; border-radius:16px; background:#fff; color:#0b72e7; font-weight:900; }
.about-core strong { font-size:13px; line-height:1.6; }
.about-orbit .dot { position:absolute; width:18px; height:18px; border:4px solid #fff; border-radius:50%; background:#13c8df; box-shadow:0 6px 15px rgba(0,0,0,.12); }
.about-orbit .d1 { top:48px; left:66px; } .about-orbit .d2 { right:38px; top:178px; background:#745cf2; } .about-orbit .d3 { bottom:34px; left:150px; background:#19ba7a; }
.about-story { background:#fff; }
.about-story-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:86px; }
.about-story h2 { margin:0; font:800 clamp(32px,3.6vw,47px)/1.1 "Plus Jakarta Sans",sans-serif; letter-spacing:-1.6px; }
.about-story p { margin:0 0 20px; color:#5d6f86; font-size:17px; line-height:1.85; }
.values-section { background:#f7fbff; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value-card { padding:29px; border:1px solid #dfe9f3; border-radius:20px; background:#fff; }
.value-card > span { color:#0b72e7; font-size:11px; font-weight:900; letter-spacing:1.5px; }
.value-card h3 { margin:18px 0 9px; font-size:18px; }
.value-card p { margin:0; color:#65768b; font-size:14px; line-height:1.75; }
.about-process { margin:0; }

/* Contact */
.contact-hero { padding:82px 0 100px; }
.contact-hero-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:start; }
.contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:38px; }
.contact-card { display:flex; flex-direction:column; min-height:136px; padding:20px; border:1px solid #dfe9f3; border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 10px 30px rgba(22,64,108,.04); }
.contact-card small { color:#0b72e7; font-size:10px; font-weight:900; letter-spacing:1.2px; }
.contact-card strong { margin-top:10px; font-size:15px; }
.contact-card span { margin-top:auto; color:#76879b; font-size:11px; }
.contact-form-card { padding:34px; border:1px solid #dce8f4; border-radius:26px; background:#fff; box-shadow:0 30px 70px rgba(19,67,116,.12); }
.form-head > span { color:#0b72e7; font-size:10px; font-weight:900; letter-spacing:1.4px; }
.form-head h2 { margin:7px 0 5px; font:800 28px/1.2 "Plus Jakarta Sans",sans-serif; }
.form-head p { margin:0 0 24px; font-size:12px; color:#7a8ba0; }
.project-form { display:grid; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.project-form label { display:grid; gap:7px; color:#2c4664; font-size:12px; font-weight:800; }
.project-form input, .project-form select, .project-form textarea { width:100%; border:1px solid #cfdeeb; border-radius:12px; background:#fbfdff; color:#102945; padding:13px 14px; font-size:14px; outline:0; transition:.2s ease; }
.project-form input, .project-form select { min-height:48px; }
.project-form textarea { resize:vertical; min-height:130px; }
.project-form input:focus, .project-form select:focus, .project-form textarea:focus { border-color:#0b72e7; background:#fff; box-shadow:0 0 0 4px rgba(11,114,231,.08); }
.optional { color:#93a0b1; font-weight:600; }
.consent { display:flex !important; grid-template-columns:auto 1fr; align-items:flex-start; gap:10px !important; font-weight:600 !important; color:#63758b !important; line-height:1.6; }
.consent input { width:18px; min-height:18px; height:18px; margin-top:2px; }
.consent a { color:#0b72e7; text-decoration:underline; }
.form-submit { width:100%; }
.form-status { min-height:20px; font-size:12px; color:#5f7288; }
.form-status.error { color:#bc334b; } .form-status.success { color:#0c8b61; }
.contact-expect { background:#fff; }
.detail-steps.three { grid-template-columns:repeat(3,1fr); max-width:930px; margin-inline:auto; }

/* Legal / 404 */
.narrow { max-width:850px; }
.legal-hero { padding:86px 0 54px; background:#f7fbff; border-bottom:1px solid #e3edf6; }
.legal-hero h1 { margin:0; font:800 clamp(40px,5vw,61px)/1.05 "Plus Jakarta Sans",sans-serif; letter-spacing:-2px; }
.legal-hero p { color:#607188; font-size:16px; line-height:1.8; }
.legal-content { padding:68px 0 92px; }
.legal-content h2 { margin:36px 0 10px; font-size:22px; }
.legal-content h2:first-child { margin-top:0; }
.legal-content p { color:#5e7086; font-size:15px; line-height:1.85; }
.legal-content a { color:#0b72e7; font-weight:700; }
.legal-notice { margin-top:38px; padding:22px; border-left:4px solid #f0a42b; border-radius:0 14px 14px 0; background:#fff9ee; color:#6f5b37; font-size:13px; line-height:1.7; }
.not-found { min-height:70vh; display:grid; place-items:center; padding:90px 0; background:radial-gradient(circle at 50% 15%,rgba(11,114,231,.11),transparent 34%),#f8fbff; }
.not-found-card { max-width:820px; margin:auto; text-align:center; }
.error-code { display:block; margin-bottom:8px; color:#0b72e7; font:900 clamp(75px,12vw,140px)/.9 "Plus Jakarta Sans",sans-serif; opacity:.14; }
.not-found h1 { margin:0; font:800 clamp(38px,5vw,62px)/1.06 "Plus Jakarta Sans",sans-serif; letter-spacing:-2px; }
.not-found h1 span { display:block; color:#0b72e7; }
.not-found p { color:#65768c; font-size:17px; }
.not-found .hero-actions { justify-content:center; }

/* Back to top */
.back-to-top { position:fixed; z-index:90; right:24px; bottom:24px; width:48px; height:48px; display:grid; place-items:center; border:1px solid #cfe0ef; border-radius:50%; background:rgba(255,255,255,.94); color:#0b72e7; box-shadow:0 12px 30px rgba(17,59,103,.13); font-size:20px; cursor:pointer; opacity:0; transform:translateY(14px); pointer-events:none; transition:.25s ease; }
.back-to-top.show { opacity:1; transform:none; pointer-events:auto; }

@media (max-width:1080px) {
  .top-note { right:-2px; top:-32px; font-size:29px; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero-grid, .contact-hero-grid { gap:44px; }
  .main-nav { gap:17px; }
}
@media (max-width:860px) {
  .hero { min-height:auto; }
  .top-note { right:5px; top:-12px; font-size:25px; }
  .proof-grid { grid-template-columns:1fr; }
  .faq-layout { grid-template-columns:1fr; gap:38px; }
  .faq-intro { position:static; }
  .footer-grid-v4 { grid-template-columns:repeat(2,1fr); }
  .page-hero-grid, .contact-hero-grid, .about-story-grid { grid-template-columns:1fr; gap:42px; }
  .page-hero > .container > div:first-child, .contact-hero-grid > div:first-child { text-align:center; }
  .page-hero .service-breadcrumb, .contact-hero .service-breadcrumb, .page-hero .hero-actions { justify-content:center; }
  .page-hero p, .contact-hero p { margin-inline:auto; }
  .about-visual { min-height:390px; }
  .cta-grid { grid-template-columns:1fr; }
  .detail-steps.three { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .top-note { min-width:0; right:1px; top:-7px; font-size:19px; padding:11px 15px 14px; border-radius:15px; }
  .top-note b { font-size:14px; }
  .proof-card { min-height:0; }
  .values-grid { grid-template-columns:1fr; }
  .about-orbit { width:310px; height:310px; }
  .about-core { width:185px; min-height:155px; }
  .contact-cards { grid-template-columns:1fr; }
  .contact-form-card { padding:23px 18px; border-radius:20px; }
  .form-row { grid-template-columns:1fr; }
  .faq-question { min-height:70px; font-size:15px; }
  .faq-item.open .faq-answer > p { padding-right:4px; }
  .footer-grid-v4 { grid-template-columns:1fr; }
  .back-to-top { right:14px; bottom:14px; width:44px; height:44px; }
}

/* V4 icon normalization */
.service-icon svg, .service-visual-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.service-visual-icon svg { width:32px; height:32px; }

/* ===== V7: verified homepage hero reference mockup ===== */
.hero.hero-v7 {
  min-height: 680px;
  padding: 72px 0 68px;
  overflow: hidden;
}

.hero-v7 .hero-grid {
  grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);
  gap: 38px;
  align-items: center;
}

.hero-v7 .hero-copy {
  padding: 22px 0 12px;
}

.hero-v7 .hero-copy h1 {
  max-width: 610px;
  font-size: clamp(48px, 4.7vw, 67px);
  line-height: 1.03;
}

.hero-v7 .hero-copy > p {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.72;
}

.hero-v7 .hero-features {
  margin-top: 34px;
  gap: 14px;
}

.hero-v7 .mini-feature strong { font-size: 13px; }
.hero-v7 .mini-feature small { font-size: 10px; }

.hero-reference-v7 {
  position: relative;
  min-width: 0;
  height: 520px;
  isolation: isolate;
}

.hero-reference-v7 .hero-idea-note {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  width: 198px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(209,225,239,.82);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 20px 48px rgba(20,61,103,.13);
  transform: rotate(-3deg);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  font-size: 25px;
  line-height: .98;
  letter-spacing: -1.1px;
  color: #173451;
}

.hero-reference-v7 .hero-idea-note span { font-weight: 600; }
.hero-reference-v7 .hero-idea-note strong {
  margin-top: 4px;
  color: #0b72e7;
  font-size: 1.08em;
  font-weight: 800;
}
.hero-reference-v7 .hero-idea-note b {
  position: absolute;
  right: 15px;
  bottom: 10px;
  color: #0b72e7;
  font-size: 18px;
  font-style: normal;
}

.hero-reference-v7 .portfolio-laptop-link {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 18px;
  top: 105px;
  display: block;
  color: inherit;
  text-decoration: none;
}

.hero-reference-v7 .portfolio-laptop {
  position: relative;
  width: 100%;
  max-width: 610px;
  margin: 0 auto;
  transform: perspective(1500px) rotateY(-5deg) rotateX(1.5deg);
  transform-origin: 52% 70%;
  filter: drop-shadow(0 34px 28px rgba(17,46,78,.18));
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}

.hero-reference-v7 .portfolio-laptop-link:hover .portfolio-laptop {
  transform: perspective(1500px) rotateY(-2deg) rotateX(.5deg) translateY(-4px);
  filter: drop-shadow(0 39px 34px rgba(17,46,78,.22));
}

.hero-reference-v7 .portfolio-screen-shell {
  position: relative;
  padding: 9px 9px 11px;
  background: linear-gradient(145deg,#111b27,#253240);
  border: 1px solid #344250;
  border-radius: 19px 19px 10px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.hero-reference-v7 .portfolio-camera {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #697683;
}

.hero-reference-v7 .portfolio-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1170 / 760;
  border-radius: 11px 11px 5px 5px;
  background: #eef4f8;
}

.hero-reference-v7 .portfolio-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-reference-v7 .portfolio-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg,rgba(255,255,255,.10),transparent 22%,transparent 78%,rgba(255,255,255,.035));
}

.hero-reference-v7 .portfolio-base {
  position: relative;
  width: 108%;
  height: 22px;
  margin-left: -4%;
  background: linear-gradient(180deg,#e7ebef 0%,#b5bec7 50%,#edf1f4 100%);
  clip-path: polygon(3.2% 0,96.8% 0,100% 100%,0 100%);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 9px 12px rgba(42,57,73,.12);
}

.hero-reference-v7 .portfolio-base::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 96px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: rgba(98,111,124,.36);
}

.hero-reference-v7 .portfolio-project-badge {
  position: absolute;
  z-index: 14;
  left: 5px;
  bottom: 4px;
  width: 232px;
  padding: 15px 17px;
  border: 1px solid rgba(205,220,235,.92);
  border-radius: 17px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 42px rgba(17,58,101,.14);
  backdrop-filter: blur(10px);
}

.hero-reference-v7 .portfolio-project-badge small {
  display: block;
  color: #0b72e7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.15px;
}
.hero-reference-v7 .portfolio-project-badge strong {
  display: block;
  margin-top: 6px;
  color: #102a47;
  font: 800 18px/1.2 "Plus Jakarta Sans", sans-serif;
}
.hero-reference-v7 .portfolio-project-badge span {
  display: block;
  margin-top: 3px;
  color: #74869b;
  font-size: 10px;
}
.hero-reference-v7 .portfolio-project-badge a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: #0b72e7;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 1120px) {
  .hero-v7 .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(455px, .95fr);
    gap: 26px;
  }
  .hero-reference-v7 { height: 485px; }
  .hero-reference-v7 .hero-idea-note { width: 176px; font-size: 21px; }
  .hero-reference-v7 .portfolio-laptop-link { top: 110px; right: 6px; }
}

@media (max-width: 860px) {
  .hero.hero-v7 { padding-top: 52px; }
  .hero-v7 .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-v7 .hero-copy { text-align: center; padding-top: 0; }
  .hero-v7 .hero-copy > p { margin-inline: auto; }
  .hero-v7 .hero-actions { justify-content: center; }
  .hero-v7 .hero-features { max-width: 690px; margin-inline: auto; }
  .hero-reference-v7 { width: min(100%, 700px); height: 500px; margin: 0 auto; }
  .hero-reference-v7 .portfolio-laptop-link { top: 102px; left: 5%; right: 5%; }
  .hero-reference-v7 .portfolio-project-badge { left: 4%; bottom: 5px; }
  .hero-reference-v7 .hero-idea-note { right: 4%; top: 3px; }
}

@media (max-width: 640px) {
  .hero.hero-v7 { padding: 44px 0 54px; }
  .hero-v7 .hero-copy h1 { font-size: 42px; }
  .hero-v7 .hero-features { grid-template-columns: 1fr; }
  .hero-reference-v7 { height: 375px; }
  .hero-reference-v7 .hero-idea-note {
    width: 145px;
    padding: 12px 14px 14px;
    font-size: 17px;
    border-radius: 15px;
  }
  .hero-reference-v7 .hero-idea-note b { right: 9px; bottom: 7px; font-size: 13px; }
  .hero-reference-v7 .portfolio-laptop-link { top: 76px; left: 0; right: 0; }
  .hero-reference-v7 .portfolio-laptop { transform: none; max-width: 100%; }
  .hero-reference-v7 .portfolio-laptop-link:hover .portfolio-laptop { transform: translateY(-2px); }
  .hero-reference-v7 .portfolio-screen-shell { padding: 6px 6px 8px; border-radius: 13px 13px 7px 7px; }
  .hero-reference-v7 .portfolio-base { height: 15px; border-radius: 0 0 17px 17px; }
  .hero-reference-v7 .portfolio-project-badge {
    left: 1%;
    bottom: 0;
    width: 186px;
    padding: 11px 12px;
    border-radius: 13px;
  }
  .hero-reference-v7 .portfolio-project-badge strong { font-size: 14px; }
  .hero-reference-v7 .portfolio-project-badge span,
  .hero-reference-v7 .portfolio-project-badge a { font-size: 8px; }
}

/* =========================================================
   V8 PREMIUM HERO — isolated from the rest of the website
   ========================================================= */
.hero.hero-pro-v8 {
  position: relative;
  min-height: 700px;
  padding: 96px 0 88px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 12%, rgba(62, 197, 255, .13), transparent 29%),
    radial-gradient(circle at 5% 76%, rgba(56, 102, 255, .07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.hero.hero-pro-v8::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.42;
  background-image: radial-gradient(rgba(24,88,153,.11) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 83%, transparent 100%);
}
.hero.hero-pro-v8::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#dbe8f4,transparent);
}
.hero-v8-orb {
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(75px);
  pointer-events:none;
}
.hero-v8-orb-a { width:310px; height:310px; right:7%; top:58px; background:rgba(24,192,226,.16); }
.hero-v8-orb-b { width:260px; height:260px; left:-90px; bottom:-80px; background:rgba(41,89,255,.10); }
.hero-v8-grid {
  display:grid;
  grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);
  align-items:center;
  gap:64px;
}
.hero-v8-copy { padding: 14px 0; }
.hero-v8-kicker {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  color:#0b72e7;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.75px;
}
.hero-v8-kicker > span {
  width:28px;
  height:2px;
  border-radius:999px;
  background:#0b72e7;
}
.hero-pro-v8 .hero-v8-copy h1 {
  max-width:600px;
  margin:0;
  color:#0b2343;
  font:800 clamp(48px,4.85vw,67px)/1.035 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-3.1px;
}
.hero-pro-v8 .hero-v8-copy h1 span {
  color:#0b72e7;
  background:none;
  -webkit-text-fill-color:currentColor;
}
.hero-v8-copy > p {
  max-width:590px;
  margin:24px 0 0;
  color:#61738b;
  font-size:17px;
  line-height:1.75;
}
.hero-v8-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
}
.hero-v8-primary {
  min-height:54px;
  padding:0 25px;
  border-radius:13px;
  font-size:14px;
}
.hero-v8-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#173553;
  font-size:13px;
  font-weight:800;
  transition:color .2s ease,transform .2s ease;
}
.hero-v8-link:hover { color:#0b72e7; transform:translateX(2px); }
.hero-v8-play {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #d5e2ee;
  border-radius:50%;
  color:#0b72e7;
  background:#fff;
  box-shadow:0 6px 18px rgba(23,66,111,.08);
  font-size:9px;
}
.hero-v8-trust {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:42px;
  padding-top:24px;
  border-top:1px solid #e4edf5;
}
.hero-v8-trust > div {
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.hero-v8-check {
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border-radius:50%;
  color:#0b72e7;
  background:#eaf4ff;
  font-size:12px;
  font-weight:900;
}
.hero-v8-trust p { margin:0; min-width:0; }
.hero-v8-trust strong {
  display:block;
  color:#173451;
  font-size:11px;
  line-height:1.35;
}
.hero-v8-trust small {
  display:block;
  margin-top:3px;
  color:#8b99aa;
  font-size:9px;
  line-height:1.4;
}
.hero-v8-showcase {
  position:relative;
  min-width:0;
  padding:58px 6px 18px 4px;
}
.hero-v8-showcase-glow {
  position:absolute;
  z-index:-1;
  width:82%;
  height:68%;
  right:2%;
  top:19%;
  border-radius:50%;
  background:rgba(75,177,255,.24);
  filter:blur(65px);
}
.hero-v8-browser {
  position:relative;
  z-index:4;
  display:block;
  overflow:hidden;
  width:100%;
  color:inherit;
  background:#fff;
  border:1px solid rgba(200,216,232,.92);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(20,59,99,.18),0 8px 24px rgba(20,59,99,.08);
  transform:perspective(1500px) rotateY(-2.2deg) rotateX(.7deg);
  transform-origin:50% 62%;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease;
}
.hero-v8-browser:hover {
  transform:perspective(1500px) rotateY(-.7deg) translateY(-4px);
  box-shadow:0 36px 92px rgba(20,59,99,.22),0 10px 28px rgba(20,59,99,.10);
}
.hero-v8-browserbar {
  height:48px;
  display:grid;
  grid-template-columns:75px 1fr auto;
  align-items:center;
  gap:10px;
  padding:0 16px;
  background:#f8fafc;
  border-bottom:1px solid #e8eef4;
}
.hero-v8-dots { display:flex; gap:6px; }
.hero-v8-dots i {
  width:8px;
  height:8px;
  display:block;
  border-radius:50%;
  background:#c9d4df;
}
.hero-v8-dots i:nth-child(1){ background:#ff6d68; }
.hero-v8-dots i:nth-child(2){ background:#ffc55c; }
.hero-v8-dots i:nth-child(3){ background:#52ca72; }
.hero-v8-address {
  justify-self:center;
  min-width:220px;
  padding:7px 14px;
  border:1px solid #e2e9ef;
  border-radius:999px;
  background:#fff;
  color:#77879a;
  text-align:center;
  font-size:10px;
  font-weight:700;
}
.hero-v8-address span { margin-right:5px; font-size:9px; }
.hero-v8-live {
  color:#0b72e7;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
}
.hero-v8-screen {
  position:relative;
  overflow:hidden;
  aspect-ratio:1170/760;
  background:#eef4f8;
}
.hero-v8-screen::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 22%,transparent 82%,rgba(255,255,255,.04));
}
.hero-v8-screen img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
}
.hero-v8-browser:hover .hero-v8-screen img { transform:scale(1.018); }
.hero-v8-project {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:15px 19px 16px;
  background:#fff;
}
.hero-v8-project small {
  display:block;
  margin-bottom:4px;
  color:#8a99aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.05px;
}
.hero-v8-project strong {
  display:block;
  color:#102b49;
  font:800 17px/1.2 "Plus Jakarta Sans",sans-serif;
}
.hero-v8-project > span {
  flex:0 0 auto;
  color:#0b72e7;
  font-size:11px;
  font-weight:900;
}
.hero-v8-idea {
  position:absolute;
  z-index:8;
  top:0;
  right:14px;
  width:178px;
  padding:16px 18px 17px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(204,220,235,.9);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 42px rgba(21,61,103,.12);
  transform:rotate(2deg);
  color:#173451;
  font:italic 600 20px/.98 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-.8px;
}
.hero-v8-idea strong {
  margin-top:4px;
  color:#0b72e7;
  font-size:22px;
  font-weight:800;
}
.hero-v8-idea b {
  position:absolute;
  right:14px;
  bottom:10px;
  color:#0b72e7;
  font-size:15px;
  font-style:normal;
}

@media (max-width:1120px) {
  .hero-v8-grid { grid-template-columns:minmax(0,.95fr) minmax(470px,1.05fr); gap:38px; }
  .hero-pro-v8 .hero-v8-copy h1 { font-size:clamp(45px,4.8vw,60px); }
  .hero-v8-showcase { padding-top:54px; }
  .hero-v8-idea { right:8px; width:164px; font-size:18px; }
  .hero-v8-idea strong { font-size:20px; }
  .hero-v8-address { min-width:180px; }
}
@media (max-width:860px) {
  .hero.hero-pro-v8 { min-height:0; padding:64px 0 72px; }
  .hero-v8-grid { grid-template-columns:1fr; gap:48px; }
  .hero-v8-copy { text-align:center; padding:0; }
  .hero-v8-kicker { justify-content:center; }
  .hero-v8-copy > p { margin-left:auto; margin-right:auto; }
  .hero-v8-actions { justify-content:center; }
  .hero-v8-trust { max-width:690px; margin-left:auto; margin-right:auto; text-align:left; }
  .hero-v8-showcase { width:min(100%,720px); margin:0 auto; padding:54px 12px 0; }
  .hero-v8-browser { transform:none; }
  .hero-v8-browser:hover { transform:translateY(-3px); }
  .hero-v8-idea { right:22px; top:0; }
}
@media (max-width:640px) {
  .hero.hero-pro-v8 { padding:46px 0 56px; }
  .hero-v8-kicker { font-size:9px; letter-spacing:1.3px; line-height:1.45; }
  .hero-pro-v8 .hero-v8-copy h1 { font-size:42px; letter-spacing:-2.2px; }
  .hero-v8-copy > p { font-size:15px; line-height:1.7; }
  .hero-v8-actions { flex-direction:column; gap:16px; }
  .hero-v8-primary { width:100%; }
  .hero-v8-trust { grid-template-columns:1fr; gap:13px; margin-top:30px; }
  .hero-v8-trust > div { align-items:center; }
  .hero-v8-trust strong { font-size:12px; }
  .hero-v8-trust small { font-size:10px; }
  .hero-v8-showcase { padding:52px 0 0; }
  .hero-v8-idea { width:142px; right:8px; padding:12px 14px 13px; font-size:15px; border-radius:14px; }
  .hero-v8-idea strong { font-size:17px; }
  .hero-v8-browser { border-radius:15px; }
  .hero-v8-browserbar { height:40px; grid-template-columns:54px 1fr; padding:0 11px; }
  .hero-v8-live { display:none; }
  .hero-v8-address { min-width:0; width:100%; padding:6px 8px; font-size:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hero-v8-dots { gap:4px; }
  .hero-v8-dots i { width:6px; height:6px; }
  .hero-v8-project { min-height:66px; padding:12px 13px; }
  .hero-v8-project strong { font-size:14px; }
  .hero-v8-project > span { font-size:9px; }
}

/* =========================================================
   V9 HERO — DESIGN → DEVELOPMENT, isolated from lower sections
   ========================================================= */
.hero.hero-pro-v9 {
  position:relative;
  min-height:700px;
  padding:82px 0 78px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 16%, rgba(25,185,235,.10), transparent 28%),
    radial-gradient(circle at 4% 80%, rgba(30,91,255,.055), transparent 25%),
    linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.hero.hero-pro-v9::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.28;
  background-image:linear-gradient(rgba(30,91,145,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(30,91,145,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 88%,transparent 100%);
}
.hero.hero-pro-v9::after {
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#d9e6f2,transparent);
}
.hero-v9-orb { position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none; }
.hero-v9-orb-a { width:330px;height:330px;right:2%;top:92px;background:rgba(29,186,231,.14); }
.hero-v9-orb-b { width:250px;height:250px;left:-90px;bottom:-70px;background:rgba(42,85,255,.09); }
.hero-v9-grid {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);
  gap:62px;
  align-items:center;
}
.hero-v9-copy { position:relative;z-index:3;padding:8px 0; }
.hero-v9-kicker {
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
  color:#0b72e7;font-size:11px;font-weight:900;letter-spacing:1.75px;
}
.hero-v9-kicker>span { width:28px;height:2px;border-radius:999px;background:#0b72e7; }
.hero-pro-v9 .hero-v9-copy h1 {
  max-width:610px;margin:0;color:#0b2343;
  font:800 clamp(48px,4.7vw,66px)/1.035 "Plus Jakarta Sans",sans-serif;
  letter-spacing:-3px;
}
.hero-pro-v9 .hero-v9-copy h1 span { color:#0b72e7;background:none;-webkit-text-fill-color:currentColor; }
.hero-v9-copy>p {
  max-width:590px;margin:24px 0 0;color:#61738b;font-size:17px;line-height:1.74;
}
.hero-v9-actions { display:flex;align-items:center;gap:24px;margin-top:32px; }
.hero-v9-primary { min-height:54px;padding:0 25px;border-radius:13px;font-size:14px; }
.hero-v9-link { display:inline-flex;align-items:center;gap:10px;color:#173553;font-size:13px;font-weight:800;transition:.2s ease; }
.hero-v9-link:hover { color:#0b72e7;transform:translateX(2px); }
.hero-v9-play { width:34px;height:34px;display:grid;place-items:center;border:1px solid #d5e2ee;border-radius:50%;color:#0b72e7;background:#fff;box-shadow:0 6px 18px rgba(23,66,111,.08);font-size:9px; }
.hero-v9-trust { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px;padding-top:24px;border-top:1px solid #e4edf5; }
.hero-v9-trust>div { display:flex;align-items:flex-start;gap:10px;min-width:0; }
.hero-v9-check { flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;margin-top:1px;border-radius:50%;color:#0b72e7;background:#eaf4ff;font-size:12px;font-weight:900; }
.hero-v9-trust p { margin:0;min-width:0; }
.hero-v9-trust strong { display:block;color:#173451;font-size:11px;line-height:1.35; }
.hero-v9-trust small { display:block;margin-top:3px;color:#8b99aa;font-size:9px;line-height:1.4; }

.hero-v9-visual { position:relative;min-height:520px;padding:34px 12px 52px 0; }
.hero-v9-studio {
  position:relative;z-index:3;width:100%;overflow:hidden;
  border:1px solid rgba(196,214,231,.95);border-radius:20px;background:#fff;
  box-shadow:0 34px 85px rgba(18,57,98,.16),0 10px 26px rgba(18,57,98,.07);
  transform:perspective(1500px) rotateY(-2deg) rotateX(.5deg);
  transform-origin:45% 60%;
}
.hero-v9-topbar {
  height:48px;display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:10px;
  padding:0 14px;background:#f8fafc;border-bottom:1px solid #e5edf4;
}
.hero-v9-dots { display:flex;gap:5px; }
.hero-v9-dots i { width:8px;height:8px;border-radius:50%;background:#cbd5df; }
.hero-v9-dots i:nth-child(1){background:#ff6c67}.hero-v9-dots i:nth-child(2){background:#ffc45a}.hero-v9-dots i:nth-child(3){background:#4fcb72}
.hero-v9-address { justify-self:center;min-width:245px;padding:7px 14px;border:1px solid #e2e9f0;border-radius:999px;background:#fff;color:#8090a4;text-align:center;font-size:9px;font-weight:700; }
.hero-v9-address>span { display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#28c482;box-shadow:0 0 0 3px rgba(40,196,130,.12);vertical-align:1px; }
.hero-v9-publish { padding:7px 10px;border-radius:8px;color:#0b72e7;background:#eaf4ff;font-size:8px;font-weight:900;letter-spacing:.7px; }
.hero-v9-publish b { margin-left:4px; }
.hero-v9-workspace { display:grid;grid-template-columns:52px minmax(0,1fr) 116px;min-height:388px;background:#eef3f7; }
.hero-v9-tools { padding:13px 8px;border-right:1px solid #dfe8f0;background:#fbfcfe;display:flex;flex-direction:column;align-items:center;gap:7px; }
.hero-v9-tool { width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:#74879b; }
.hero-v9-tool.active { color:#0b72e7;background:#eaf4ff;box-shadow:inset 0 0 0 1px #d3e7fb; }
.hero-v9-tool svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.hero-v9-canvas { padding:18px 16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf3f8,#f6f9fc); }
.hero-v9-page { width:100%;overflow:hidden;border:1px solid #dce7f0;border-radius:10px;background:#fff;box-shadow:0 10px 28px rgba(26,66,106,.10); }
.hero-v9-page-nav { height:34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #edf2f6; }
.hero-v9-page-logo { display:flex;align-items:center;gap:5px;color:#173451;font-size:7px; }
.hero-v9-page-logo>span { width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#0fc4dc,#176bf2); }
.hero-v9-page-links { display:flex;justify-content:center;gap:9px; }
.hero-v9-page-links i { width:25px;height:3px;border-radius:999px;background:#d9e3ec; }
.hero-v9-page-navbtn { width:44px;height:13px;border-radius:5px;background:#0b72e7; }
.hero-v9-page-hero { min-height:220px;display:grid;grid-template-columns:1.05fr .95fr;gap:10px;padding:24px 23px 20px;background:linear-gradient(140deg,#fff 0%,#f8fbff 100%); }
.hero-v9-page-copy small { color:#0b72e7;font-size:5px;font-weight:900;letter-spacing:.7px; }
.hero-v9-page-copy h3 { margin:7px 0 10px;color:#102b49;font:800 25px/1.02 "Plus Jakarta Sans",sans-serif;letter-spacing:-1.1px; }
.hero-v9-page-copy h3 span { color:#0b72e7; }
.hero-v9-page-copy p { width:88%;height:4px;margin:6px 0;border-radius:999px;background:#dfe7ef; }
.hero-v9-page-copy p.short { width:62%; }
.hero-v9-page-cta { display:flex;gap:7px;margin-top:15px; }
.hero-v9-page-cta b,.hero-v9-page-cta i { display:block;height:18px;border-radius:5px; }
.hero-v9-page-cta b { width:62px;background:#0b72e7; }
.hero-v9-page-cta i { width:48px;border:1px solid #cfdce8;background:#fff; }
.hero-v9-page-art { position:relative;overflow:hidden;border-radius:11px;background:linear-gradient(135deg,#e9f8ff 0%,#eaf1ff 54%,#f4edff 100%); }
.hero-v9-art-grid { position:absolute;inset:0;opacity:.42;background-image:linear-gradient(rgba(27,112,198,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(27,112,198,.11) 1px,transparent 1px);background-size:18px 18px; }
.hero-v9-art-shape { position:absolute;width:122px;height:122px;right:-18px;bottom:-26px;border-radius:34px;background:linear-gradient(145deg,#12c8df,#126cf0 58%,#694cf3);transform:rotate(24deg);box-shadow:0 22px 40px rgba(18,108,240,.23); }
.hero-v9-art-card { position:absolute;z-index:2;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(22,65,107,.10); }
.hero-v9-art-card.card-a { left:14px;top:19px;padding:10px 12px;border-radius:9px; }
.hero-v9-art-card.card-a span { display:block;color:#0b72e7;font:800 16px/1 "Plus Jakarta Sans",sans-serif; }
.hero-v9-art-card.card-a small { display:block;margin-top:3px;color:#8291a3;font-size:6px;font-weight:700; }
.hero-v9-art-card.card-b { left:25px;right:18px;bottom:22px;height:54px;padding:10px 9px;border-radius:10px;display:flex;align-items:end;gap:5px; }
.hero-v9-art-card.card-b i { width:8px;border-radius:3px 3px 1px 1px;background:linear-gradient(#12c8df,#0b72e7); }
.hero-v9-art-card.card-b i:nth-child(1){height:25%}.hero-v9-art-card.card-b i:nth-child(2){height:42%}.hero-v9-art-card.card-b i:nth-child(3){height:36%}.hero-v9-art-card.card-b i:nth-child(4){height:68%}.hero-v9-art-card.card-b i:nth-child(5){height:88%}
.hero-v9-page-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;background:#fbfcfe;border-top:1px solid #edf2f6; }
.hero-v9-page-cards>div { min-height:45px;padding:8px;border:1px solid #edf2f6;border-radius:7px;background:#fff; }
.hero-v9-page-cards span { display:block;width:15px;height:15px;border-radius:5px;background:#e8f4ff; }
.hero-v9-page-cards b,.hero-v9-page-cards i { display:block;height:3px;margin-top:5px;border-radius:999px;background:#dce5ed; }
.hero-v9-page-cards b { width:66%; }.hero-v9-page-cards i { width:45%;background:#ebf0f4; }
.hero-v9-inspector { padding:14px 11px;border-left:1px solid #dfe8f0;background:#fbfcfe; }
.hero-v9-inspector-title { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;color:#2c435a;font-size:8px;text-transform:uppercase;letter-spacing:.4px; }
.hero-v9-inspector-title span { color:#a0adba;letter-spacing:1px; }
.hero-v9-inspector>small { display:block;margin:15px 0 7px;color:#9aa8b7;font-size:6px;font-weight:900;letter-spacing:.8px; }
.hero-v9-swatches { display:flex;gap:5px; }.hero-v9-swatches i { width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.04); }
.hero-v9-swatches i:nth-child(1){background:#0b72e7}.hero-v9-swatches i:nth-child(2){background:#11c3dd}.hero-v9-swatches i:nth-child(3){background:#102b49}.hero-v9-swatches i:nth-child(4){background:#eef3f7}
.hero-v9-type { display:flex;align-items:center;gap:7px;padding:8px;border:1px solid #e5ecf2;border-radius:7px;background:#fff; }
.hero-v9-type b { color:#173451;font-size:13px; }.hero-v9-type span { color:#8392a3;font-size:6px;line-height:1.2; }
.hero-v9-spacing { display:flex;align-items:end;gap:5px;height:27px;padding:4px 6px;border:1px solid #e5ecf2;border-radius:7px;background:#fff; }
.hero-v9-spacing i { display:block;width:7px;border-radius:2px;background:#cfe5fb; }.hero-v9-spacing i:nth-child(1){height:8px}.hero-v9-spacing i:nth-child(2){height:13px}.hero-v9-spacing i:nth-child(3){height:18px;background:#0b72e7}

.hero-v9-code { position:absolute;z-index:8;left:-20px;bottom:5px;width:250px;padding:12px 14px 13px;border:1px solid rgba(49,76,104,.92);border-radius:14px;background:rgba(11,28,47,.96);box-shadow:0 20px 42px rgba(11,32,55,.24);transform:rotate(-1.4deg); }
.hero-v9-code-head { display:flex;align-items:center;gap:7px;margin-bottom:9px;color:#d8e8f8;font-size:8px; }
.hero-v9-code-head>span { color:#40d1e5;font-weight:900; }.hero-v9-code-head b { font-size:8px; }.hero-v9-code-head i { margin-left:auto;color:#60758c;font-size:5px;font-style:normal;letter-spacing:2px; }
.hero-v9-code code { display:block;margin:3px 0;color:#c6d5e4;font:500 7px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap; }
.hero-v9-code em { color:#5bd1e0;font-style:normal; }.hero-v9-code strong { color:#9ba9ff;font-weight:600; }.hero-v9-code u { color:#ffd37d;text-decoration:none; }
.hero-v9-responsive { position:absolute;z-index:7;right:-12px;top:7px;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #dfeaf3;border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 15px 35px rgba(20,60,100,.12); }
.hero-v9-responsive>div { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:#0b72e7;background:#eaf4ff; }
.hero-v9-responsive svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.hero-v9-responsive p { margin:0; }.hero-v9-responsive strong { display:block;color:#173451;font-size:9px; }.hero-v9-responsive small { display:block;margin-top:2px;color:#91a0af;font-size:6px; }
.hero-v9-signature { position:absolute;right:7px;bottom:6px;color:#71849a;font:700 10px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.1px; }
.hero-v9-signature span { color:#0b72e7;margin:0 4px; }

@media (max-width:1120px) {
  .hero-v9-grid { grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr);gap:38px; }
  .hero-pro-v9 .hero-v9-copy h1 { font-size:clamp(45px,4.7vw,60px); }
  .hero-v9-inspector { display:none; }
  .hero-v9-workspace { grid-template-columns:48px minmax(0,1fr); }
  .hero-v9-code { left:-8px; }
}
@media (max-width:900px) {
  .hero.hero-pro-v9 { min-height:0;padding:64px 0 76px; }
  .hero-v9-grid { grid-template-columns:1fr;gap:44px; }
  .hero-v9-copy { text-align:center; }
  .hero-v9-kicker { justify-content:center; }
  .hero-v9-copy>p { margin-left:auto;margin-right:auto; }
  .hero-v9-actions { justify-content:center; }
  .hero-v9-trust { max-width:700px;margin-left:auto;margin-right:auto;text-align:left; }
  .hero-v9-visual { width:min(100%,760px);margin:0 auto;min-height:505px;padding:32px 18px 54px; }
  .hero-v9-studio { transform:none; }
  .hero-v9-code { left:0; }
  .hero-v9-responsive { right:0; }
}
@media (max-width:640px) {
  .hero.hero-pro-v9 { padding:46px 0 60px; }
  .hero-v9-kicker { font-size:9px;letter-spacing:1.3px;line-height:1.45; }
  .hero-pro-v9 .hero-v9-copy h1 { font-size:41px;letter-spacing:-2.1px; }
  .hero-v9-copy>p { font-size:15px;line-height:1.7; }
  .hero-v9-actions { flex-direction:column;gap:16px; }
  .hero-v9-primary { width:100%; }
  .hero-v9-trust { grid-template-columns:1fr;gap:13px;margin-top:30px; }
  .hero-v9-trust>div { align-items:center; }
  .hero-v9-trust strong { font-size:12px; }.hero-v9-trust small { font-size:10px; }
  .hero-v9-visual { min-height:385px;padding:28px 0 42px; }
  .hero-v9-studio { border-radius:14px; }
  .hero-v9-topbar { height:40px;grid-template-columns:50px 1fr;padding:0 10px; }
  .hero-v9-address { min-width:0;width:100%;padding:6px 8px;font-size:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .hero-v9-publish { display:none; }
  .hero-v9-workspace { grid-template-columns:38px minmax(0,1fr);min-height:290px; }
  .hero-v9-tools { padding:9px 5px; }.hero-v9-tool { width:28px;height:28px; }.hero-v9-tool svg { width:14px;height:14px; }
  .hero-v9-canvas { padding:11px 9px; }
  .hero-v9-page-hero { min-height:165px;padding:17px 15px; }
  .hero-v9-page-copy h3 { font-size:19px; }.hero-v9-page-copy small { font-size:4px; }
  .hero-v9-page-art { min-height:128px; }.hero-v9-art-card.card-a { padding:7px 8px;left:8px;top:11px; }.hero-v9-art-card.card-a span { font-size:12px; }
  .hero-v9-art-card.card-b { left:12px;right:10px;bottom:12px;height:38px;padding:7px; }
  .hero-v9-art-shape { width:92px;height:92px; }
  .hero-v9-page-cards { gap:5px;padding:7px; }.hero-v9-page-cards>div { min-height:34px;padding:6px; }
  .hero-v9-code { width:205px;left:-4px;bottom:0;padding:9px 10px;border-radius:11px; }.hero-v9-code code { font-size:5.6px; }
  .hero-v9-responsive { right:-3px;top:1px;padding:7px 8px; }.hero-v9-responsive>div { width:27px;height:27px; }.hero-v9-responsive strong { font-size:7px; }.hero-v9-responsive small { font-size:5px; }
  .hero-v9-signature { display:none; }
}

/* ===== V12: real static portfolio screenshots (fast, no live screenshot service) ===== */
.portfolio-section .project-image {
  aspect-ratio: 1000 / 474;
  background:
    linear-gradient(110deg, #eef4fa 8%, #f7fbff 18%, #eef4fa 33%);
  background-size: 200% 100%;
  animation: referenceSkeleton 1.35s linear infinite;
}
.portfolio-section .project-image img {
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #fff;
}
.portfolio-section .project-image:has(img[src^="https://"]) {
  animation: none;
}
@keyframes referenceSkeleton {
  to { background-position-x: -200%; }
}
@media (max-width: 860px) {
  .portfolio-section .project-image { aspect-ratio: 1000 / 474; }
}
.portfolio-section .project-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 390px;
}


/* ==========================================================
   V17 - Premium, content-first service hero
   ========================================================== */
.service-hero-v17 {
  padding: 76px 0 82px;
  background:
    radial-gradient(circle at 3% 22%, rgba(11,114,231,.11), transparent 28%),
    radial-gradient(circle at 96% 14%, rgba(16,200,223,.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.service-hero-grid-v17 {
  grid-template-columns: minmax(0, 1fr) minmax(470px, .94fr);
  gap: 72px;
  align-items: center;
}
.service-hero-v17 .service-hero-copy { position: relative; z-index: 2; }
.service-hero-v17 .service-breadcrumb { margin-bottom: 30px; }
.service-hero-v17 .eyebrow { margin-bottom: 16px; }
.service-hero-v17 h1 {
  max-width: 650px;
  margin: 0;
  font: 800 clamp(46px, 4.8vw, 64px)/1.03 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -2.6px;
  color: #102846;
}
.service-hero-statement {
  max-width: 660px;
  margin: 20px 0 0;
  color: #0b72e7;
  font: 700 clamp(22px, 2vw, 28px)/1.28 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.7px;
}
.service-hero-description {
  max-width: 675px;
  margin: 20px 0 0;
  color: #5e7088;
  font-size: 17px;
  line-height: 1.75;
}
.service-hero-v17 .service-hero-actions { margin-top: 30px; }
.service-hero-proof {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #dde8f3;
}
.service-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #52647b;
  font-size: 12px;
  font-weight: 800;
}
.service-hero-proof b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #edf6ff;
  color: #0b72e7;
  font-size: 10px;
  letter-spacing: .3px;
}

.service-includes {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid #dce7f2;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(16,200,223,.10), transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,255,.98));
  box-shadow: 0 34px 80px rgba(18,68,119,.13);
}
.service-includes::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -130px;
  bottom: -145px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,114,231,.12), rgba(11,114,231,0) 70%);
  pointer-events: none;
}
.service-includes-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e4ecf4;
}
.service-includes-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 14px 28px rgba(18,82,153,.18);
}
.service-includes-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-includes-top > div:nth-child(2) > span {
  display: block;
  color: #0b72e7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.service-includes-top h2 {
  margin: 6px 0 0;
  color: #132e4f;
  font: 800 23px/1.15 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.7px;
}
.service-includes-count {
  min-width: 72px;
  padding: 10px 12px;
  border: 1px solid #dfe9f3;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.service-includes-count strong {
  display: block;
  color: #0b72e7;
  font: 800 23px/1 "Plus Jakarta Sans", sans-serif;
}
.service-includes-count small {
  display: block;
  margin-top: 4px;
  color: #8190a4;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.service-includes-lead {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  color: #5d7088;
  font-size: 14px;
  line-height: 1.65;
}
.service-includes-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.service-include-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 12px;
  border-radius: 16px;
  transition: background .2s ease, transform .2s ease;
}
.service-include-row:hover {
  background: #f1f7fd;
  transform: translateX(3px);
}
.include-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef6ff;
  color: #0b72e7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
}
.service-include-row h3 {
  margin: 1px 0 0;
  color: #193858;
  font-size: 14px;
  line-height: 1.35;
}
.service-include-row p {
  margin: 5px 0 0;
  color: #718198;
  font-size: 11.5px;
  line-height: 1.55;
}
.service-includes-more {
  position: relative;
  z-index: 1;
  min-height: 50px;
  margin-top: 18px;
  padding: 0 14px 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #dce7f2;
  border-radius: 15px;
  background: #fff;
  color: #183858;
  font-size: 12px;
  font-weight: 800;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.service-includes-more:hover {
  border-color: #b7d4f0;
  box-shadow: 0 12px 28px rgba(27,80,135,.08);
  transform: translateY(-2px);
}
.service-includes-more b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #0b72e7;
  color: #fff;
}

@media (max-width: 1120px) {
  .service-hero-grid-v17 { grid-template-columns: minmax(0,1fr) minmax(420px,.9fr); gap: 44px; }
  .service-hero-v17 h1 { font-size: clamp(44px, 5vw, 58px); }
  .service-hero-proof { gap: 16px; }
}
@media (max-width: 860px) {
  .service-hero-v17 { padding: 62px 0 72px; }
  .service-hero-grid-v17 { grid-template-columns: 1fr; gap: 46px; }
  .service-hero-v17 .service-hero-copy { text-align: left; }
  .service-hero-statement,
  .service-hero-description { max-width: 720px; }
  .service-hero-v17 .service-hero-actions,
  .service-hero-proof { justify-content: flex-start; }
  .service-includes { max-width: 680px; }
}
@media (max-width: 640px) {
  .service-hero-v17 { padding: 50px 0 60px; }
  .service-hero-v17 .service-breadcrumb { margin-bottom: 22px; }
  .service-hero-v17 h1 { font-size: 41px; letter-spacing: -1.8px; }
  .service-hero-statement { font-size: 21px; margin-top: 16px; }
  .service-hero-description { font-size: 16px; margin-top: 16px; }
  .service-hero-v17 .service-hero-actions { flex-direction: column; }
  .service-hero-v17 .service-hero-actions .btn { width: 100%; }
  .service-hero-proof { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; padding-top: 20px; }
  .service-includes { padding: 20px; border-radius: 22px; }
  .service-includes-top { grid-template-columns: auto 1fr; }
  .service-includes-count { display: none; }
  .service-includes-top h2 { font-size: 20px; }
  .service-include-row { padding: 12px 4px; grid-template-columns: 38px 1fr; gap: 11px; }
  .include-number { width: 34px; height: 34px; }
}