/* Sorouh Digital: shared public design system. RTL uses logical properties. */
:root {
  color-scheme: dark;
  --bg:#080a0d; --bg2:#0e1116; --card:#12161d;
  --text:#f4f1e9; --muted:#a7adb7; --gold:#d7ad58; --gold2:#f3d695;
  --blue:#639edb; --line:rgba(222,229,242,.11); --radius:24px;
  --shadow:0 24px 64px rgba(0,0,0,.26);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --section-space:clamp(64px,7vw,104px);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Noto Kufi Arabic",sans-serif; font-size:16px; line-height:1.8; overflow-wrap:break-word; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2,h3,h4 { line-height:1.3; font-weight:800; text-wrap:balance; }
p { text-wrap:pretty; }
a { color:inherit; text-decoration:none; transition:color .18s ease; }
a:hover { color:var(--gold2); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; color:inherit; }
button { appearance:none; }
img { display:block; width:100%; max-width:100%; height:auto; object-fit:cover; }
svg { width:24px; height:24px; flex-shrink:0; }
input,select,textarea { min-width:0; max-width:100%; }
textarea { resize:vertical; }
:focus-visible { outline:2px solid var(--gold2); outline-offset:5px; }
::selection { background:var(--gold); color:var(--bg); }
.container { width:100%; max-width:1360px; padding-inline:clamp(20px,4vw,48px); margin-inline:auto; }
.section-pad { padding-block:var(--section-space); }
section[id] { scroll-margin-top:96px; }
:where(.hero-grid,.feature-grid,.contact-grid,.services-grid,.portfolio-grid,.process-grid,.articles-grid,.footer-grid,.service-hero-grid,.service-detail-grid)>* { min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--gold2); }
.dot { width:6px; height:6px; background:var(--gold); border-radius:50%; box-shadow:0 0 0 5px rgba(215,173,88,.1); }
.gold-text { color:var(--gold2); background:linear-gradient(110deg,#f4deb0,#c99a45); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.muted { color:var(--muted); }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:46px; padding:10px 18px; border:1px solid var(--line); border-radius:10px; font-weight:700; font-size:14px; line-height:1.5; text-align:center; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.btn svg { width:18px; height:18px; }
.btn-gold { background:linear-gradient(120deg,#f0d18d,#d3a649); color:#17130b; border-color:transparent; box-shadow:0 8px 24px rgba(215,173,88,.12); }
.btn-gold:hover { color:#17130b; transform:translateY(-2px); background:var(--gold2); }
.btn-ghost { background:rgba(255,255,255,.025); color:var(--text); }
.btn-ghost:hover { background:rgba(215,173,88,.06); border-color:rgba(215,173,88,.4); }
.btn-lg { min-height:54px; padding:14px 22px; font-size:16px; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--gold2); font-size:14px; font-weight:700; }
.text-link svg { width:18px; }
.skip-link { position:fixed; top:12px; inset-inline-start:20px; z-index:100; padding:12px 20px; background:var(--gold2); color:var(--bg); border-radius:10px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
/* Navigation */
.site-header { position:sticky; top:0; z-index:50; background:rgba(8,10,13,.96); border-bottom:1px solid var(--line); }
.site-header.scrolled { box-shadow:0 8px 24px rgba(0,0,0,.16); }
.nav-wrap { min-height:88px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img { width:48px; height:48px; border-radius:12px; object-fit:contain; }
.brand span { display:grid; gap:5px; line-height:1.2; }
.brand strong { font-size:18px; }
.brand small { font-size:10px; color:var(--gold); direction:ltr; }
.main-nav { display:flex; gap:24px; font-size:14px; color:#bdc2cb; }
.main-nav a { white-space:nowrap; }
.nav-actions { display:flex; align-items:center; gap:8px; }
.menu-btn { display:none; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg2); }
/* Hero: source order is Arabic copy first, visual second. */
.hero { position:relative; padding-block:clamp(60px,6vw,88px); background:radial-gradient(ellipse at 16% 36%,rgba(72,122,175,.1),transparent 45%),radial-gradient(ellipse at 88% 12%,rgba(215,173,88,.055),transparent 45%); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1 { font-size:clamp(42px,4.7vw,68px); line-height:1.23; margin-block:22px; max-width:650px; }
.hero-copy>p { font-size:clamp(17px,1.45vw,19px); color:#aeb5c0; max-width:590px; line-height:1.95; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-block:28px; }
.trust-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; border-top:1px solid var(--line); padding-top:24px; margin-top:32px; }
.trust-row div { display:grid; gap:4px; }
.trust-row strong { font-size:15px; }
.trust-row span { color:var(--muted); font-size:12px; }
.hero-visual { position:relative; padding-block:24px 38px; isolation:isolate; }
.photo-frame { overflow:hidden; border:1px solid rgba(215,173,88,.2); border-radius:var(--radius); position:relative; box-shadow:var(--shadow); }
.hero-photo { aspect-ratio:1.08; }
.photo-frame img { width:100%; height:100%; object-fit:cover; }
.hero-photo img { object-position:52% center; }
.photo-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,13,.5),transparent 60%); pointer-events:none; }
.hero-visual::before { content:""; position:absolute; inset:0 16px 18px; border:1px solid rgba(215,173,88,.12); border-radius:32px; z-index:-1; transform:rotate(-4deg); }
.floating-card { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid rgba(225,228,239,.15); background:#11161e; border-radius:14px; box-shadow:0 12px 36px rgba(0,0,0,.24); max-width:calc(100% - 24px); }
.floating-card b,.floating-card small { display:block; }
.floating-card b { font-size:14px; }
.floating-card small { color:var(--muted); font-size:12px; }
.card-a { bottom:12px; inset-inline-start:18px; }
.card-b { top:8px; inset-inline-end:16px; }
.iconbox { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:var(--gold2); background:rgba(215,173,88,.1); }
.status-dot { width:8px; height:8px; background:#85c8a1; border-radius:50%; flex-shrink:0; }
.orb { display:none; }
.logos-strip { border-block:1px solid var(--line); background:#0c0f13; }
.strip-content { padding-block:24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.strip-content>span { font-size:13px; color:var(--muted); }
.strip-items { display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,40px); color:#c5c9d1; font-size:14px; }
/* Sections and cards */
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:40px; }
.section-head h2 { font-size:clamp(30px,3.3vw,46px); margin-top:12px; }
.section-head>p { color:var(--muted); max-width:400px; font-size:16px; }
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-card { display:flex; flex-direction:column; position:relative; padding:28px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#141820,#0e1116); transition:border-color .2s ease,transform .2s ease; }
.service-card:hover,.service-card.motion-ready.is-visible:hover { border-color:rgba(215,173,88,.4); transform:translateY(-4px); }
.service-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; color:var(--gold2); background:rgba(215,173,88,.07); border:1px solid rgba(215,173,88,.1); margin-bottom:28px; }
.service-num { position:absolute; top:30px; inset-inline-end:28px; font-size:13px; color:#737d8c; direction:ltr; }
.service-card h3 { font-size:21px; margin-bottom:12px; }
.service-card p { color:var(--muted); font-size:14px; margin-bottom:22px; flex:1; }
.service-card a { display:inline-flex; align-items:center; gap:8px; color:var(--gold2); font-size:13px; font-weight:700; align-self:flex-start; }
.service-card a svg { width:16px; height:16px; }
.feature-section { background:var(--bg2); border-block:1px solid var(--line); }
.feature-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,6vw,80px); align-items:center; }
.feature-media { position:relative; aspect-ratio:1.05; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); }
.feature-media>img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.feature-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,13,.66),transparent 60%); }
.metric-card { position:absolute; z-index:2; bottom:24px; inset-inline-start:24px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:rgba(8,10,13,.9); max-width:calc(100% - 48px); }
.metric-card span,.metric-card strong { display:block; }
.metric-card span { font-size:12px; color:var(--muted); }
.metric-card strong { font-size:18px; }
.feature-copy h2,.contact-copy h2 { font-size:clamp(30px,3.3vw,46px); margin-block:16px 20px; }
.feature-copy>p,.contact-copy>p { color:var(--muted); font-size:17px; }
.feature-list { display:grid; gap:20px; margin-top:28px; }
.feature-list>div { display:flex; gap:14px; align-items:flex-start; }
.feature-list svg { color:var(--gold); width:22px; margin-top:3px; }
.feature-list b,.feature-list small { display:block; }
.feature-list small { color:var(--muted); margin-top:4px; font-size:13px; }
.showcase-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:20px; }
.showcase-main { aspect-ratio:1.8; position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); }
.showcase-main>img { width:100%; height:100%; object-fit:cover; }
.showcase-main::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,13,.85),transparent 75%); }
.caption { position:absolute; z-index:2; bottom:24px; inset-inline-start:24px; padding-inline-end:24px; }
.caption span,.caption b { display:block; }
.caption span { color:var(--gold2); font-size:13px; }
.caption b { font-size:23px; }
.showcase-side { display:grid; gap:16px; }
.side-card { padding:24px; border:1px solid var(--line); background:var(--card); border-radius:18px; display:grid; align-content:center; gap:10px; }
.side-card svg { color:var(--gold); }
.side-card b { font-size:21px; }
.side-card span { color:var(--muted); font-size:14px; }
.side-card.accent { background:linear-gradient(135deg,#182331,#12161d); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.portfolio-card { overflow:hidden; border:1px solid var(--line); background:var(--bg2); border-radius:18px; }
.portfolio-copy { padding:24px; }
.portfolio-copy>span { color:var(--gold2); font-size:12px; }
.portfolio-copy h3 { font-size:21px; margin-block:8px 10px; }
.portfolio-copy p { color:var(--muted); font-size:14px; margin-bottom:16px; }
.mockup { aspect-ratio:1.5; padding:22px; display:grid; align-items:center; background:radial-gradient(ellipse at 80% 20%,rgba(215,173,88,.12),transparent 70%),#111821; border-bottom:1px solid var(--line); }
.mockup-blue { background:radial-gradient(ellipse at 70% 30%,rgba(99,158,219,.17),transparent 70%),#10171f; }
.mock-window { width:100%; padding:12px; border:1px solid #38414d; border-radius:9px; background:#0c1016; box-shadow:0 12px 24px #0004; }
.mock-chrome { display:flex; gap:4px; padding-bottom:12px; border-bottom:1px solid #252c35; }
.mock-chrome i { display:block; width:4px; height:4px; border-radius:50%; background:#78808b; }
.mock-content { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:12px; padding-top:16px; }
.mock-lines { display:grid; gap:7px; }
.mock-lines i { display:block; width:100%; height:4px; background:#3b4656; border-radius:3px; }
.mock-lines i:first-child { width:70%; height:7px; background:#d7ad58; }
.mock-lines i:last-child { width:45%; height:12px; margin-top:5px; background:#a18142; }
.mock-tile { aspect-ratio:1.2; border:1px solid #435167; border-radius:7px; background:linear-gradient(145deg,#344b66,#17212e); }
.mock-dashboard { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-top:12px; }
.mock-dashboard i { height:30px; border:1px solid #304154; border-radius:4px; background:#182737; }
.mock-bars { display:flex; gap:8px; align-items:flex-end; height:56px; padding-top:12px; }
.mock-bars i { width:18%; height:40%; background:#6a96c5; border-radius:3px 3px 0 0; }
.mock-bars i:nth-child(2) { height:65%; }.mock-bars i:nth-child(3) { height:55%; }.mock-bars i:nth-child(4) { height:90%; }.mock-bars i:nth-child(5) { height:75%; }
.centered { display:block; text-align:center; max-width:760px; margin-inline:auto; }
.centered p { margin:16px auto 0; }
.process { background:#0d1015; border-block:1px solid var(--line); }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.process-card { padding:24px; border-top:1px solid rgba(215,173,88,.35); background:linear-gradient(180deg,#151920,transparent); border-radius:0 0 12px 12px; }
.process-card>span { color:var(--gold2); font-size:14px; font-weight:700; direction:ltr; display:inline-block; }
.process-card h3 { font-size:23px; margin-block:24px 12px; }
.process-card p { font-size:14px; color:var(--muted); }
.stats-band { padding-block:44px; border-bottom:1px solid var(--line); }
.home-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; }
.home-stats>div { padding:12px 24px; border-inline-end:1px solid var(--line); }
.home-stats>div:last-child { border:0; }
.home-stats strong { display:block; color:var(--gold2); font-size:44px; line-height:1.2; direction:ltr; }
.home-stats span { display:block; margin-top:10px; font-size:15px; }.home-stats small { color:var(--muted); font-size:12px; }
.articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.article-img { display:block; aspect-ratio:1.6; border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-bottom:18px; }
.article-img img { width:100%; height:100%; object-fit:cover; }
.article-card>span { font-size:12px; color:var(--gold); }.article-card h3,.article-card h2 { font-size:21px; line-height:1.5; margin-block:10px 16px; }.article-card p { font-size:14px; color:var(--muted); margin-bottom:16px; }.article-card>a:last-child { color:var(--gold2); font-size:13px; }
.article-placeholder { display:grid; place-items:center; height:100%; background:radial-gradient(circle at 70% 20%,#27313e,transparent 70%),#10151d; color:var(--gold2); font-weight:700; direction:ltr; }
.empty-public { grid-column:1/-1; text-align:center; padding:48px 24px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--bg2); }
.empty-public p { color:var(--muted); margin-block:12px 20px; }
.cta-band { padding-block:48px; background:radial-gradient(ellipse at 80% 30%,rgba(215,173,88,.13),transparent 65%),#12161b; border-block:1px solid rgba(215,173,88,.2); }
.cta-band>.container { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.cta-band span { color:var(--gold2); font-size:13px; }.cta-band h2 { font-size:clamp(26px,3vw,36px); margin-top:10px; }.cta-band .btn { flex-shrink:0; }
/* Contact and shared form controls */
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.contact-direct { display:grid; gap:12px; margin-top:28px; }
.contact-direct a { display:flex; align-items:center; gap:14px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:var(--bg2); }.contact-direct svg { color:var(--gold); }.contact-direct small,.contact-direct b { display:block; }.contact-direct small { font-size:12px; color:var(--muted); }.contact-direct b { direction:ltr; text-align:start; }
.contact-form { position:relative; padding:32px; background:#11151c; border:1px solid var(--line); border-radius:var(--radius); }
.contact-form label { display:grid; gap:8px; margin-bottom:18px; font-size:14px; color:#d5dae2; }
.field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.contact-form input,.contact-form select,.contact-form textarea,.login-form input { width:100%; padding:12px 14px; border:1px solid #2b3440; background:#0b0f15; color:var(--text); border-radius:10px; outline:none; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus,.login-form input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(215,173,88,.08); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#727e8e; }
.contact-form button { width:100%; }.contact-form .consent { display:flex; align-items:flex-start; gap:10px; font-size:12px; }.consent input { width:18px; height:18px; flex:none; margin:3px 0 0; accent-color:var(--gold); }.consent a,.form-note a,.legal-content a { color:var(--gold2); text-decoration:underline; text-underline-offset:4px; }
.form-note { display:block; text-align:center; font-size:12px; color:var(--muted); margin-top:14px; }
.honeypot { position:absolute!important; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.alert { padding:14px; margin-bottom:20px; border:1px solid; border-radius:10px; font-size:14px; }.alert.success { color:#a1dfb9; background:#11251b; border-color:#28543b; }.alert.error { color:#f0b0b0; background:#291718; border-color:#673034; }
/* Footer */
.site-footer { padding-block:64px 24px; border-top:1px solid var(--line); background:#080b0f; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,minmax(0,1fr)); gap:40px; }.footer-grid>div { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }.footer-logo { width:72px; height:72px; object-fit:contain; border-radius:14px; }.footer-grid p { max-width:300px; color:var(--muted); font-size:14px; margin-top:8px; }.footer-grid h4 { font-size:16px; margin-bottom:10px; }.footer-grid a,.footer-grid span { color:#aab3c0; font-size:13px; }.footer-grid a:hover { color:var(--gold2); }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:#8a94a3; font-size:12px; }
/* Existing service, blog, legal and error surfaces */
.page-hero,.service-hero,.article-hero { background:radial-gradient(ellipse at 80% 20%,rgba(215,173,88,.08),transparent 70%),var(--bg2); }
.narrow,.article-narrow { max-width:960px; }.page-hero h1,.service-hero h1,.article-hero h1 { font-size:clamp(36px,5vw,64px); margin-block:18px 24px; }.page-hero p,.service-hero p,.article-hero p { font-size:18px; color:var(--muted); max-width:780px; }.page-hero .btn { margin-top:24px; }
.service-hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center; }.service-orb { position:relative; display:grid; place-items:center; aspect-ratio:1.1; border-radius:var(--radius); border:1px solid var(--line); background:radial-gradient(circle,rgba(215,173,88,.13),transparent 65%),#131820; overflow:hidden; }.service-orb::before { content:""; position:absolute; width:70%; aspect-ratio:1; border:1px solid rgba(215,173,88,.25); border-radius:50%; }.service-orb svg { width:90px; height:90px; color:var(--gold); }.service-orb span { position:absolute; bottom:28px; color:var(--muted); font-size:11px; letter-spacing:3px; direction:ltr; }
.service-detail-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; }.service-detail-grid h2 { font-size:clamp(30px,3vw,42px); margin-block:16px 20px; }.service-detail-grid p { color:var(--muted); }.deliverables { display:grid; gap:12px; }.deliverables>div { display:grid; grid-template-columns:32px minmax(0,1fr) 24px; gap:12px; align-items:center; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--bg2); }.deliverables span { color:var(--gold2); }.deliverables svg { color:#85c8a1; }
.legal-content h2 { font-size:26px; margin-block:32px 16px; }.legal-content h2:first-child { margin-top:0; }.legal-content p { color:var(--muted); }
.article-page { padding-bottom:80px; }.article-meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; color:var(--muted); font-size:13px; }.article-cover { padding-top:32px; }.article-cover img { aspect-ratio:1.8; object-fit:cover; border-radius:var(--radius); }.article-content { padding-top:48px; color:#d1d7df; font-size:18px; line-height:2; overflow-wrap:anywhere; }.article-content h2,.article-content h3,.article-content h4 { margin-block:32px 16px; color:var(--text); }.article-content h2 { font-size:32px; }.article-content h3 { font-size:25px; }.article-content p { margin-block:18px; }.article-content a { color:var(--gold2); text-decoration:underline; }.article-content img { border-radius:14px; height:auto; max-height:640px; object-fit:contain; }.article-content ul,.article-content ol { padding-inline-start:24px; }.article-content pre { overflow:auto; max-width:100%; direction:ltr; }.article-content table { display:block; width:100%; overflow:auto; }.article-content blockquote { margin-inline:0; padding-inline-start:20px; border-inline-start:3px solid var(--gold); color:var(--muted); }.article-cta { margin-top:56px; padding-block:32px; border-block:1px solid rgba(215,173,88,.2); }.article-cta span { color:var(--gold2); }.article-cta h2 { font-size:32px; margin-block:12px 24px; }
.login-shell { padding:64px 20px; display:grid; place-items:center; background:var(--bg2); }.login-card { width:100%; max-width:460px; padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }.login-card>img { width:64px; height:64px; object-fit:contain; margin-bottom:24px; border-radius:14px; }.login-card h1 { font-size:28px; margin-block:12px; }.login-card p { color:var(--muted); font-size:14px; }.login-form { display:grid; gap:18px; margin-top:24px; }.login-form label { display:grid; gap:8px; font-size:14px; }.back-link { display:block; text-align:center; margin-top:24px; color:var(--muted); font-size:13px; }
/* Reveal is opt-in: no JS means fully visible content. Only opacity/transform animate. */
.reveal { opacity:1; transform:none; }
.reveal.motion-ready { opacity:0; transform:translateY(18px); transition:opacity .5s ease,transform .5s ease; transition-delay:var(--delay,0ms); }
.reveal.motion-ready.is-visible { opacity:1; transform:none; }.delay-1 { --delay:80ms; }.delay-2 { --delay:160ms; }
@media (max-width:1199px) {
  .main-nav { gap:16px; }.nav-actions .btn-ghost { display:none; }
  .hero-grid { gap:32px; }.hero h1 { font-size:clamp(42px,4.6vw,58px); }
}
@media (max-width:1050px) {
  .main-nav { display:none; }.menu-btn { display:inline-flex; }
  .main-nav.open { display:flex; position:absolute; top:calc(100% + 8px); inset-inline:24px; padding:24px; border:1px solid var(--line); background:#11161e; border-radius:14px; flex-direction:column; box-shadow:var(--shadow); }
  .hero-actions .btn-lg { font-size:14px; padding-inline:16px; }
  .trust-row { gap:8px; }.trust-row span { font-size:11px; }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.service-card { padding:24px; }
  .showcase-grid { grid-template-columns:1.3fr .7fr; }.showcase-main { aspect-ratio:1.25; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-grid { gap:14px; }.portfolio-copy { padding:18px; }.mockup { padding:14px; }
  .feature-grid,.contact-grid,.service-hero-grid,.service-detail-grid { gap:32px; }
  .footer-grid { gap:24px; }
}
@media (max-width:800px) {
  .hero-grid,.feature-grid,.contact-grid,.service-hero-grid,.service-detail-grid { grid-template-columns:minmax(0,1fr); }
  .hero { padding-block:48px; }.hero h1 { font-size:clamp(38px,6.5vw,56px); max-width:680px; }.hero-copy>p { max-width:640px; }
  .hero-visual { width:100%; max-width:620px; margin-inline:auto; margin-top:8px; }.hero-photo { aspect-ratio:1.4; }.hero-grid { gap:24px; }
  .trust-row span { font-size:12px; }.feature-media { aspect-ratio:1.45; }.feature-copy { order:-1; }
  .section-head { display:block; }.section-head>p { margin-top:20px; max-width:600px; }.section-head>.text-link { margin-top:20px; }
  .showcase-grid { grid-template-columns:1fr; }.showcase-main { aspect-ratio:1.6; }.showcase-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-grid { grid-template-columns:minmax(0,1fr); gap:20px; }.portfolio-card { display:grid; grid-template-columns:1fr 1fr; }.mockup { aspect-ratio:1.2; border-bottom:0; border-inline-end:1px solid var(--line); padding:24px; }.portfolio-copy { padding:24px; align-self:center; }
  .articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.articles-grid>.article-card:last-child { grid-column:1/-1; max-width:460px; }
  .strip-content { flex-direction:column; align-items:flex-start; gap:14px; }.strip-items { gap:24px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }.cta-band>.container { align-items:flex-start; flex-direction:column; }.service-orb { max-height:380px; aspect-ratio:auto; height:320px; }
}
@media (max-width:520px) {
  .nav-wrap { min-height:76px; gap:10px; }.brand { gap:8px; }.brand img { width:40px; height:40px; }.brand strong { font-size:15px; }.brand small { font-size:9px; }
  .nav-actions { gap:7px; }.nav-actions .btn-gold { padding:10px; }.nav-actions .btn-gold span { font-size:12px; }.menu-btn { padding:9px; }.main-nav.open { inset-inline:20px; }
  .hero h1 { font-size:clamp(35px,9.4vw,46px); margin-block:20px; }.hero-copy>p { font-size:16px; }.hero-actions { flex-direction:column; gap:10px; }.hero-actions .btn { width:100%; }
  .trust-row { gap:12px; padding-top:20px; margin-top:24px; }.trust-row strong { font-size:14px; }.trust-row span { font-size:11px; line-height:1.6; }
  .hero-visual { padding-top:20px; }.hero-photo { aspect-ratio:1.15; border-radius:18px; }.floating-card { padding:11px 12px; gap:9px; }.floating-card b { font-size:12px; }.floating-card small { font-size:10px; }.card-a { inset-inline-start:12px; }.card-b { inset-inline-end:12px; }
  .section-head { margin-bottom:28px; }.section-head h2,.feature-copy h2,.contact-copy h2 { font-size:32px; }.section-head>p { font-size:15px; }
  .services-grid,.articles-grid,.process-grid,.field-row { grid-template-columns:minmax(0,1fr); }.articles-grid>.article-card:last-child { max-width:none; }.service-card { padding:24px; }.service-card h3 { font-size:21px; }
  .feature-media { aspect-ratio:1.2; }.metric-card { inset-inline-start:16px; bottom:16px; padding:12px 16px; }.metric-card strong { font-size:16px; }
  .showcase-side { grid-template-columns:1fr; }.showcase-main { aspect-ratio:1.2; }.caption { inset-inline-start:20px; bottom:20px; }.caption b { font-size:20px; }
  .portfolio-card { display:block; }.mockup { aspect-ratio:1.5; border-inline-end:0; border-bottom:1px solid var(--line); padding:26px; }.portfolio-copy { padding:24px; }
  .process-card { padding:24px; }.process-card h3 { margin-top:18px; }.home-stats>div { padding:8px; }.home-stats strong { font-size:34px; }.home-stats span { font-size:12px; }.home-stats small { font-size:10px; }
  .contact-form { padding:22px; border-radius:18px; }.field-row { gap:0; }.footer-grid { gap:32px 20px; }.footer-grid>div:first-child { grid-column:1/-1; }.footer-bottom { flex-direction:column; gap:8px; margin-top:32px; }
  .article-content { font-size:17px; }.article-cover img { aspect-ratio:1.25; }.article-content h2,.article-cta h2 { font-size:28px; }.deliverables>div { padding:16px; gap:10px; }.deliverables b { font-size:15px; }.login-card { padding:24px; }
}
@media (max-width:380px) { .nav-actions .btn-gold span { display:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }
  .reveal.motion-ready { opacity:1!important; transform:none!important; }
}

/* Contact signature: metallic surfaces, intentional motion, clear mobile actions. */
.site-header.scrolled{box-shadow:0 12px 40px #0005;backdrop-filter:blur(18px)}
.hero{background:radial-gradient(ellipse at 15% 35%,#28456520,transparent 55%),radial-gradient(ellipse at 85% 0%,#d7ad5810,transparent 52%)}
.hero-photo,.feature-media,.showcase-main{box-shadow:0 28px 70px #0006,0 0 0 1px #d7ad5808}
.service-card,.portfolio-card,.side-card,.process-card,.article-img,.contact-form{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.service-card,.portfolio-card,.side-card{box-shadow:0 10px 32px #0002}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.service-card:hover,.portfolio-card:hover,.side-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px #0006,0 0 24px #d7ad5809;border-color:#d7ad5850}.article-img img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}.article-card:hover .article-img img{transform:scale(1.035)}.contact-direct a:hover{transform:translateX(-4px);border-color:#d7ad5860}}
.contact-direct a{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.contact-direct a[data-event="phone_click"]:not(.secondary-contact){border-color:#d7ad5850;background:linear-gradient(120deg,#d7ad5814,#11151c);box-shadow:0 12px 32px #0003}.contact-direct b{font-size:22px;letter-spacing:1px}.contact-direct .secondary-contact b{font-size:18px}.footer-grid .footer-primary-phone{font-size:23px;font-weight:800;color:var(--gold2);letter-spacing:1px}.footer-grid small{color:var(--muted);font-size:11px}
.office-section{position:relative;background:radial-gradient(ellipse at 25% 40%,#639edb0e,transparent 60%)}.office-card{display:grid;grid-template-columns:1fr 1.1fr;overflow:hidden;border:1px solid #d7ad5830;border-radius:28px;background:linear-gradient(135deg,#171b23,#0d1016);box-shadow:0 30px 80px #0005}.office-copy{padding:clamp(28px,4vw,56px);align-self:center}.office-copy h2{font-size:clamp(30px,3.5vw,46px);margin-block:20px}.office-copy>p{color:var(--muted);font-size:15px}.office-number{display:grid;gap:6px;margin-block:26px}.office-number>small{color:var(--gold2);font-size:12px}.office-number>a{justify-self:start;font-size:clamp(25px,3vw,34px);font-weight:800;letter-spacing:2px}.office-number>span{color:var(--muted);font-size:13px}.office-number>span a{display:inline-block}.office-map{position:relative;min-height:420px;background-color:#111a23;background-image:linear-gradient(#639edb0b 1px,transparent 1px),linear-gradient(90deg,#639edb0b 1px,transparent 1px);background-size:36px 36px;overflow:hidden;border-inline-start:1px solid var(--line)}.office-map iframe{width:100%;height:100%;min-height:420px;display:block;border:0}.map-preview{position:relative;min-height:420px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;gap:14px;isolation:isolate}.map-preview>strong{font-size:18px}.map-preview>span,.map-preview>small{font-size:12px;color:var(--muted)}.map-preview .btn{margin-top:16px;font-size:12px}.map-pin-emblem{display:grid;place-items:center;width:90px;height:90px;border-radius:28px;border:1px solid #d7ad5860;background:linear-gradient(140deg,#343022,#191c23);box-shadow:0 15px 50px #0007,0 0 40px #d7ad5810;transform:rotate(-7deg);margin-bottom:12px}.map-pin-emblem svg{width:38px;height:38px;color:var(--gold2);transform:rotate(7deg)}.map-orbits{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;pointer-events:none}.map-orbits span{position:absolute;width:76%;max-width:360px;aspect-ratio:1;border:1px solid #d7ad5815;border-radius:50%;background:radial-gradient(circle,#d7ad5808,transparent 68%)}.map-orbits span:nth-child(2){width:55%;max-width:260px}.map-orbits span:nth-child(3){width:36%;max-width:170px}
.floating-contact{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;z-index:45;align-items:center}.float-action{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:20px;border:1px solid #ffffff25;box-shadow:0 12px 28px #0006;transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}.float-action svg{width:26px;height:26px}.float-action:hover{transform:translateY(-3px);box-shadow:0 16px 36px #0007}.float-call{background:linear-gradient(145deg,#f3d695,#c89842);color:#201908}.float-call:hover{color:#201908}.float-whatsapp{background:linear-gradient(145deg,#29cb76,#128651);color:#fff}.float-whatsapp:hover{color:#fff}.float-label{position:absolute;right:72px;white-space:nowrap;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:#121820;box-shadow:0 8px 24px #0004;color:var(--text);font-size:12px;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.float-action:hover .float-label,.float-action:focus-visible .float-label{opacity:1;transform:none}.floating-phone{position:relative}.floating-phone summary{list-style:none}.floating-phone summary::-webkit-details-marker{display:none}.call-popover{position:absolute;right:0;bottom:74px;width:min(280px,calc(100vw - 40px));padding:18px;border:1px solid #d7ad5840;border-radius:20px;background:#121820;box-shadow:0 24px 60px #0008}.call-popover>.eyebrow{font-size:12px;margin-bottom:12px}.call-popover>a{position:relative;display:grid;gap:4px;padding:12px;border-radius:12px;border:1px solid var(--line);margin-top:8px}.call-popover small{font-size:11px;color:var(--muted)}.call-popover strong{font-size:21px;justify-self:start;letter-spacing:1px}.call-popover .primary-number{background:#d7ad580e;border-color:#d7ad5840;color:var(--gold2)}.call-popover svg{position:absolute;left:12px;top:26px;width:17px}.back-to-top{position:fixed;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:54px;height:54px;display:grid;place-items:center;z-index:45;border-radius:50%;background:#10151eed;color:var(--gold2);box-shadow:0 10px 28px #0005;transition:transform .25s ease,background .25s ease,box-shadow .25s ease;opacity:.7}.back-to-top.is-scrolled{opacity:1;box-shadow:0 12px 32px #0006,0 0 25px #d7ad5810}.back-to-top:hover{transform:translateY(-3px);background:#1a2029}.back-to-top>svg.scroll-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.scroll-ring circle{fill:none;stroke-width:2}.ring-track{stroke:#ffffff16}.ring-progress{stroke:var(--gold2);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}.back-to-top>svg:not(.scroll-ring){width:20px;height:20px}.site-footer{padding-bottom:112px}
@media(max-width:800px){.office-card{grid-template-columns:minmax(0,1fr)}.office-map{border-inline-start:0;border-top:1px solid var(--line);min-height:360px}.map-preview,.office-map iframe{min-height:360px}.office-copy{padding:28px}.office-copy .btn{width:100%}}
@media(max-width:520px){.floating-contact{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:10px}.float-action{width:50px;height:50px;border-radius:17px}.float-action svg{width:24px;height:24px}.float-label{display:none}.back-to-top{left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:48px;height:48px}.call-popover{bottom:66px}.office-copy h2{font-size:30px}.map-preview>strong{font-size:16px}.map-preview{padding:22px}}
@media(prefers-reduced-motion:reduce){.service-card,.portfolio-card,.side-card,.article-img,.contact-form,.float-action,.back-to-top,.float-label,.contact-direct a{transition:none!important;transform:none!important}}
.office-address{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--gold2);font-size:13px}.office-address svg{width:16px;height:16px}
@keyframes entrance-copy{from{opacity:.65;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.hero-copy{animation:entrance-copy .7s cubic-bezier(.2,.8,.2,1) both}.hero-visual{animation:entrance-copy .9s cubic-bezier(.2,.8,.2,1) both}}
[hidden]{display:none!important}