/* =========================================================
   GLOBE EDGE — SHARED DESIGN SYSTEM
   Reference: graphic-design.html
   Fonts: Poppins (headings/labels) + Inter (body)
   ========================================================= */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
:root{
  --navy:#0d2c66;
  --navy-deep:#0a2050;
  --blue:#1476bb;
  --blue-light:#3f7ee8;
  --orange:#f0ad00;
  --orange-deep:#e9950a;
  --ink:#1c2b45;
  --muted:#5a6b85;
  --bg-soft:#eef3ff;
  --white:#ffffff;
  --line:#e3e9f7;
  --shadow:0 20px 40px -20px rgba(14,42,120,.35);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.brand-name{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
::selection{background:var(--orange);color:#fff;}

/* =========================================================
   HERO — shared layout for all hero variants
   (.hero-copy/.hero-graphic, .hero-left/.hero-right,
    .container.hero-grid > .hero-copy/.hero-visual)
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:70px 60px 90px;
  background:linear-gradient(180deg,#eef1fb 0%, #f5f7fd 60%, #ffffff 100%);
}
.hero:has(> .hero-copy),
.hero:has(> .hero-left){
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px;
}
.hero:has(.hero-grid){ padding-left:0; padding-right:0; }
.hero .container.hero-grid,
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:40px;
  max-width:1440px;
  margin:0 auto;
  padding:0 60px;
}

.hero-copy, .hero-left{ position:relative; z-index:3; animation:fadeUp .9s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }

/* ---- Eyebrow (hero) ---- */
.hero .eyebrow{
  display:flex; align-items:center; gap:12px;
  color:var(--blue); font-weight:700; font-size:13px; letter-spacing:1.5px;
  margin-bottom:18px;
}
/* .hero .eyebrow::after{ content:""; width:50px; height:2px; background:var(--blue); display:inline-block; flex-shrink:0; } */
.hero .eyebrow:has(.line)::after{ content:none; }


/* ---- Hero heading ---- */
.hero h1, .hero h2{
  font-size:52px; line-height:1.12; font-weight:800; color:#000000;
}
.hero h1 .accent, .hero h2 .accent{ color:var(--blue); display:block; }

/* ---- Hero paragraph ---- */
.hero p{
  margin:22px 0 32px; font-size:16.5px; line-height:1.7; color:var(--muted); max-width:480px;
}

/* ---- Hero button row ---- */
.hero-buttons, .hero-actions, .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---- Hero visual container ---- */
.hero-graphic, .hero-right, .hero-visual{
  position:relative; width:100%; min-height:420px;
  display:flex; align-items:center; justify-content:center;
  animation:fadeUp 1.1s ease both;
}
.hero-graphic video, .hero-right video, .hero-visual video{
  width:100%; height:auto; display:block; border-radius:24px;
  box-shadow:0 30px 60px -20px rgba(14,42,120,.4);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary, .btn.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue); color:#fff; border:2px solid transparent;
  padding:14px 30px; border-radius:30px; font-weight:600; font-size:15px;
  box-shadow:0 8px 20px rgba(13,44,102,.25); cursor:pointer;
  transition:all .3s cubic-bezier(.2,.8,.3,1);
}
.btn-primary:hover, .btn.btn-primary:hover{
  background:var(--navy-deep); transform:translateY(-3px); box-shadow:var(--shadow);
}
.btn-outline, .btn.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--navy); border:1.5px solid var(--navy);
  padding:14px 30px; border-radius:30px; font-weight:600; font-size:15px;
  transition:all .3s ease; cursor:pointer;
}
.btn-outline:hover, .btn.btn-outline:hover{
  background:var(--navy); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow);
}
.circle, .arrow-circle{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.2); font-size:12px; transition:transform .3s ease;
}
.btn-outline .circle, .btn-outline .arrow-circle{ background:var(--navy); color:#fff; }
a:hover .circle, a:hover .arrow-circle{ transform:translateX(4px); }
.btn-primary i, .btn-outline i{ transition:transform .25s ease; }
.btn-primary:hover i, .btn-outline:hover i{ transform:translateX(4px); }

/* =========================================================
   SECTION — "WHAT WE DO" pattern
   (.section, .what-we-do, .section-what)
   ========================================================= */
.section, .what-we-do, .section-what{
  padding:100px 60px; text-align:center;
}

.section .eyebrow, .what-we-do .section-eyebrow, .section-what .section-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--blue); font-weight:700; letter-spacing:2px; font-size:13px;
  margin-bottom:18px;
}
.section .eyebrow::before, .section .eyebrow::after{
  content:""; width:44px; height:2px; background:var(--blue); display:inline-block;
}
.section .eyebrow:has(.rule)::before, .section .eyebrow:has(.rule)::after,
.section .eyebrow:has(.line)::before, .section .eyebrow:has(.line)::after{ content:none; }
.section-eyebrow .rule, .section-eyebrow .line{ width:44px; height:2px; background:var(--blue); display:inline-block; }

