/* ===== 247 Task Connect — Homepage design ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { max-width:100%; overflow-x:clip; }
body { font-family:'Manrope',sans-serif; color:#101828; background:#FFFFFF; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

/* Ambient accent (small, contained — not a page-wide tint) */
.glow-field { position:relative; overflow-x:clip; }
.glow-field::before {
  content:""; position:absolute; top:-120px; right:-100px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(103,61,230,0.09) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* Floating glass nav — sticky at top */
.nav-outer { position:sticky; top:16px; z-index:50; padding:0 6%; }
.home-nav { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-radius:100px; background:rgba(255,255,255,0.85); border:1px solid rgba(18,25,43,0.08); backdrop-filter:blur(12px); position:relative; z-index:10; box-shadow:0 8px 30px rgba(18,25,43,0.08); }
.home-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; letter-spacing:0.02em; }
.home-logo-img { height:40px; width:auto; max-width:200px; object-fit:contain; border-radius:6px; }
/* When a real (wide) logo image is present, hide the duplicate site-name text */
.home-logo .logo-name { display:none; }
.home-nav-links { display:flex; gap:30px; font-size:14px; font-weight:600; color:#5b6472; }
.nav-cta { background:linear-gradient(135deg,#673DE6,#4C1FC4); color:#fff; padding:11px 22px; border-radius:100px; font-size:13.5px; font-weight:700; border:none; cursor:pointer; }
/* Right-side nav group: account link + quote button */
.nav-actions { display:flex; align-items:center; gap:18px; }
.nav-account { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:#4C1FC4; }
.nav-account svg { width:18px; height:18px; stroke:#4C1FC4; }
.nav-account:hover { color:#673DE6; }
/* Account link inside the mobile dropdown */
.mobile-nav-panel .nav-account { padding:13px 16px; border-radius:10px; }
.mobile-nav-panel .nav-account:hover { background:#F7F7F8; }

/* Hamburger menu — JS toggle (open/close, outside-click, close-on-link) */
.mobile-nav-checkbox { display:none; }
.hamburger-btn { display:none; }  /* hidden on desktop, shown in media query */
.hamburger-btn span { display:block; width:22px; height:2px; background:#12192B; border-radius:2px; margin-bottom:5px; transition:transform .25s ease, opacity .2s ease; }
.hamburger-btn span:last-child { margin-bottom:0; }
.mobile-nav-panel { display:none; }  /* never shown on desktop */

@media (max-width:900px) {
  /* Desktop links + desktop quote button both hidden on mobile */
  .home-nav-links { display:none; }
  .home-nav > .nav-actions { display:none; }
  /* Show hamburger */
  .hamburger-btn { display:flex; flex-direction:column; cursor:pointer; padding:8px; background:none; border:none; }
  /* Hamburger animates into an X when the nav is open */
  .home-nav.nav-open .hamburger-btn span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .home-nav.nav-open .hamburger-btn span:nth-child(2) { opacity:0; }
  .home-nav.nav-open .hamburger-btn span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  /* Dropdown panel */
  .mobile-nav-panel {
    flex-direction:column; background:#fff; border-radius:20px; margin-top:10px;
    padding:10px; box-shadow:0 16px 40px rgba(18,25,43,0.15); border:1px solid rgba(18,25,43,0.08);
    position:absolute; left:0; right:0; top:70px; z-index:20;
  }
  .mobile-nav-panel a { display:block; padding:13px 16px; font-size:15px; font-weight:600; color:#12192B; border-radius:10px; }
  .mobile-nav-panel a:hover { background:#F7F7F8; }
  .mobile-nav-panel .nav-cta { display:block; width:100%; margin-top:8px; text-align:center; }
  /* Panel shows only when nav has .nav-open */
  .home-nav.nav-open .mobile-nav-panel { display:flex; }
}

/* HERO — deep purple gradient band (Hostinger-style) */
.hero-section { position:relative; z-index:1; margin-top:-92px; padding:150px 6% 70px;
  background:radial-gradient(120% 120% at 80% 0%, #4C1FC4 0%, #2A1266 45%, #1A0B3D 100%);
  overflow:hidden; }
.hero-section::before { content:""; position:absolute; top:-120px; right:-80px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(150,110,255,0.35) 0%, transparent 65%); pointer-events:none; }
.hero-section::after { content:""; position:absolute; bottom:-160px; left:-100px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(103,61,230,0.4) 0%, transparent 65%); pointer-events:none; }
.hero-flex { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:60px; position:relative; z-index:2; }
.hero-text { flex:1.15; }
.eyebrow-pill { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:#d9ccff; font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:7px 16px; border-radius:100px; margin-bottom:26px; }
.eyebrow-pill .dot { width:6px; height:6px; border-radius:50%; background:#a888ff; }
.hero-text h1 { font-size:50px; font-weight:800; line-height:1.12; letter-spacing:-0.02em; margin-bottom:22px; color:#fff; }
.hero-text h1 .accent { color:#b69eff; -webkit-text-fill-color:#b69eff; }
.hero-text h1 .dim { color:rgba(255,255,255,0.5); }
.hero-p { font-size:17px; color:#cfc6e8; line-height:1.65; max-width:460px; margin-bottom:34px; }
.hero-ctas { display:flex; gap:14px; margin-bottom:30px; flex-wrap:wrap; }
/* On the purple hero: white solid button, translucent outline button */
.hero-ctas .btn-solid { background:#fff; color:#3B1A8F; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.hero-ctas .btn-outline { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.35); color:#fff; }
.trust-row { display:flex; align-items:center; gap:10px; font-size:13.5px; color:#cfc6e8; }
.trust-row .stars { color:#ffc53d; letter-spacing:2px; }

/* Buttons — default (used on light sections elsewhere) */
.btn-solid { background:linear-gradient(135deg,#673DE6,#4C1FC4); color:#fff; padding:15px 26px; border-radius:100px; font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 30px rgba(103,61,230,0.25); border:none; cursor:pointer; }
.btn-outline { background:#fff; border:1px solid rgba(18,25,43,0.14); color:#12192B; padding:15px 26px; border-radius:100px; font-weight:700; font-size:14.5px; cursor:pointer; }

.hero-visual { flex:1; position:relative; }
.hero-img-frame { border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.12); position:relative; z-index:2; box-shadow:0 30px 70px rgba(0,0,0,0.4); }
.hero-img-frame img { width:100%; height:340px; object-fit:cover; }
.float-card { position:absolute; background:#fff; border:1px solid rgba(18,25,43,0.08); box-shadow:0 12px 30px rgba(0,0,0,0.25); border-radius:14px; padding:14px 18px; z-index:3; }
.float-card .fnum { font-size:20px; font-weight:800; color:#12192B; }
.float-card .flbl { font-size:11.5px; color:#5b6472; margin-top:2px; }
.float-card-1 { bottom:-18px; left:-18px; }
.float-card-2 { top:-18px; right:20px; }

/* Value strip — sits on the purple, light text */
.value-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:56px 6% 0; max-width:1180px; margin:56px auto 0; border-top:1px solid rgba(255,255,255,0.15); position:relative; z-index:2; }
.value-item { display:flex; align-items:center; gap:14px; font-size:14px; color:#cfc6e8; font-weight:600; }
.value-icon { flex-shrink:0; width:42px; height:42px; border-radius:11px; background:rgba(255,214,10,0.18); border:1px solid rgba(255,214,10,0.5); display:flex; align-items:center; justify-content:center; }
.value-icon svg { width:20px; height:20px; stroke:#FFD60A; }
.value-text b { color:#fff; display:block; font-size:15px; margin-bottom:2px; }

/* ABOUT */
.about-section { padding:40px 6% 100px; max-width:1180px; margin:0 auto; }
.about-flex { display:flex; align-items:center; gap:70px; }
.about-text { flex:1; }
.about-visual { flex:0.9; position:relative; height:340px; }
.about-img-main { position:absolute; top:0; left:0; width:78%; height:280px; border-radius:16px; overflow:hidden; border:1px solid rgba(18,25,43,0.08); z-index:2; box-shadow:0 20px 50px rgba(18,25,43,0.1); }
.about-img-main img { width:100%; height:100%; object-fit:cover; }
.about-img-back { position:absolute; bottom:0; right:0; width:52%; height:190px; border-radius:16px; overflow:hidden; border:3px solid #FFFFFF; z-index:3; box-shadow:0 20px 50px rgba(18,25,43,0.18); }
.about-img-back img { width:100%; height:100%; object-fit:cover; }
.about-text h2 { font-size:32px; font-weight:800; margin-bottom:18px; letter-spacing:-0.01em; color:#12192B; }
.about-text p { font-size:15.5px; color:#5b6472; line-height:1.7; margin-bottom:30px; }
.mini-stats { display:flex; gap:36px; }
.mini-stat { display:flex; gap:12px; align-items:flex-start; }
.mini-stat-icon { width:38px; height:38px; border-radius:10px; background:rgba(103,61,230,0.1); border:1px solid rgba(103,61,230,0.24); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mini-stat-icon svg { width:17px; height:17px; stroke:#4C1FC4; }
.mini-stat h4 { font-size:14.5px; font-weight:700; margin-bottom:3px; color:#12192B; }
.mini-stat p { font-size:12.5px; color:#5b6472; margin:0; }

/* WHY CHOOSE US — dark full-bleed section */
.why-section { padding:100px 6%; background:#1B0F3D; }
.why-inner { max-width:1180px; margin:0 auto; }
.section-eyebrow-dark { text-align:center; font-size:12.5px; font-weight:700; color:#B69EFF; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; }
.why-h2-dark { text-align:center; font-size:34px; font-weight:800; max-width:560px; margin:0 auto 56px; letter-spacing:-0.01em; color:#fff; }
.why-cards { display:flex; gap:20px; flex-wrap:wrap; }
.why-card { flex:1; min-width:230px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:28px 24px; }
.why-card .wnum { font-size:13px; font-weight:800; color:#B69EFF; margin-bottom:16px; }
.why-card h3 { font-size:16.5px; font-weight:700; margin-bottom:10px; color:#fff; }
.why-card p { font-size:13.5px; color:#c9bdf0; line-height:1.6; margin-bottom:16px; }
.why-card .learn { font-size:12.5px; font-weight:700; color:#B69EFF; }

/* Shared light-section headings (What We Build, Pricing) */
.section-eyebrow { text-align:center; font-size:12.5px; font-weight:700; color:#673DE6; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; }
.why-h2 { text-align:center; font-size:34px; font-weight:800; max-width:560px; margin:0 auto 56px; letter-spacing:-0.01em; color:#101828; }

/* WHAT WE BUILD */
.build-section { padding:90px 6%; max-width:1180px; margin:0 auto; }
.build-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:40px; }
.build-chips span { background:#fff; border:1px solid rgba(18,25,43,0.09); font-size:13px; font-weight:600; color:#3f4657; padding:9px 18px; border-radius:100px; box-shadow:0 4px 14px rgba(18,25,43,0.04); }

/* PRICING */
.pricing-section { padding:40px 6% 100px; max-width:1180px; margin:0 auto; }
.price-flex { display:flex; gap:22px; flex-wrap:wrap; }
.price-card { flex:1; min-width:250px; background:#fff; border:1px solid rgba(18,25,43,0.08); border-radius:18px; padding:32px 26px; box-shadow:0 6px 20px rgba(18,25,43,0.05); }
.price-card.featured { background:#FFFFFF; border:1.5px solid #673DE6; box-shadow:0 14px 34px rgba(103,61,230,0.14); }
.pname { font-size:13.5px; font-weight:700; color:#5b6472; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; }
.pamount { font-size:32px; font-weight:800; margin-bottom:20px; color:#12192B; }
.price-card ul { list-style:none; margin-bottom:24px; }
.price-card li { font-size:13.5px; color:#3f4657; padding:7px 0; border-bottom:1px solid rgba(18,25,43,0.06); }

/* FINAL CTA */
.final-cta { text-align:center; padding:100px 6%; position:relative; background:#F6F4FC; }
.final-cta h2 { font-size:38px; font-weight:800; margin-bottom:26px; letter-spacing:-0.01em; color:#12192B; }

/* FOOTER — 4-column, deep purple to match hero */
.site-footer { background:linear-gradient(180deg,#1A0B3D 0%,#12082B 100%); color:#c9c2e0; padding:70px 6% 0; overflow:hidden; }
.footer-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:44px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1); }.footer-brand-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:#fff; margin-bottom:16px; }
.footer-brand-logo img { height:40px; width:auto; max-width:200px; object-fit:contain; border-radius:6px; }
.footer-brand-logo .logo-name { display:none; }
.footer-brand p { font-size:13.5px; color:#a79fc4; line-height:1.7; max-width:280px; }
.footer-col h4 { color:#fff; font-size:13px; font-weight:700; margin-bottom:18px; text-transform:uppercase; letter-spacing:0.05em; }
.footer-col a { display:block; color:#a79fc4; font-size:14px; margin-bottom:12px; transition:color .15s; }
.footer-col a:hover { color:#c4a9ff; }
.footer-contact-item { display:flex; align-items:flex-start; gap:11px; margin-bottom:16px; font-size:14px; color:#a79fc4; word-break:break-word; overflow-wrap:anywhere; }
.footer-contact-item svg { width:17px; height:17px; stroke:#c4a9ff; flex-shrink:0; margin-top:2px; }
.footer-contact-item a { color:#a79fc4; margin:0; word-break:break-word; overflow-wrap:anywhere; }
.footer-contact-item a:hover { color:#c4a9ff; }
.footer-bottom-bar { max-width:1180px; margin:0 auto; padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#8079a0; flex-wrap:wrap; gap:14px; }
.footer-legal { display:flex; gap:24px; flex-wrap:wrap; }
.footer-legal a { color:#8079a0; }
.footer-legal a:hover { color:#c4a9ff; }

@media (max-width:900px) {
  .hero-flex, .about-flex { flex-direction:column; }
  .hero-section { margin-top:-80px; padding-top:130px; }
  .hero-text h1 { font-size:36px; }
  .why-cards, .price-flex { flex-direction:column; }
  .value-strip { grid-template-columns:1fr 1fr; gap:22px 16px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-bottom-bar { flex-direction:column; align-items:flex-start; }

  /* Fix collapsed layered About photos (was rendering as a thin white vertical line) */
  .about-visual { width:100%; height:auto; }
  .about-img-main { position:relative; width:100%; height:220px; }
  .about-img-back { display:none; }
}
@media (max-width:560px) {
  .footer-grid { grid-template-columns:1fr; }
  /* Keep 2x2 but stack icon above text so each cell fits comfortably */
  .value-strip { grid-template-columns:1fr 1fr; gap:24px 14px; }
  .value-item { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ===== Inner-page components (Services, Blog, Portfolio, About, Contact) ===== */

/* Page header band — used at the top of every inner page */
.page-header { padding:70px 6% 50px; max-width:1180px; margin:0 auto; text-align:center; }
.page-header h1 { font-size:40px; font-weight:800; letter-spacing:-0.01em; margin-bottom:14px; color:#12192B; }
.page-header p { font-size:16px; color:#5b6472; max-width:560px; margin:0 auto; }

/* Light content cards (services, blog posts) */
.content-grid { display:flex; gap:22px; flex-wrap:wrap; max-width:1180px; margin:0 auto; padding:20px 6% 90px; }
.content-card { flex:1; min-width:260px; background:#fff; border:1px solid rgba(18,25,43,0.08); border-radius:18px; padding:32px 26px; box-shadow:0 6px 20px rgba(18,25,43,0.05); }
.content-card .cicon { width:44px; height:44px; border-radius:11px; background:rgba(103,61,230,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.content-card .cicon svg { width:20px; height:20px; stroke:#4C1FC4; }
.content-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; color:#12192B; }
.content-card p { font-size:14px; color:#5b6472; line-height:1.65; }

/* Full-width list rows (industries list, blog list) */
.list-section { max-width:900px; margin:0 auto; padding:20px 6% 100px; }
.list-row { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:24px 0; border-bottom:1px solid rgba(18,25,43,0.08); }
.list-row:first-child { border-top:1px solid rgba(18,25,43,0.08); }
.list-row h3 { font-size:18px; font-weight:700; margin-bottom:6px; color:#12192B; }
.list-row h3 a { color:#12192B; }
.list-row p { font-size:14px; color:#5b6472; line-height:1.6; }
.list-row .list-date { font-size:12.5px; color:#9aa4b5; white-space:nowrap; padding-top:4px; }

/* Simple bullet grid (industries served on services page) */
.bullet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:900px; margin:0 auto; padding:0 6% 100px; font-size:14px; color:#3f4657; }
.bullet-grid div::before { content:"•  "; color:#673DE6; font-weight:800; }

/* Centered message card (empty states — portfolio, empty blog) */
.center-card { max-width:560px; margin:0 auto; padding:60px 6% 110px; text-align:center; }
.center-card p { font-size:16px; color:#5b6472; line-height:1.7; margin-bottom:28px; }

/* Contact / ticket form */
.form-page-wrap { max-width:480px; margin:0 auto; padding:50px 6% 110px; }
.form-success { background:rgba(103,61,230,0.08); border:1px solid rgba(103,61,230,0.25); color:#4C1FC4; padding:16px 18px; border-radius:12px; font-size:14.5px; margin-bottom:20px; }
.form-error-box { background:#fdecea; border:1px solid #f3c6c2; color:#b3261e; padding:14px 16px; border-radius:12px; font-size:14px; margin-bottom:18px; }
.styled-form { display:flex; flex-direction:column; gap:14px; }
.styled-form input, .styled-form textarea { padding:13px 16px; border:1px solid rgba(18,25,43,0.14); border-radius:12px; font-size:14.5px; font-family:'Manrope',sans-serif; resize:vertical; }
.styled-form input:focus, .styled-form textarea:focus { outline:none; border-color:#673DE6; box-shadow:0 0 0 3px rgba(103,61,230,0.12); }
.styled-form button { align-self:flex-start; }

/* About page specific: values row reusing why-section styling pattern but standalone */
.about-hero-text { max-width:640px; margin:0 auto; text-align:center; }


/* How it works — 5 step row */
.steps-row { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; max-width:1180px; margin:44px auto 0; }
.step-item { text-align:left; }
.step-n { font-family:'Manrope',sans-serif; font-size:22px; font-weight:800; color:#673DE6; margin-bottom:12px; }
.step-item h3 { font-size:15.5px; font-weight:700; margin-bottom:8px; color:#12192B; }
.step-item p { font-size:13.5px; color:#5b6472; line-height:1.6; }

/* FAQ on home */
.faq-home { padding:80px 6% 90px; max-width:800px; margin:0 auto; }
.faq-home .faq-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.faq-home .faq-item { border:1px solid #e7e9f2; border-radius:14px; padding:4px 22px; background:#fff; }
.faq-home .faq-item summary { padding:16px 0; font-weight:700; font-size:15px; cursor:pointer; list-style:none; position:relative; padding-right:30px; }
.faq-home .faq-item summary::-webkit-details-marker { display:none; }
.faq-home .faq-item summary::after { content:"+"; position:absolute; right:0; top:14px; font-size:20px; color:#673DE6; transition:transform .2s; }
.faq-home .faq-item[open] summary::after { transform:rotate(45deg); }
.faq-home .faq-item p { padding-bottom:18px; color:#5b6472; font-size:14px; line-height:1.7; }

@media (max-width:900px){
  .steps-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .steps-row { grid-template-columns:1fr; }
}

/* Alternating section tint to break up the white run */
.section-tint { background:#F6F4FC; }

/* Combined About + FAQ (two columns), on a tint */
.about-faq-section { background:#fff; padding:80px 6%; }
.about-faq-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.about-faq-left h2 { font-size:30px; font-weight:800; margin-bottom:18px; color:#12192B; letter-spacing:-0.01em; }
.about-faq-left p { font-size:15.5px; color:#5b6472; line-height:1.7; margin-bottom:18px; }
.about-faq-right .faq-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.about-faq-right .faq-item { border:1px solid #e7e9f2; border-radius:14px; padding:2px 20px; background:#fff; }
.about-faq-right .faq-item summary { padding:15px 0; font-weight:700; font-size:14.5px; cursor:pointer; list-style:none; position:relative; padding-right:28px; }
.about-faq-right .faq-item summary::-webkit-details-marker { display:none; }
.about-faq-right .faq-item summary::after { content:"+"; position:absolute; right:0; top:13px; font-size:19px; color:#673DE6; transition:transform .2s; }
.about-faq-right .faq-item[open] summary::after { transform:rotate(45deg); }
.about-faq-right .faq-item p { padding-bottom:16px; color:#5b6472; font-size:13.5px; line-height:1.7; }

@media (max-width:900px){
  .about-faq-grid { grid-template-columns:1fr; gap:36px; }
}

/* "What we do" — force all 4 cards in one row on desktop */
.content-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); flex-wrap:unset; }
.content-grid-4 .content-card { min-width:0; }
@media (max-width:1000px){ .content-grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .content-grid-4 { grid-template-columns:1fr; } }

/* ===== Inner-page purple hero band (About, Contact, FAQ, Services, etc.) ===== */
.page-hero { position:relative; z-index:1; margin-top:-92px; padding:150px 6% 70px;
  background:radial-gradient(120% 120% at 80% 0%, #4C1FC4 0%, #2A1266 45%, #1A0B3D 100%);
  overflow:hidden; text-align:center; }
.page-hero::before { content:""; position:absolute; top:-120px; right:-80px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(150,110,255,0.35) 0%, transparent 65%); pointer-events:none; }
.page-hero::after { content:""; position:absolute; bottom:-160px; left:-100px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(103,61,230,0.4) 0%, transparent 65%); pointer-events:none; }
.page-hero-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.page-hero .eyebrow-pill { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:#d9ccff; }
.page-hero h1 { font-size:44px; font-weight:800; color:#fff; letter-spacing:-0.02em; margin-bottom:18px; line-height:1.12; }
.page-hero p { font-size:17px; color:#cfc6e8; line-height:1.65; max-width:560px; margin:0 auto; }

@media (max-width:900px){ .page-hero { margin-top:-80px; padding-top:130px; } .page-hero h1 { font-size:32px; } }

/* Contact page layout */
.contact-grid { max-width:1080px; margin:0 auto; padding:70px 6% 100px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:start; }
.contact-methods { display:flex; flex-direction:column; gap:14px; }
.contact-method { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid #e7e9f2; border-radius:14px; background:#fff; transition:border-color .15s, transform .15s; }
.contact-method:hover { border-color:#673DE6; transform:translateY(-2px); }
.contact-method .cm-ico { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(103,61,230,0.1); }
.contact-method .cm-ico svg { width:20px; height:20px; stroke:#4C1FC4; }
.contact-method .cm-label { font-size:12.5px; color:#8a8fa3; font-weight:600; }
.contact-method .cm-value { font-size:14.5px; font-weight:700; color:#12192B; }
.contact-form-card { background:#fff; border:1px solid #e7e9f2; border-radius:18px; padding:32px; box-shadow:0 6px 24px rgba(18,25,43,0.06); }
@media (max-width:800px){ .contact-grid { grid-template-columns:1fr; gap:32px; } }

/* Mission / Vision / Goal cards */
.mvg-grid { max-width:1180px; margin:0 auto; padding:20px 6% 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mvg-card { background:#fff; border:1px solid #e7e9f2; border-radius:18px; padding:32px 28px; box-shadow:0 6px 20px rgba(18,25,43,0.05); }
.mvg-card .mvg-ico { width:52px; height:52px; border-radius:13px; background:linear-gradient(135deg,#efeaff,#e0d6ff); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.mvg-card .mvg-ico svg { width:24px; height:24px; stroke:#4C1FC4; }
.mvg-card h3 { font-size:19px; font-weight:800; margin-bottom:10px; color:#12192B; }
.mvg-card p { font-size:14.5px; color:#5b6472; line-height:1.7; }
@media (max-width:900px){ .mvg-grid { grid-template-columns:1fr; } }

/* Service detail page */
.service-detail { max-width:1080px; margin:0 auto; padding:70px 6% 40px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:54px; align-items:center; }
.service-detail-img { border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(18,25,43,0.12); }
.service-detail-img img { width:100%; height:360px; object-fit:cover; }
.service-detail h2 { font-size:30px; font-weight:800; margin-bottom:16px; color:#12192B; letter-spacing:-0.01em; }
.service-detail p { font-size:15.5px; color:#5b6472; line-height:1.75; margin-bottom:16px; }
.service-feature-list { list-style:none; margin:20px 0; }
.service-feature-list li { font-size:14.5px; color:#3f4657; padding:9px 0 9px 30px; position:relative; }
.service-feature-list li::before { content:"✓"; position:absolute; left:0; color:#0f7a43; font-weight:800; }
@media (max-width:800px){ .service-detail { grid-template-columns:1fr; gap:30px; } }

/* Read more link on What We Do cards */
.content-grid-4 .content-card { display:flex; flex-direction:column; }
.card-readmore { margin-top:auto; padding-top:16px; font-size:13px; font-weight:700; color:#4C1FC4; display:inline-block; }
.card-readmore:hover { color:#673DE6; }

/* Services hub grid — 3 across desktop, 2 tablet, 1 mobile */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1180px; margin:0 auto; padding:20px 6% 40px; }
.services-grid .content-card { display:flex; flex-direction:column; min-width:0; }
@media (max-width:900px){ .services-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .services-grid { grid-template-columns:1fr; } }

/* Prevent iOS Safari auto-zoom on input focus — inputs must be >=16px on mobile */
@media (max-width:900px) {
  .styled-form input, .styled-form textarea,
  .form-field input, .form-field select, .form-field textarea,
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], textarea, select {
    font-size:16px !important;
  }
}