/* ═══════════════════════════════════════════════════════════════
   EGS — For Medical Treatment & Facilitations
   Stylesheet v2 — light theme (default) + luminous dark theme
   Palette from the EGS logo: deep navy + signal blue.
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blue:        #0798F1;
    --blue-2:      #38B6FF;
    --blue-deep:   #0578C4;
    --blue-soft:   rgba(7,152,241,.10);
    --blue-border: rgba(7,152,241,.28);
    --cyan:        #2DD4FF;
    --navy:        #232840;
    --navy-2:      #2E3450;
    --gold:        #F5B301;

    --bg:        #F4F7FC;
    --bg-2:      #FFFFFF;
    --bg-3:      #EAF0F8;
    --card:      #FFFFFF;
    --card-2:    #F7FAFE;
    --ink:       #171B2E;
    --ink-2:     #4A526E;
    --ink-3:     #7C849E;
    --line:      rgba(23,27,46,.10);
    --line-2:    rgba(23,27,46,.06);
    --hero-grad: linear-gradient(135deg,#171B2E 0%,#232840 50%,#0A3D66 100%);
    --shadow:    0 10px 34px rgba(23,27,46,.08);
    --shadow-lg: 0 28px 70px rgba(23,27,46,.16);
    --glow:      0 8px 30px rgba(7,152,241,.38);
    --glow-lg:   0 0 60px rgba(7,152,241,.35);
    --header-bg: rgba(255,255,255,.84);
    --success:   #0E9F6E;
    --orb-a:     rgba(7,152,241,.16);
    --orb-b:     rgba(45,212,255,.12);
    --orb-c:     rgba(35,40,64,.08);
    --card-grad: linear-gradient(180deg,#FFFFFF,#FBFCFE);
    --overlay:   linear-gradient(180deg, rgba(23,27,46,.55) 0%, rgba(23,27,46,.78) 60%, rgba(23,27,46,.96) 100%);
}

html.theme-dark {
    --bg:        #070B18;
    --bg-2:      #0B1124;
    --bg-3:      #0F172E;
    --card:      #0F1730;
    --card-2:    #131D3A;
    --ink:       #F3F6FC;
    --ink-2:     #B6BFD8;
    --ink-3:     #7F8AAB;
    --line:      rgba(255,255,255,.11);
    --line-2:    rgba(255,255,255,.06);
    --hero-grad: linear-gradient(135deg,#070B18 0%,#0D1530 50%,#06294A 100%);
    --shadow:    0 10px 34px rgba(0,0,0,.40);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(7,152,241,.12);
    --glow:      0 8px 34px rgba(7,152,241,.5);
    --glow-lg:   0 0 90px rgba(7,152,241,.45);
    --header-bg: rgba(7,11,24,.78);
    --success:   #2EC48A;
    --orb-a:     rgba(7,152,241,.34);
    --orb-b:     rgba(45,212,255,.22);
    --orb-c:     rgba(120,90,255,.18);
    --card-grad: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    --overlay:   linear-gradient(180deg, rgba(7,11,24,.45) 0%, rgba(7,11,24,.72) 55%, rgba(7,11,24,.97) 100%);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    background: var(--bg); color: var(--ink);
    font-family: 'Manrope','Segoe UI',system-ui,sans-serif;
    font-size: 16px; line-height: 1.7; overflow-x: hidden;
    -webkit-font-smoothing: antialiased; position: relative;
}
h1,h2,h3,h4 { font-family: 'Sora','Manrope',sans-serif; line-height: 1.2; font-weight: 700; color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(7,152,241,.3); }

/* ── ambient light: floating orbs behind everything ── */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient span {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9;
    will-change: transform; animation: orbFloat 22s ease-in-out infinite alternate;
}
.ambient span:nth-child(1) { width: 640px; height: 640px; left: -160px; top: -200px; background: var(--orb-a); }
.ambient span:nth-child(2) { width: 520px; height: 520px; right: -140px; top: 20%; background: var(--orb-b); animation-duration: 28s; animation-delay: -8s; }
.ambient span:nth-child(3) { width: 560px; height: 560px; left: 30%; bottom: -260px; background: var(--orb-c); animation-duration: 34s; animation-delay: -16s; }
@keyframes orbFloat {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(60px,40px) scale(1.08); }
    100% { transform: translate(-40px,70px) scale(.96); }
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* a11y */
.skip-link {
    position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
    background: var(--blue); color: #fff; padding: 10px 20px; border-radius: 0 0 10px 10px;
    font-size: 13px; font-weight: 700; z-index: 300; transition: top .25s;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg-3); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--blue),var(--cyan)); border-radius: 10px; }

#scrollProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
    background: linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow: 0 0 12px var(--blue);
    transition: width .1s linear;
}

/* ═══ Top bar ═══ */
.topbar { background: var(--navy); color: #C9D4E8; font-size: 12.5px; font-weight: 600; position: relative; z-index: 60; }
html.theme-dark .topbar { background: #04070F; border-bottom: 1px solid rgba(255,255,255,.05); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar a { color: #fff; } .topbar a:hover { color: var(--cyan); }
.topbar .tb-left, .topbar .tb-right { display: flex; align-items: center; gap: 18px; }
.topbar i { color: var(--blue-2); margin-right: 6px; }
.tb-live { display: inline-flex; align-items: center; gap: 7px; }
.tb-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #2EC48A; animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(46,196,138,.6)} 70%{box-shadow:0 0 0 9px rgba(46,196,138,0)} 100%{box-shadow:0 0 0 0 rgba(46,196,138,0)} }
@media (max-width: 640px){ .topbar .tb-mail { display:none; } }

/* ═══ Header ═══ */
.site-header {
    position: sticky; top: 0; z-index: 100; background: var(--header-bg);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--line-2); transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: var(--shadow); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 46px; width: auto; }
.brand .logo-dark { display: block; } .brand .logo-light { display: none; }
html.theme-dark .brand .logo-dark { display: none; }
html.theme-dark .brand .logo-light { display: block; filter: drop-shadow(0 0 14px rgba(7,152,241,.35)); }
.brand-sub { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); border-left: 1px solid var(--line); padding-left: 12px; line-height: 1.5; }
@media (max-width: 900px){ .brand-sub { display: none; } }