.section h3, .what-we-do h2, .section-what h2{
  font-size:38px; font-weight:800; color:#000000; margin:14px 0 18px; line-height:1.25;
  max-width:820px; margin-left:auto; margin-right:auto;
}
.section > p, .what-we-do > p, .section-what p.sub{
  max-width:680px; margin:0 auto 60px; color:var(--muted); font-size:16px; line-height:1.7;
}

/* =========================================================
   FEATURE CARDS
   ========================================================= */
.features, .feature-grid{
  display:flex; justify-content:center; flex-wrap:wrap; gap:0;
  max-width:1240px; margin:60px auto 0;
}
.feature{
  flex:1 1 220px; padding:0 30px; text-align:left; position:relative;
  opacity:0; transform:translateY(30px);
  animation:revealCard .7s ease forwards;
}
.feature:not(:last-child)::after{
  content:""; position:absolute; right:0; top:10%; height:80%; width:1px; background:var(--line);
}
.feature:nth-child(1){ animation-delay:.05s; }
.feature:nth-child(2){ animation-delay:.2s; }
.feature:nth-child(3){ animation-delay:.35s; }
.feature:nth-child(4){ animation-delay:.5s; }
@keyframes revealCard{ to{ opacity:1; transform:translateY(0);} }
.feature.in-view{ opacity:1; transform:translateY(0); }

