/* ==========================================================================
   Gravity Consultancy — design system
   "Everything orbits around one place."
   ========================================================================== */

:root{
  --ink:#0B1424;
  --navy:#101C34;
  --navy-2:#0E1A30;
  --blue:#1C6FE0;
  --blue-dark:#124FB0;
  --cyan:#4FD8C8;
  --ember:#FF6B45;
  --paper:#F6F8FC;
  --paper-2:#EEF2F9;
  --white:#FFFFFF;
  --ink-soft:#4A5568;
  --ink-faint:#8A93A6;
  --line: rgba(11,20,36,.10);
  --line-2: rgba(255,255,255,.14);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 48px -28px rgba(11,20,36,.35);
  --shadow-sm: 0 10px 24px -16px rgba(11,20,36,.25);
  --container: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0;
}
h1{ font-weight:700; letter-spacing:-0.02em; }

p{ color:var(--ink-soft); }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-dark); }
img{ max-width:100%; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
@media (max-width:767.98px){ .section{ padding:56px 0; } .section-tight{ padding:36px 0; } }

.bg-paper{ background:var(--paper); }
.bg-ink{ background:var(--ink); color:#fff; }
.bg-ink p{ color:rgba(255,255,255,.72); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4,.bg-ink h5,
.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero p,
.page-hero h1,.page-hero h2,.page-hero h3,.page-hero p,
.panel-ink h1,.panel-ink h2,.panel-ink h3,.panel-ink h4,.panel-ink h5{ color:#fff; }

/* -- Eyebrow / kicker (sentence case, marker instead of tracked caps) -- */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size:.92rem; color:var(--blue); margin-bottom:14px;
}
.kicker::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--ember); display:inline-block; }
.bg-ink .kicker{ color:var(--cyan); }

.lede{ font-size:1.4rem; max-width:640px; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }

/* ------------------------------- Buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.98rem;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  line-height:1.1; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 14px 28px -14px rgba(28,111,224,.55); }
.btn-primary:hover{ background:var(--blue-dark); color:#fff; }
.btn-ember{ background:var(--ember); color:#fff; box-shadow:0 14px 28px -14px rgba(255,107,69,.5); }
.btn-ember:hover{ background:#e75a35; color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-on-dark{ background:transparent; color:#fff; border-color:var(--line-2); }
.btn-on-dark:hover{ border-color:#fff; color:#fff; }
.btn-whatsapp{ background:#22C35E; color:#fff; }
.btn-whatsapp:hover{ background:#1aa94f; color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:.88rem; }

/* -------------------------------- Navbar --------------------------------- */
.gc-topbar{ background:var(--ink); color:rgba(255,255,255,.75); font-size:.86rem; }
.gc-topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:42px; }
.gc-topbar a{ color:rgba(255,255,255,.75); }
.gc-topbar .tb-social a{ color:rgba(255,255,255,.6); margin-left:14px; }
.gc-topbar .tb-social a:hover{ color:#fff; }
.gc-topbar i{ margin-right:6px; color:var(--cyan); }

.gc-nav{ background:var(--ink); position:relative; z-index:40; }
.gc-nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:14px; }
.gc-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.gc-brand:hover{ color:#fff; }
.brand-logo{ height:32px; width:auto; display:block; }
.footer-brand .brand-logo{ height:44px; }
.gc-links{ display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; flex:0 1 auto; }
.gc-links a{
  display:block; padding:9px 12px; border-radius:999px; color:rgba(255,255,255,.78);
  font-size:.92rem; font-weight:500; white-space:nowrap; transition:background-color .15s ease,color .15s ease;
}
.gc-links a:hover, .gc-links a.active{ background:rgba(255,255,255,.1); color:#fff; }
.gc-links .dropdown{ position:relative; }
.gc-menu{
  list-style:none; margin:10px 0 0; padding:10px; position:absolute; top:100%; left:0;
  min-width:280px; background:#fff; border-radius:14px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.gc-links .dropdown:hover .gc-menu, .gc-links .dropdown:focus-within .gc-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.gc-menu a{ color:var(--ink); border-radius:8px; padding:10px 12px; font-size:.92rem; white-space:normal; }
.gc-menu a:hover{ background:var(--paper); color:var(--blue); }
.gc-cta{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.gc-toggle{ display:none; background:none; border:0; color:#fff; font-size:1.4rem; padding:6px; }

@media (max-width:1199.98px){
  .gc-toggle{ display:inline-flex; }
  .gc-links, .gc-cta .btn-ghost{ display:none; }
  .gc-nav .wrap{ min-height:64px; }
  .gc-panel.open .gc-links{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:64px; left:0; right:0; background:var(--ink);
    padding:10px 24px 20px; box-shadow:var(--shadow);
  }
  .gc-panel.open .gc-links a{ white-space:normal; }
  .gc-panel.open .gc-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:rgba(255,255,255,.04); margin-top:4px; }
  .gc-panel.open .gc-menu a{ color:rgba(255,255,255,.78); }
  .gc-panel.open .gc-menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
}

/* -------------------------------- Hero ------------------------------------ */
.hero{ background:radial-gradient(120% 140% at 78% 18%, #16264A 0%, var(--ink) 58%); color:#fff; position:relative; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:64px; padding-bottom:70px; }
@media (max-width:991.98px){ .hero .wrap{ grid-template-columns:1fr; padding-top:44px; padding-bottom:44px; } }
.hero h1{ font-size:clamp(2.1rem, 4vw, 3.15rem); margin-bottom:18px; }
.hero .lede{ color:rgba(255,255,255,.72); max-width:520px; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-stats{ display:flex; gap:34px; margin-top:46px; flex-wrap:wrap; }
.hero-stats .num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.7rem; color:#fff; display:block; }
.hero-stats .label{ font-size:.85rem; color:rgba(255,255,255,.55); }

/* Orbit graphic */
.orbit-wrap{ position:relative; display:flex; align-items:center; justify-content:center; min-height:380px; }
.orbit-svg{ width:100%; max-width:460px; height:auto; overflow:visible; }
.orbit-ring{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.2; }
.orbit-ring.acc{ stroke:rgba(79,216,200,.35); }
.orbit-core{ fill:var(--blue); }
.orbit-core-glow{ fill:var(--blue); opacity:.18; }
.orbit-node circle{ fill:var(--navy); stroke:rgba(255,255,255,.35); stroke-width:1; }
.orbit-node text{ font-family:'Space Grotesk',sans-serif; font-size:10.5px; fill:#EAF0FF; }
.orbit-node.ember circle{ fill:var(--ember); stroke:none; }
.orbit-node.cyan circle{ fill:var(--cyan); stroke:none; }
.orbit-g1{ transform-box:view-box; transform-origin:230px 220px; animation:spin1 46s linear infinite; }
.orbit-g2{ transform-box:view-box; transform-origin:230px 220px; animation:spin2 64s linear infinite; }
@keyframes spin1{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes spin2{ from{ transform:rotate(360deg);} to{ transform:rotate(0deg);} }
.orbit-g1 .spin, .orbit-g2 .spin{ animation:counter1 46s linear infinite; transform-box:fill-box; transform-origin:center; }
.orbit-g2 .spin{ animation-duration:64s; animation-direction:reverse; }
@keyframes counter1{ from{ transform:rotate(0deg);} to{ transform:rotate(-360deg);} }
@media (prefers-reduced-motion: reduce){ .orbit-g1,.orbit-g2,.orbit-g1 .orbit-node,.orbit-g2 .orbit-node{ animation:none; } }

/* -------------------------------- Cards ----------------------------------- */
.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stat-cell{ background:#fff; padding:30px 26px; }
.stat-cell .num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.1rem; color:var(--blue); }
.stat-cell .label{ color:var(--ink-soft); font-size:.94rem; margin-top:4px; }
@media (max-width:767.98px){ .stat-strip{ grid-template-columns:1fr; } }

.feature-row{
  display:flex; gap:16px; padding:22px 4px; border-top:1px solid var(--line);
}
.feature-row:last-child{ border-bottom:1px solid var(--line); }
.feature-ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:1.1rem;
}
.feature-row h5{ font-size:1.02rem; margin-bottom:3px; }
.feature-row p{ margin:0; font-size:.92rem; }

.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; height:100%; border-left:3px solid var(--blue);
  transition:box-shadow .2s ease, transform .2s ease;
}
.svc-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.svc-card .ico{ width:48px; height:48px; border-radius:12px; background:var(--paper-2); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:16px; }
.svc-card h4{ font-size:1.12rem; margin-bottom:8px; }
.svc-card p{ font-size:.93rem; margin-bottom:16px; }
.svc-card .go{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.9rem; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.svc-card.infra{ border-left-color:var(--cyan); }
.svc-card.infra .ico{ color:#159687; }
.svc-card.product{ border-left-color:var(--ember); background:linear-gradient(180deg,#fff 0%,#FFF6F2 100%); }
.svc-card.product .ico{ color:var(--ember); }

.group-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.group-label .dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); }
.group-label.infra .dot{ background:var(--cyan); }
.group-label.product .dot{ background:var(--ember); }

/* -------------------------------- Panels ----------------------------------- */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow-sm); }
.panel-ink{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:40px; }
.panel-ink p{ color:rgba(255,255,255,.72); }

/* -------------------------------- Forms ------------------------------------ */
.form-control, .form-select{
  border:1.5px solid var(--line); border-radius:10px; padding:13px 16px; font-size:.96rem;
  background:#fff; color:var(--ink); width:100%; transition:border-color .15s ease;
}
.form-control:focus, .form-select:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(28,111,224,.15); }
.on-dark .form-control, .on-dark .form-select{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.on-dark .form-control::placeholder{ color:rgba(255,255,255,.5); }
label.field-label{ font-size:.84rem; color:var(--ink-faint); margin-bottom:6px; display:block; }

/* -------------------------------- Breadcrumb / page hero -------------------- */
.page-hero{ background:var(--ink); color:#fff; padding:150px 0 60px; position:relative; }
.page-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 85% 0%, rgba(28,111,224,.35), transparent 60%); pointer-events:none; }
.page-hero .wrap{ position:relative; }
.crumbs{ font-size:.86rem; color:rgba(255,255,255,.5); margin-bottom:18px; }
.crumbs a{ color:rgba(255,255,255,.7); }
.crumbs a:hover{ color:#fff; }
.page-hero h1{ font-size:clamp(1.9rem,3.4vw,2.7rem); max-width:760px; }
.page-hero .lede{ max-width:640px; color:rgba(255,255,255,.72); margin-top:14px; }

/* -------------------------------- FAQ --------------------------------------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding:20px 4px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; color:var(--ink);
}
.faq-q .icon{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background-color .2s ease; font-size:.78rem; color:var(--blue); }
.faq-item.open .faq-q .icon{ transform:rotate(45deg); background:var(--blue); color:#fff; border-color:var(--blue); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p{ padding:0 30px 20px 4px; margin:0; }
.faq-item.open .faq-a{ max-height:240px; }

/* -------------------------------- Footer ------------------------------------ */
.gc-footer{ background:var(--ink); color:rgba(255,255,255,.65); padding-top:70px; }
.gc-footer h5{ color:#fff; font-size:1rem; margin-bottom:18px; }
.gc-footer a{ color:rgba(255,255,255,.65); }
.gc-footer a:hover{ color:#fff; }
.gc-footer .flink{ display:block; padding:6px 0; font-size:.93rem; }
.footer-brand p{ color:rgba(255,255,255,.6); max-width:280px; margin-top:12px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--blue); border-color:var(--blue); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:50px; padding:22px 0; font-size:.86rem; color:rgba(255,255,255,.5); }

.back-to-top{
  position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:50%;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:50;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* -------------------------------- misc utility ------------------------------ */
.duo-photo{ position:relative; border-radius:var(--radius); overflow:hidden; }
.duo-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.duo-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(16,28,52,.55), rgba(28,111,224,.18) 55%, transparent 90%); }
.check-list{ list-style:none; margin:0; padding:0; }
.check-list li{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-weight:500; }
.check-list i{ color:var(--blue); }
.pill{ display:inline-block; padding:6px 14px; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); font-size:.82rem; font-weight:500; }
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
hr.thin{ border:0; border-top:1px solid var(--line); }

/* ------------------------------ legal / policy pages ------------------------------ */
.legal{ max-width:820px; margin:0 auto; }
.legal .updated{ display:inline-block; font-size:.86rem; font-weight:600; color:var(--blue-dark); background:var(--paper-2); border-radius:999px; padding:6px 14px; margin-bottom:28px; }
.legal h2{ font-size:1.25rem; margin:36px 0 12px; }
.legal p, .legal li{ font-size:1rem; line-height:1.75; color:var(--ink-soft); }
.legal ol, .legal ul{ padding-left:1.2rem; margin:0 0 16px; }
.legal li{ margin-bottom:12px; }
.legal .note-box{ border:1px solid var(--line); border-left:4px solid var(--blue); background:var(--paper); border-radius:var(--radius-sm); padding:18px 20px; margin:28px 0; }
.legal .note-box p{ margin:0; }
.legal-links a{ color:rgba(255,255,255,.7); }
.legal-links a:hover{ color:#fff; }
.legal-links .sep{ margin:0 8px; opacity:.5; }