.nav-desktop { display: flex; align-items: center; gap: 24px; font-size: 13.5px; font-weight: 700; }
.nav-desktop > a, .nav-desktop .nav-drop > a { color: var(--ink-2); letter-spacing: .02em; transition: color .2s; position: relative; padding: 6px 0; }
.nav-desktop > a::after, .nav-drop > a::after {
    content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
    background: linear-gradient(90deg,var(--blue),var(--cyan)); border-radius: 2px; transition: width .25s;
}
.nav-desktop > a:hover, .nav-desktop > a.active, .nav-drop:hover > a { color: var(--ink); }
.nav-desktop > a:hover::after, .nav-desktop > a.active::after, .nav-drop:hover > a::after { width: 100%; }
@media (max-width: 1080px){ .nav-desktop { display: none; } }

.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-drop-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-lg); padding: 10px; width: 640px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    opacity: 0; visibility: hidden; transition: all .25s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 11px; color: var(--ink-2); font-size: 13px; transition: all .15s; }
.nav-drop-menu a:hover { background: var(--blue-soft); color: var(--ink); }
.nav-drop-menu a i { color: var(--blue); width: 34px; height: 34px; border-radius: 9px; background: var(--blue-soft); display:flex; align-items:center; justify-content:center; font-size: 14px; flex-shrink: 0; }
.nav-drop-menu a small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }

.hdr-actions { display: flex; align-items: center; gap: 10px; }
.hdr-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 800; cursor: pointer; transition: all .2s; }
.hdr-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.btn-wa {
    display: inline-flex; align-items: center; gap: 9px;
    background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color: #fff;
    padding: 11px 20px; border-radius: 11px; font-size: 12.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; transition: all .25s; box-shadow: var(--glow);
}
.btn-wa:hover { transform: translateY(-2px); filter: brightness(1.1); }
@media (max-width: 640px){ .hdr-actions .btn-wa { display: none; } }
.mobile-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
@media (max-width: 1080px){ .mobile-toggle { display: inline-flex; align-items:center; justify-content:center; } }
.mobile-menu { display: none; flex-direction: column; padding: 12px 24px 22px; background: var(--bg-2); border-top: 1px solid var(--line-2); box-shadow: var(--shadow); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 13px 4px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.mobile-menu a:hover { color: var(--blue); }
.mobile-menu .mm-sub { padding-left: 22px; font-size: 13.5px; font-weight: 600; }

/* ═══ Buttons ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 13px; font-weight: 800; font-size: 14px; letter-spacing: .03em; cursor: pointer; transition: all .25s; border: none; position: relative; overflow: hidden; }
.btn-primary { background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color: #fff; box-shadow: var(--glow); }
.btn-primary::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform: skewX(-20deg); transition: left .6s; }
.btn-primary:hover::after { left: 160%; }
.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.08); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn-light:hover { transform: translateY(-3px); }
.btn-glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }

/* ═══ Hero ═══ */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--hero-grad); isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: url('/assets/img/hero-dubai.jpg') center 40%/cover no-repeat; transform: scale(1.06); animation: heroZoom 26s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.14) translateY(-14px); } }
.hero-bg::after { content:""; position:absolute; inset:0; background: var(--overlay); }
.hero-orbs { position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.hero-orbs span { position:absolute; border-radius:50%; filter: blur(60px); animation: orbFloat 18s ease-in-out infinite alternate; }
.hero-orbs span:nth-child(1){ width: 520px; height: 520px; right: -120px; top: -80px; background: rgba(7,152,241,.42); }
.hero-orbs span:nth-child(2){ width: 380px; height: 380px; left: -80px; bottom: 40px; background: rgba(45,212,255,.22); animation-delay: -7s; }
.hero-orbs span:nth-child(3){ width: 300px; height: 300px; left: 45%; top: 30%; background: rgba(120,90,255,.18); animation-delay: -12s; }
.hero-grid { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.18;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(900px 560px at 60% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(900px 560px at 60% 45%, #000 20%, transparent 75%); }
.hero .wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 40px; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(7,152,241,.16); border: 1px solid rgba(7,152,241,.45); color: #8ED8FF; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; margin-bottom: 26px; backdrop-filter: blur(8px); box-shadow: 0 0 30px rgba(7,152,241,.2); }
.hero h1 { font-size: clamp(34px,5.2vw,62px); font-weight: 800; color: #fff; max-width: 840px; letter-spacing: -.015em; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.hero h1 .accent { background: linear-gradient(90deg,#38B6FF,#7FE0FF,#38B6FF); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s linear infinite; white-space: nowrap; }
@keyframes shine { to { background-position: 200% center; } }
.hero-sub { margin-top: 24px; max-width: 640px; font-size: 17.5px; color: #C9D4E8; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-note { margin-top: 18px; font-size: 13px; color: #9FB0CB; display:flex; align-items:center; gap:8px; }
.hero-note i { color: #2EC48A; }
.hero-stats { position: relative; z-index: 2; margin-top: 64px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.hero-stats .stat { padding: 28px 20px; text-align: center; border-left: 1px solid rgba(255,255,255,.09); position: relative; }
.hero-stats .stat:first-child { border-left: none; }
.hero-stats .stat::before { content:""; position:absolute; left:50%; top:0; width:60px; height:2px; transform:translateX(-50%); background: linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.7; }
.stat-num { font-family:'Sora'; font-size: clamp(26px,3vw,40px); font-weight: 800; color: #fff; text-shadow: 0 0 24px rgba(56,182,255,.5); }
.stat-num .plus { color: var(--blue-2); }
.stat-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9FB0CB; margin-top: 6px; }
@media (max-width: 800px){ .hero-stats { grid-template-columns: repeat(2,1fr); } .hero-stats .stat:nth-child(3){ border-left:none; } .hero-stats .stat:nth-child(1), .hero-stats .stat:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.09); } }
.ecg-divider { display:block; width:100%; height:60px; margin-top:30px; position:relative; z-index:2; }
.ecg-divider path { fill:none; stroke: var(--cyan); stroke-width:2; filter: drop-shadow(0 0 6px var(--cyan)); stroke-dasharray:1400; stroke-dashoffset:1400; animation: ecgDraw 4.5s linear infinite; }
@keyframes ecgDraw { to { stroke-dashoffset: 0; } }

/* ═══ Trust marquee ═══ */
.trustbar { background: var(--bg-2); border-bottom: 1px solid var(--line-2); padding: 16px 0; overflow: hidden; position: relative; }
.trustbar::before, .trustbar::after { content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.trustbar::before { left:0; background: linear-gradient(90deg,var(--bg-2),transparent); }
.trustbar::after { right:0; background: linear-gradient(-90deg,var(--bg-2),transparent); }
.marquee { display:flex; gap:60px; white-space:nowrap; animation: marquee 34s linear infinite; width:max-content; }
.trustbar:hover .marquee { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee span { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-3); }
.marquee span i { color: var(--blue); }

/* ═══ Sections ═══ */
section { padding: 96px 0; position: relative; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.kicker { display:inline-flex; align-items:center; gap:8px; color: var(--blue); font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; }
.kicker::before { content:""; width:26px; height:2px; background: linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:2px; }
.sec-head.center .kicker::after { content:""; width:26px; height:2px; background: linear-gradient(90deg,var(--cyan),var(--blue)); border-radius:2px; }
.sec-head h2 { font-size: clamp(28px,3.6vw,44px); letter-spacing:-.015em; }
.sec-head p { margin-top:16px; color: var(--ink-2); font-size:16.5px; }
.grad-text { background: linear-gradient(90deg,var(--blue),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.reveal { opacity:0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s } .reveal.d2 { transition-delay:.16s } .reveal.d3 { transition-delay:.24s } .reveal.d4 { transition-delay:.32s } .reveal.d5 { transition-delay:.4s }
html.no-js .reveal { opacity:1; transform:none; }

/* spotlight (mouse-follow light) */
.spot { position: relative; overflow: hidden; }
.spot::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .35s; z-index:0;
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(7,152,241,.16), transparent 45%); }
.spot:hover::before { opacity: 1; }
html.theme-dark .spot::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(56,182,255,.22), transparent 45%); }
.spot > * { position: relative; z-index: 1; }

/* generic glass card */
.card { background: var(--card-grad), var(--card); border: 1px solid var(--line); border-radius: 20px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-border); }

/* ═══ ITIJ feature band ═══ */
.feature-band { padding: 86px 0 0; }
.feature-inner {
    display:grid; grid-template-columns: 1.08fr 1fr; border-radius: 26px; overflow:hidden;
    border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-lg);
}
@media (max-width: 900px){ .feature-inner { grid-template-columns: 1fr; } }
.feature-copy { padding: 46px 46px; display:flex; flex-direction:column; gap: 15px; justify-content:center; }
.feature-tag { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--blue); background: var(--blue-soft); border:1px solid var(--blue-border); padding:6px 14px; border-radius:999px; }
.feature-copy h2 { font-size: clamp(22px,2.6vw,32px); }
.feature-copy p { color: var(--ink-2); font-size: 15px; }
.feature-meta { display:flex; flex-wrap:wrap; gap:18px; font-size:12.5px; color: var(--ink-3); font-weight:700; }
.feature-meta i { color: var(--blue); margin-right:6px; }
.feature-author { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line-2); padding-top:16px; margin-top:2px; }
.feature-author img { width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:top center; border:2px solid var(--blue-border); flex-shrink:0; }
.feature-author blockquote { font-size:13.5px; font-style:italic; color: var(--ink-2); }
.feature-author cite { display:block; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: var(--blue); margin-top:5px; }

/* the actual magazine tear sheet */
.feature-sheet { position:relative; overflow:hidden; background: var(--hero-grad); min-height: 480px; display:flex; align-items:center; justify-content:center; padding: 34px 30px; }
.feature-sheet::before { content:""; position:absolute; inset:0; background: radial-gradient(460px 300px at 70% 20%, rgba(7,152,241,.4), transparent 62%), radial-gradient(360px 260px at 10% 100%, rgba(45,212,255,.22), transparent 62%); }
.feature-sheet img {
    position:relative; z-index:2; width:auto; max-width:100%; max-height:430px; border-radius:5px;
    box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14);
    transform: rotate(-2.6deg); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.feature-inner:hover .feature-sheet img { transform: rotate(0deg) scale(1.035); box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(56,182,255,.4); }
.sheet-badge {
    position:absolute; z-index:3; top:22px; right:22px;
    background: rgba(7,11,24,.72); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.22);
    color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    padding:7px 13px; border-radius:999px; display:flex; align-items:center; gap:8px;
}
.sheet-badge i { color: var(--cyan); }
@media (max-width: 900px){ .feature-sheet { order:-1; min-height:auto; padding:28px; } .feature-sheet img { max-height:360px; } }
@media (max-width: 560px){ .feature-tag { font-size:10.5px; letter-spacing:.08em; padding:6px 12px; } .feature-copy { gap:12px; } .feature-author img { width:46px; height:46px; } }

/* ═══ Story ═══ */
.story { background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.story-grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:64px; align-items:center; }
@media (max-width: 900px){ .story-grid { grid-template-columns:1fr; } }
.story-copy h2 { font-size: clamp(26px,3.2vw,40px); margin-bottom:18px; }
.story-copy p { color: var(--ink-2); margin-bottom:16px; }
.story-quote { border-left: 3px solid var(--blue); padding: 4px 0 4px 18px; margin: 22px 0; font-style: italic; color: var(--ink); font-weight: 600; font-size: 17px; }
.story-visual { position:relative; }
.story-visual img { border-radius: 22px; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; }
.story-visual .float-card { position:absolute; background: var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 18px; box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:12px; animation: floatY 6s ease-in-out infinite; }
.story-visual .float-card i { width:38px; height:38px; border-radius:10px; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: var(--glow); }
.story-visual .float-card strong { display:block; font-size:14px; } .story-visual .float-card span { font-size:12px; color: var(--ink-3); }
.story-visual .fc-1 { left:-24px; bottom:34px; } .story-visual .fc-2 { right:-18px; top:30px; animation-delay:-3s; }
@media (max-width: 600px){ .story-visual .fc-1 { left:10px; } .story-visual .fc-2 { right:10px; } }
@keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.timeline { position:relative; padding-left:34px; margin-top: 30px; }
.timeline::before { content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background: linear-gradient(var(--blue), var(--cyan), transparent); }
.tl-item { position:relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content:""; position:absolute; left:-30px; top:6px; width:14px; height:14px; border-radius:50%; background: var(--bg-2); border:3px solid var(--blue); box-shadow: 0 0 0 4px var(--blue-soft), 0 0 14px var(--blue); }
.tl-year { font-family:'Sora'; font-size:12.5px; font-weight:800; color: var(--blue); letter-spacing:.1em; text-transform: uppercase; }
.tl-item h3 { font-size:17px; margin:4px 0 6px; }
.tl-item p { font-size:14.5px; color: var(--ink-2); }

/* ═══ Services (photo cards) ═══ */
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width: 980px){ .svc-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .svc-grid { grid-template-columns: 1fr; } }
.svc-card { display:flex; flex-direction:column; overflow:hidden; border-radius: 22px; }
.svc-img { position:relative; height: 190px; overflow:hidden; }
.svc-img img { width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-img img { transform: scale(1.08); }
.svc-img::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, var(--card) 100%); }
.svc-icon { position:absolute; left:22px; bottom:-2px; z-index:2; width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; font-size:21px; box-shadow: var(--glow); }
.svc-body { padding: 22px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.svc-body h3 { font-size: 19px; }
.svc-body p { color: var(--ink-2); font-size: 14px; flex:1; }
.svc-body ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.svc-body ul li { font-size:13px; color: var(--ink-2); display:flex; gap:9px; align-items:baseline; }
.svc-body ul li i { color: var(--success); font-size:11px; }
.svc-link { color: var(--blue); font-weight:800; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; margin-top:6px; }
.svc-link i { transition: transform .2s; }
.svc-card:hover .svc-link i { transform: translateX(5px); }

/* ═══ GOP strip ═══ */
.gop { background: var(--navy); color:#fff; position:relative; overflow:hidden; }
html.theme-dark .gop { background: #0A1128; }
.gop::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(800px 400px at 15% 0%, rgba(7,152,241,.32), transparent 60%), radial-gradient(600px 400px at 90% 100%, rgba(45,212,255,.18), transparent 60%); }
.gop .sec-head h2, .gop .sec-head { color:#fff; } .gop .sec-head p { color:#AAB7CE; }
.gop-grid { display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; position:relative; z-index:2; }
@media (max-width: 900px){ .gop-grid { grid-template-columns:1fr; } }
.gop-steps { display:flex; flex-direction:column; gap:14px; counter-reset: g; }
.gop-step { display:flex; gap:18px; align-items:flex-start; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px 20px; transition: all .3s; }
.gop-step:hover { background: rgba(7,152,241,.12); border-color: rgba(56,182,255,.5); transform: translateX(6px); }
.gop-step .n { counter-increment: g; flex-shrink:0; width:42px; height:42px; border-radius:12px; background: linear-gradient(135deg,var(--blue),var(--cyan)); color:#04070F; font-family:'Sora'; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow: var(--glow); }
.gop-step .n::before { content: counter(g); }
.gop-step h3 { color:#fff; font-size:15.5px; margin-bottom:3px; }
.gop-step p { color:#AAB7CE; font-size:13.5px; }
.gop-time { display:inline-block; margin-left:auto; font-family:'Sora'; font-size:12px; font-weight:800; color: var(--cyan); white-space:nowrap; }
.gop-visual { position:relative; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.12); min-height: 380px; background: url('/assets/img/gop-docs.jpg') center/cover; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.gop-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,11,24,.1), rgba(7,11,24,.85)); }
.gop-visual .gv-copy { position:absolute; left:28px; right:28px; bottom:28px; z-index:2; }
.gop-visual .gv-big { font-family:'Sora'; font-size:52px; font-weight:800; line-height:1; color:#fff; text-shadow: 0 0 30px rgba(56,182,255,.6); }
.gop-visual .gv-big small { font-size:18px; color: var(--cyan); }
.gop-visual .gv-label { color:#C9D4E8; font-size:13.5px; margin-top:6px; }
.gop-pill { position:absolute; top:24px; left:24px; z-index:2; background: rgba(7,11,24,.7); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px 16px; font-size:12px; font-weight:800; color:#fff; letter-spacing:.06em; display:flex; align-items:center; gap:8px; }
.gop-pill .dot { width:8px; height:8px; border-radius:50%; background:#2EC48A; animation: livePulse 1.8s infinite; }

/* ═══ Beyond borders — orbit map ═══ */
.borders { background: var(--bg); overflow:hidden; }
.borders-grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
@media (max-width: 980px){ .borders-grid { grid-template-columns:1fr; } }
.orbit { position:relative; width:100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; }
.orbit .ring { position:absolute; inset:0; border-radius:50%; border:1px dashed var(--blue-border); animation: spin 60s linear infinite; }
.orbit .ring.r2 { inset: 17%; animation-duration: 45s; animation-direction: reverse; }
.orbit .ring.r3 { inset: 34%; animation-duration: 30s; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit .hub { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:118px; height:118px; border-radius:50%; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Sora'; font-weight:800; font-size:15px; box-shadow: var(--glow-lg); z-index:3; }
.orbit .hub small { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-family:'Manrope'; margin-top:2px; }
.orbit .hub::before, .orbit .hub::after { content:""; position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(7,152,241,.5); animation: ripple 3s ease-out infinite; }
.orbit .hub::after { animation-delay: 1.5s; }
@keyframes ripple { 0%{ transform: scale(.8); opacity:1;} 100%{ transform: scale(1.9); opacity:0;} }
.orbit .node { position:absolute; transform: translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2; }
.orbit .node .pin { width:14px; height:14px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 0 4px var(--blue-soft), 0 0 18px var(--cyan); animation: livePulse 2.4s infinite; }
.orbit .node .pin.first { background: var(--gold); box-shadow: 0 0 0 4px rgba(245,179,1,.18), 0 0 18px var(--gold); }
.orbit .node label { font-size:11.5px; font-weight:800; color: var(--ink); background: var(--card); border:1px solid var(--line); padding:4px 10px; border-radius:999px; white-space:nowrap; box-shadow: var(--shadow); }
.orbit .node label small { color: var(--ink-3); font-weight:700; }
.orbit svg.links { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.orbit svg.links line { stroke: var(--blue); stroke-width:1.2; stroke-dasharray: 6 8; opacity:.5; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.borders-copy h2 { font-size: clamp(26px,3.2vw,40px); margin-bottom: 18px; }
.borders-copy p { color: var(--ink-2); margin-bottom: 14px; }
.legend { display:flex; gap:20px; margin-top:20px; font-size:12.5px; color: var(--ink-3); font-weight:700; flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:8px; }
.legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ═══ Cases (city photo cards) ═══ */
.case-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top: 56px; }
@media (max-width: 900px){ .case-grid { grid-template-columns:1fr; } }
.case-card { position:relative; border-radius:22px; overflow:hidden; min-height: 400px; display:flex; flex-direction:column; justify-content:flex-end; padding: 26px; color:#fff; border:1px solid var(--line); transition: transform .35s, box-shadow .35s; isolation:isolate; }
.case-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.case-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.case-card:hover img { transform: scale(1.08); }
.case-card::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(7,11,24,.05) 0%, rgba(7,11,24,.55) 45%, rgba(7,11,24,.96) 100%); }
.case-city { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background: rgba(7,11,24,.55); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom: 14px; }
.case-city i { color: var(--cyan); }
.case-card h3 { color:#fff; font-size:18px; margin-bottom: 8px; }
.case-card p { color:#C9D4E8; font-size:13.5px; }
.case-meta { display:flex; gap:18px; border-top:1px solid rgba(255,255,255,.18); padding-top:14px; margin-top:16px; }
.case-meta div { font-size:10.5px; color:#9FB0CB; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.case-meta strong { display:block; color: var(--cyan); font-family:'Sora'; font-size:15px; letter-spacing:0; text-shadow: 0 0 14px rgba(45,212,255,.5); }

/* ═══ Values ═══ */
.values-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
@media (max-width: 980px){ .values-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .values-grid { grid-template-columns:1fr; } }
.val-card { padding: 30px 26px; text-align:center; }
.val-card .v-icon { width:58px; height:58px; margin: 0 auto 16px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; color: var(--blue); background: var(--blue-soft); border:1px solid var(--blue-border); transition: all .3s; }
.val-card:hover .v-icon { background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow: var(--glow); transform: rotate(-6deg) scale(1.06); }
.val-card h3 { font-size:16px; margin-bottom:8px; }
.val-card p { font-size:13.5px; color: var(--ink-2); }

/* ═══ Testimonials ═══ */
.testi-track { display:grid; grid-template-columns: repeat(2,1fr); gap:26px; }
@media (max-width: 860px){ .testi-track { grid-template-columns:1fr; } }
.testi-card { padding: 34px 32px; display:flex; flex-direction:column; gap:18px; }
.testi-card .quote-mark { position:absolute; top:18px; right:28px; font-size:64px; color: var(--blue-soft); font-family: Georgia, serif; line-height:1; }
html.theme-dark .testi-card .quote-mark { color: rgba(7,152,241,.25); }
.testi-stars { color: var(--gold); font-size:13px; letter-spacing:3px; }
.testi-card blockquote { font-size:15px; color: var(--ink-2); font-style:italic; flex:1; }
.testi-who { display:flex; align-items:center; gap:14px; border-top:1px solid var(--line-2); padding-top:18px; }
.testi-avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; font-weight:800; font-size:15px; font-family:'Sora'; box-shadow: var(--glow); flex-shrink:0; }
.testi-who strong { display:block; font-size:14.5px; } .testi-who span { font-size:12.5px; color: var(--ink-3); }
.testi-city { margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--blue); background: var(--blue-soft); border:1px solid var(--blue-border); padding:5px 10px; border-radius:999px; white-space:nowrap; }

/* ═══ Articles ═══ */
.articles-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width: 900px){ .articles-grid { grid-template-columns:1fr; } }
.art-card { overflow:hidden; display:flex; flex-direction:column; border-radius: 20px; }
.art-cover { height: 190px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:18px; background: var(--hero-grad); }
.art-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.art-card:hover .art-cover img { transform: scale(1.08); }
.art-cover::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(7,11,24,.75) 100%); }
.art-cover > i { position:absolute; top:18px; right:20px; font-size:22px; color:rgba(255,255,255,.9); z-index:2; width:44px; height:44px; border-radius:12px; background: rgba(7,11,24,.45); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.art-tag { position:relative; z-index:2; background: rgba(7,152,241,.28); backdrop-filter: blur(8px); border:1px solid rgba(56,182,255,.6); color:#fff; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; padding:5px 12px; border-radius:999px; }
.art-body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.art-date { font-size:12px; color: var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.art-body h3 { font-size:16.5px; line-height:1.45; }
.art-body h3 a:hover { color: var(--blue); }
.art-body p { font-size:13.5px; color: var(--ink-2); flex:1; }
.art-more { color: var(--blue); font-size:13px; font-weight:800; display:inline-flex; align-items:center; gap:7px; }

/* ═══ Contact ═══ */
.contact { background: var(--bg-2); border-top: 1px solid var(--line-2); }
.contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap:56px; }
@media (max-width: 900px){ .contact-grid { grid-template-columns:1fr; } }
.contact-items { display:flex; flex-direction:column; gap:16px; margin-top:30px; }
.c-item { display:flex; gap:18px; align-items:center; padding:20px 22px; border-radius: 16px; }
.c-item:hover { transform: translateX(6px); }
.c-item .c-icon { width:48px; height:48px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: var(--blue-soft); color: var(--blue); font-size:18px; border:1px solid var(--blue-border); }
.c-item strong { display:block; font-size:14.5px; }
.c-item span, .c-item a.c-val { font-size:14px; color: var(--ink-2); }
.c-item a.c-val:hover { color: var(--blue); }
.contact-form { padding: 38px 36px; }
.contact-form:hover { transform:none; }
.contact-form h3 { font-size:21px; margin-bottom:6px; }
.contact-form > p { color: var(--ink-2); font-size:14px; margin-bottom:24px; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 560px){ .f-row { grid-template-columns:1fr; } }
.f-group { margin-bottom:16px; }
.f-group label { display:block; font-size:12.5px; font-weight:800; letter-spacing:.04em; margin-bottom:7px; color: var(--ink-2); }
.f-group input, .f-group textarea, .f-group select { width:100%; background: var(--bg); border:1.5px solid var(--line); border-radius:11px; padding:13px 15px; font-size:14px; color: var(--ink); font-family:inherit; transition: all .2s; }
.f-group input:focus, .f-group textarea:focus, .f-group select:focus { border-color: var(--blue); outline:none; box-shadow: 0 0 0 4px var(--blue-soft); }
.form-note { font-size:12px; color: var(--ink-3); margin-top:12px; display:flex; gap:8px; align-items:baseline; }

/* ═══ CTA banner ═══ */
.cta-banner { background: var(--hero-grad); border-radius:26px; padding:60px 48px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-lg); }
.cta-banner::before { content:""; position:absolute; inset:0; background: radial-gradient(520px 320px at 85% 30%, rgba(7,152,241,.5), transparent 65%), radial-gradient(400px 260px at 10% 90%, rgba(45,212,255,.25), transparent 65%); }
.cta-banner::after { content:""; position:absolute; inset:0; background: url('/assets/img/dubai-twilight.jpg') center/cover; opacity:.14; mix-blend-mode: screen; }
.cta-banner > * { position:relative; z-index:2; }
.cta-banner h2 { color:#fff; font-size: clamp(24px,3vw,34px); }
.cta-banner p { color:#C9D4E8; margin-top:10px; }
.cta-banner .btn { flex-shrink:0; }
@media (max-width: 800px){ .cta-banner { flex-direction:column; text-align:center; } }

/* ═══ Footer ═══ */
footer { background: var(--navy); color:#AAB7CE; padding:70px 0 0; font-size:14px; position:relative; overflow:hidden; }
html.theme-dark footer { background:#04070F; }
footer::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(700px 300px at 0% 0%, rgba(7,152,241,.18), transparent 60%); }
footer .wrap { position:relative; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:50px; }
@media (max-width: 900px){ .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .foot-grid { grid-template-columns:1fr; } }
footer .f-brand img { height:44px; margin-bottom:18px; }
footer h4 { color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:20px; }
footer ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
footer ul a { color:#AAB7CE; transition: color .2s; font-size:13.5px; }
footer ul a:hover { color: var(--cyan); }
.f-social { display:flex; gap:10px; margin-top:20px; }
.f-social a { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); color:#fff; transition: all .2s; }
.f-social a:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--glow); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.08); padding:22px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12.5px; color:#7E88A6; }

.wa-float { position:fixed; bottom:26px; right:26px; z-index:150; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(37,211,102,.45); transition: transform .25s; }
.wa-float::before { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(37,211,102,.6); animation: ripple 2.4s ease-out infinite; }
.wa-float:hover { transform: scale(1.1); }
#backTop { position:fixed; bottom:96px; right:33px; z-index:140; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background: var(--card); color: var(--ink-2); cursor:pointer; font-size:14px; opacity:0; visibility:hidden; transition: all .3s; }
#backTop.show { opacity:1; visibility:visible; }
#backTop:hover { color: var(--blue); border-color: var(--blue); }

/* ═══ Inner page hero (with cover photo) ═══ */
.page-hero { position:relative; color:#fff; padding: 84px 0 70px; overflow:hidden; background: var(--hero-grad); isolation:isolate; }
.page-hero .ph-bg { position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; transform: scale(1.04); }
.page-hero .ph-bg::after { content:""; position:absolute; inset:0; background: var(--overlay); }
.page-hero .hero-orbs { z-index:-1; }
.page-hero .wrap { position:relative; z-index:2; }
.breadcrumbs { font-size:13px; color:#9FB0CB; margin-bottom:20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-weight:600; }
.breadcrumbs a { color:#C9D4E8; } .breadcrumbs a:hover { color: var(--cyan); }
.breadcrumbs i { font-size:10px; }
.page-hero h1 { color:#fff; font-size: clamp(28px,4vw,46px); max-width:820px; letter-spacing:-.015em; text-shadow: 0 6px 40px rgba(0,0,0,.4); }
.page-hero .lede { margin-top:18px; color:#C9D4E8; font-size:17px; max-width:680px; }
.page-hero .meta-row { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; font-size:13px; color:#9FB0CB; font-weight:700; }
.page-hero .meta-row i { color: var(--cyan); margin-right:7px; }

.svc-layout { display:grid; grid-template-columns: 1fr 340px; gap:56px; padding:76px 0; }
@media (max-width: 980px){ .svc-layout { grid-template-columns:1fr; } }
.prose h2 { font-size:26px; margin:44px 0 16px; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:19px; margin:30px 0 12px; }
.prose p { color: var(--ink-2); margin-bottom:16px; font-size:15.5px; }
.prose ul, .prose ol { margin:0 0 18px 22px; color: var(--ink-2); display:flex; flex-direction:column; gap:8px; font-size:15px; }
.prose a { color: var(--blue); font-weight:700; } .prose a:hover { text-decoration:underline; }
.prose blockquote { border-left:3px solid var(--blue); background: var(--blue-soft); padding:18px 22px; border-radius:0 12px 12px 0; margin:22px 0; color: var(--ink); }
.prose blockquote p { margin:0; color:inherit; }
.prose hr { border:none; border-top:1px solid var(--line); margin:34px 0; }
.prose img { border-radius:16px; margin:24px 0; width:100%; box-shadow: var(--shadow); }
.prose figure { margin:26px 0; } .prose figcaption { font-size:12.5px; color: var(--ink-3); margin-top:-14px; text-align:center; }
.prose strong { color: var(--ink); }
.prose table { width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
.prose th, .prose td { border:1px solid var(--line); padding:10px 14px; text-align:left; color: var(--ink-2); }
.prose th { background: var(--bg-3); color: var(--ink); font-family:'Sora'; font-size:13px; }
.prose .callout { display:flex; gap:16px; background: var(--card-grad), var(--card); border:1px solid var(--blue-border); border-radius:16px; padding:20px 22px; margin:26px 0; box-shadow: var(--shadow); }
.prose .callout i { color: var(--blue); font-size:20px; margin-top:3px; }
.prose .callout p { margin:0; font-size:14.5px; }
.prose .stat-row { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin:26px 0; }
@media (max-width: 600px){ .prose .stat-row { grid-template-columns:1fr; } }
.prose .stat-row div { background: var(--card-grad), var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; }
.prose .stat-row strong { display:block; font-family:'Sora'; font-size:26px; color: var(--blue); }
.prose .stat-row span { font-size:12px; color: var(--ink-3); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }

.side-sticky { position:sticky; top:110px; display:flex; flex-direction:column; gap:22px; }
.side-card { background: var(--card-grad), var(--card); border:1px solid var(--line); border-radius:18px; padding:28px 26px; }
.side-card h3 { font-size:16px; margin-bottom:16px; }
.side-card ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.side-card ul a { font-size:13.5px; color: var(--ink-2); display:flex; gap:10px; align-items:baseline; }
.side-card ul a:hover { color: var(--blue); }
.side-card ul i { color: var(--blue); font-size:11px; }
.side-cta { background: var(--hero-grad); color:#fff; text-align:center; position:relative; overflow:hidden; border-color: rgba(255,255,255,.1); }
.side-cta::before { content:""; position:absolute; inset:0; background: radial-gradient(300px 200px at 80% 0%, rgba(7,152,241,.5), transparent 60%); }
.side-cta > * { position:relative; }
.side-cta h3 { color:#fff; } .side-cta p { color:#C9D4E8; font-size:13.5px; margin-bottom:18px; }
.side-photo { padding: 12px; }
.side-photo img { border-radius:12px; aspect-ratio: 4/3; object-fit:cover; }
.side-photo figcaption { font-size:12px; color: var(--ink-3); margin: 10px 8px 4px; }

.steps { counter-reset: step; display:flex; flex-direction:column; gap:16px; margin:24px 0; }
.step { display:flex; gap:20px; background: var(--card-grad), var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; transition: all .25s; }
.step:hover { border-color: var(--blue-border); box-shadow: var(--shadow); transform: translateX(4px); }
.step-n { counter-increment: step; flex-shrink:0; width:44px; height:44px; border-radius:12px; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:800; font-size:17px; box-shadow: var(--glow); }
.step-n::before { content: counter(step); }
.step h3 { font-size:16.5px; margin-bottom:5px; }
.step p { font-size:14px; color: var(--ink-2); margin:0; }

.faq { display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.faq details { background: var(--card-grad), var(--card); border:1px solid var(--line); border-radius:14px; padding:0 24px; overflow:hidden; transition: border-color .2s; }
.faq details[open] { border-color: var(--blue-border); box-shadow: var(--shadow); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 0; font-weight:800; font-size:15px; font-family:'Sora'; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary i { color: var(--blue); transition: transform .25s; flex-shrink:0; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); font-size:14.5px; padding-bottom:20px; }

/* service page photo strip */
.svc-gallery { display:grid; grid-template-columns: 2fr 1fr; gap:14px; margin: 8px 0 34px; }
@media (max-width: 640px){ .svc-gallery { grid-template-columns:1fr; } }
.svc-gallery img { border-radius:16px; width:100%; height:260px; object-fit:cover; box-shadow: var(--shadow); }

/* ═══ Blog listing ═══ */
.blog-list { padding:76px 0; }
.blog-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width: 980px){ .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid { grid-template-columns:1fr; } }
.blog-featured { display:grid; grid-template-columns: 1.3fr 1fr; border-radius:24px; overflow:hidden; margin-bottom:40px; min-height: 360px; }
@media (max-width: 860px){ .blog-featured { grid-template-columns:1fr; } }
.blog-featured .bf-img { position:relative; min-height: 260px; }
.blog-featured .bf-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: left center; }
.blog-featured .bf-copy { padding: 40px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.blog-featured .bf-copy h2 { font-size: clamp(20px,2.4vw,28px); }
.blog-featured .bf-copy p { color: var(--ink-2); font-size:14.5px; }

/* ═══ Article page ═══ */
.article-layout { display:grid; grid-template-columns: 1fr 320px; gap:56px; padding:70px 0; }
@media (max-width: 980px){ .article-layout { grid-template-columns:1fr; } }
.article-body { max-width:760px; }
.share-row { display:flex; gap:10px; align-items:center; margin-top:40px; border-top:1px solid var(--line); padding-top:24px; }
.share-row span { font-size:13px; font-weight:800; color: var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin-right:6px; }
.share-row a { width:38px; height:38px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--ink-2); transition: all .2s; }
.share-row a:hover { background: var(--blue); border-color: var(--blue); color:#fff; box-shadow: var(--glow); }

/* ═══ Magazine tear sheet (inside articles) ═══ */
.tearsheet { margin: 30px 0 34px; }
.tearsheet a { display:block; position:relative; border-radius:14px; overflow:hidden; background: var(--hero-grad); padding: 26px; box-shadow: var(--shadow-lg); border:1px solid var(--line); }
.tearsheet a::before { content:""; position:absolute; inset:0; background: radial-gradient(420px 260px at 80% 10%, rgba(7,152,241,.34), transparent 62%); }
.tearsheet img { position:relative; z-index:2; margin:0; border-radius:4px; box-shadow: 0 18px 46px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tearsheet a:hover img { transform: scale(1.02); }
.tearsheet .zoom-hint { position:absolute; z-index:3; right:22px; bottom:22px; background: rgba(7,11,24,.76); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border-radius:999px; display:flex; align-items:center; gap:8px; }
.tearsheet .zoom-hint i { color: var(--cyan); }
.tearsheet figcaption { font-size:12.5px; color: var(--ink-3); margin-top:12px; text-align:center; }

/* author box */
.author-box { display:flex; gap:20px; align-items:flex-start; background: var(--card-grad), var(--card); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:16px; padding:24px 26px; margin:30px 0; box-shadow: var(--shadow); }
.author-box img { width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0; margin:0; border:2px solid var(--blue-border); box-shadow:none; }
.author-box h4 { font-size:16px; margin-bottom:2px; }
.author-box .role { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--blue); margin-bottom:9px; }
.author-box p { font-size:14px; margin:0; color: var(--ink-2); }
@media (max-width: 560px){ .author-box { flex-direction:column; } }

/* world reach strip */
.reach-strip { text-align:center; margin: 34px 0; padding: 26px; background: var(--card-grad), var(--card); border:1px solid var(--line); border-radius:18px; }
.reach-strip img { margin: 0 auto 14px; max-width: 620px; box-shadow:none; }
.reach-strip p { font-size:14px; color: var(--ink-2); margin:0; }

/* lightbox */
#lightbox { position:fixed; inset:0; z-index:400; background: rgba(4,7,15,.94); backdrop-filter: blur(6px); display:none; align-items:center; justify-content:center; padding:24px; cursor: zoom-out; }
#lightbox.open { display:flex; }
#lightbox img { max-width:100%; max-height:92vh; border-radius:6px; box-shadow: 0 30px 90px rgba(0,0,0,.7); object-fit:contain; }
#lightbox .lb-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:18px; cursor:pointer; }
#lightbox .lb-close:hover { background: var(--blue); border-color: var(--blue); }

@media (max-width: 640px){
    section { padding: 70px 0; }
    .hero .wrap { padding-top: 64px; }
    .cta-banner { padding: 44px 28px; }
    .feature-copy { padding: 28px 24px; }
    .ambient span { filter: blur(50px); }
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}