.feature-icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.feature-icon svg{ width:28px; height:28px; }
.feature-icon i{ font-size:24px; }
.feature:nth-child(odd) .feature-icon{ background:var(--bg-soft); color:var(--blue); }
.feature:nth-child(even) .feature-icon{ background:#fff2e0; color:var(--orange-deep); }
.feature:hover .feature-icon{ transform:scale(1.12) rotate(-6deg); }

.feature h3, .feature h4{
  font-size:18px; font-weight:700; color:var(--navy); margin-bottom:10px;
  transition:color .25s ease;
}
.feature:hover h3, .feature:hover h4{ color:var(--orange-deep); }
.feature p{ font-size:14.5px; color:var(--muted); line-height:1.7; }

/* =========================================================
   TECH STRIP (mobile app development / web development)
   ========================================================= */
.tech-strip{
  position:relative; z-index:5;
  max-width:1100px; margin:-50px auto 40px;
  background:#fff; border-radius:20px;
  box-shadow:0 24px 48px -18px rgba(14,42,120,.32);
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:20px; padding:24px 34px;
}
.tech-item{
  display:flex; align-items:center; gap:10px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; color:var(--navy);
  padding:6px 8px; border-radius:10px;
  transition:transform .25s ease, background .25s ease;
}
.tech-item:hover{ transform:translateY(-4px); background:var(--bg-soft); }
.tech-item svg{ width:24px; height:24px; }
.tech-badge{
  width:28px; height:28px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-size:12px; font-weight:800; color:#fff;
}
.badge-html{ background:#e34c26; }
.badge-css{ background:#264de4; }
.badge-js{ background:#f7df1e; color:#1c2b45; }
.badge-php{ background:#e0e0f0; color:#6a7db3; border-radius:50%; }
.badge-sql{ background:#00618a; color:#f29111; }
.badge-bs{ background:#7952b3; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero{ padding:50px 24px; text-align:center; }
  .hero:has(> .hero-copy), .hero:has(> .hero-left){ grid-template-columns:1fr; }
  .hero .container.hero-grid, .hero-grid{ grid-template-columns:1fr; padding:0 24px; }
  .hero-copy, .hero-left{ display:flex; flex-direction:column; align-items:center; }
  .hero h1, .hero h2{ font-size:36px; }
  .hero p{ max-width:100%; margin-left:auto; margin-right:auto; }
  .hero-buttons, .hero-actions, .hero-ctas{ justify-content:center; }
  .hero-graphic, .hero-right, .hero-visual{ min-height:320px; margin-top:20px; }

  .section, .what-we-do, .section-what{ padding:60px 24px; }
  .features, .feature-grid{ flex-direction:column; gap:36px; }
  .feature:not(:last-child)::after{ display:none; }

  .tech-strip{ margin:20px 24px 30px; justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
  /* ================= QUOTE / CONSULTATION POPUP ================= */
  .quote-overlay{
    position:fixed; inset:0; z-index:900;
    background:rgba(22,34,63,.35);
    opacity:0; visibility:hidden;
    transition:opacity .28s ease, visibility 0s linear .28s;
  }
  .quote-overlay.is-open{
    opacity:1; visibility:visible;
    transition:opacity .28s ease, visibility 0s linear 0s;
  }

  .quote-popup{
    position:fixed; z-index:901;
    width:420px; max-width:calc(100vw - 32px);
    max-height:calc(100vh - 32px);
    background:#fff; border:1.5px solid var(--blue);
    border-radius:14px;
    box-shadow:0 24px 60px rgba(15,40,80,.22);
    padding:34px 30px 30px;
    opacity:0; visibility:hidden;
    transform:translateY(-10px) scale(.97);
    transform-origin:top center;
    transition:opacity .24s cubic-bezier(.4,0,.2,1), transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s;
  }
  .quote-popup.is-open{
    opacity:1; visibility:visible;
    transform:translateY(0) scale(1);
    transition:opacity .24s cubic-bezier(.4,0,.2,1), transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
  .quote-popup.flip-up{
    transform-origin:bottom center;
    transform:translateY(10px) scale(.97);
  }
  .quote-popup.flip-up.is-open{
    transform:translateY(0) scale(1);
  }

  /* speech-bubble pointer + gold dot, matching reference mockup */
  .quote-popup::before{
    content:'';
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    width:20px; height:20px;
    background:#fff;
    border-left:1.5px solid var(--blue);
    border-top:1.5px solid var(--blue);
    border-radius:3px 0 0 0;
    transform:translateX(-50%) rotate(45deg);
  }
  .quote-popup.pointer-left::before{ left:var(--pointer-x,38px); transform:rotate(45deg); }
  .quote-popup .pointer-dot{
    position:absolute; top:-30px; left:50%; transform:translateX(-50%);
    width:20px; height:20px; border-radius:50%;
    background:#F0AD00;
    box-shadow:0 3px 8px rgba(240,173,0,.4);
  }
  .quote-popup.pointer-left .pointer-dot{ left:var(--pointer-x,38px); transform:none; }
  .quote-popup.flip-up::before{ top:auto; bottom:-11px; border:0; border-right:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue); border-radius:0 0 3px 0; }
  .quote-popup.flip-up .pointer-dot{ top:auto; bottom:-30px; }

  .quote-close{
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border-radius:50%; border:0;
    background:var(--tint); color:var(--blue-dark);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .quote-close:hover{ background:var(--blue); color:#fff; transform:rotate(90deg); }
  .quote-close svg{ width:15px; height:15px; }

  .quote-popup h3{
    font-size:19px; margin:0 0 20px; padding-right:26px;
    color:var(--blue-dark);
  }

  .quote-form{ display:flex; flex-direction:column; gap:14px; }
  .quote-row{ display:flex; gap:12px; }
  .quote-row .quote-field{ flex:1 1 0; min-width:0; }

  .quote-field input,
  .quote-field textarea{
    width:100%; border:1.5px solid var(--blue); border-radius:8px;
    padding:13px 14px; font-family:'Inter',sans-serif; font-size:14.5px;
    color:var(--ink); background:#fff; outline:none; resize:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .quote-field textarea{ min-height:110px; }
  .quote-field input::placeholder,
  .quote-field textarea::placeholder{ color:#8b93a6; }
  .quote-field input:focus,
  .quote-field textarea:focus{
    border-color:var(--blue-deep);
    box-shadow:0 0 0 3px rgba(20,118,187,.14);
  }

  .quote-recaptcha{
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid #d3d9e3; border-radius:6px; background:#f9f9f9;
    padding:12px 14px;
  }
  .quote-recaptcha-left{ display:flex; align-items:center; gap:10px; }
  .quote-recaptcha input[type="checkbox"]{
    width:20px; height:20px; accent-color:var(--blue); cursor:pointer;
  }
  .quote-recaptcha-left span{ font-size:13.5px; color:var(--ink); }
  .quote-recaptcha-badge{ text-align:center; }
  .quote-recaptcha-badge svg{ display:block; margin:0 auto; }
  .quote-recaptcha-badge small{ display:block; font-size:9px; color:#9099a8; margin-top:2px; }

  .quote-submit{
    align-self:flex-start;
    background:#fff; color:var(--blue);
    border:1.5px solid var(--blue); border-radius:26px;
    padding:12px 34px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
    cursor:pointer; transition:all .18s ease;
  }
  .quote-submit:hover{ background:var(--blue); color:#fff; }

  .quote-success{
    display:none; align-items:center; gap:10px;
    background:var(--gold-soft); border-radius:8px; padding:12px 14px;
    font-size:13.5px; color:var(--blue-dark); font-weight:500;
  }
  .quote-success.is-visible{ display:flex; }

  @media (max-width:480px){
    .quote-popup{ padding:28px 20px 24px; }
    .quote-row{ flex-direction:column; }
  }