/*
Theme Name: DIS Oil & Energy (Bilingual)
Theme URI: https://example.com
Author: Dcosta Integrated Services
Author URI: https://example.com
Description: Bilingual dark theme for Dcosta Integrated Services (DIS) with three verticals, products, quality/HSE, projects and contact. Localization‑ready with RTL.
Version: 1.2.0
Text Domain: dis
Domain Path: /languages
Requires at least: 5.9
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Base */
:root{ --bg1:#f8fafc; --bg2:#ffffff; --accent:#2563eb; --accent-2:#dbeafe; --lux:#C8A75A; --card:#ffffff; --muted:#64748b; --text:#0f172a; --ring:rgba(2,6,23,.08); --white:#ffffff }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font-family: 'Outfit', Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji; color:var(--text); background: radial-gradient(1200px 700px at 80% -20%, rgba(37,99,235,.10), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(37,99,235,.06), transparent 50%), linear-gradient(180deg, var(--bg1), var(--bg2)); line-height:1.65 }
a{color:var(--accent);text-decoration:none;transition:color .2s ease}
img{max-width:100%; height:auto}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:72px 0; border-bottom:1px solid var(--ring); scroll-margin-top:80px}
.eyebrow{letter-spacing:.15em; text-transform:uppercase; color:var(--lux); font-size:.8rem; margin:0 0 6px}
h1,h2,h3,h4{margin:0 0 10px}
h1{font-size:clamp(2.25rem, 2.1rem + 1.2vw, 3.4rem); line-height:1.1; letter-spacing:-.01em; font-weight:700}
h2{font-size:clamp(1.6rem, 1.45rem + .6vw, 2.2rem); letter-spacing:-.005em}
.text-muted{color:rgba(15,23,42,.65)}
.btn{ display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(135deg, #1d4ed8, #0ea5e9); color:#fff; border-radius:14px; padding:12px 18px; font-weight:600; border:1px solid rgba(2,6,23,.06); box-shadow:0 6px 18px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,99,235,.35) }
.btn:active{ transform:translateY(0) }
.btn.secondary{background:#fff; color:#0f172a; border:1px solid #e5e7eb; box-shadow:0 4px 12px rgba(2,6,23,.06)}
.btn.secondary:hover{ background:#eff6ff }
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.card{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg, rgba(37,99,235,.15), rgba(200,167,90,.18)) border-box; border:1px solid transparent; border-radius:18px; padding:20px; box-shadow:0 10px 28px rgba(15,23,42,.06); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease }
.card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(2,6,23,.12) }
.card img{border-radius:12px; transition: transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover img{ transform:scale(1.03) }
.badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f1f5f9; color:#0f172a; font-size:.8rem}
.kpis{display:grid; gap:12px; grid-template-columns:repeat(3,1fr); max-width:520px}
.kpis .card{padding:16px}
.kpis .value{font-weight:700; font-size:1.5rem; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1 }
.kpis .label{font-size:.85rem; color:rgba(15,23,42,.55)}
.list{list-style:none; padding:0; margin:12px 0 0}
.list li{display:flex; gap:8px; align-items:flex-start}
.list li:before{content:'✓'; color:#16a34a; margin-top:2px}
.header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid #e5e7eb}
.nav{display:flex; justify-content:space-between; align-items:center; height:64px}
.nav > nav.menu{display:flex;align-items:center;gap:20px}
.nav nav.menu ul.menu{list-style:none;margin:0;padding:0;display:flex;gap:20px;align-items:center}
.nav nav.menu a{color:#1f2937;text-decoration:none;position:relative}
.nav nav.menu a::after{content:""; position:absolute; inset-inline:0; bottom:-6px; height:2px; background:linear-gradient(90deg, var(--accent), var(--lux)); transform:scaleX(0); transform-origin:inline-start; transition:transform .25s ease; opacity:.9}
.nav nav.menu a:hover::after, .nav nav.menu a:focus-visible::after{ transform:scaleX(1) }
.nav nav.menu li{list-style:none}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px; transition:transform .25s ease}
.brand:hover img{ transform:scale(1.03) }
.nav .nav-toggle{display:none; align-items:center; gap:8px; padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:12px; font-weight:600; color:#0f172a}
.nav .nav-toggle .bars{position:relative; width:18px; height:2px; background:#0f172a; display:inline-block}
.nav .nav-toggle .bars::before,.nav .nav-toggle .bars::after{content:''; position:absolute; left:0; width:18px; height:2px; background:#0f172a}
.nav .nav-toggle .bars::before{top:-6px}
.nav .nav-toggle .bars::after{top:6px}
.hero{position:relative; overflow:hidden; padding:120px 0 60px}
.hero .container{position:relative; z-index:2}
.hero-media{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.05); opacity:1; will-change:transform; transform:translate3d(0,var(--heroParallax,0px),0)}
.hero-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.85)) }
.card-title{display:flex; align-items:center; gap:10px; font-weight:700}
.icon{display:grid; place-content:center; width:40px; height:40px; border-radius:12px; background:#eef2ff; border:1px solid #e5e7eb; transition:transform .2s ease}
.card:hover .icon{ transform:translateY(-2px) }
.products .card ul li:before{content:'•'; color:var(--accent); font-weight:700}
.footer{padding:40px 0; color:#334155}
.small{font-size:.9rem}
.lang-switcher{display:flex; gap:10px; align-items:center}
.lang-switcher ul{display:flex; gap:10px; list-style:none; margin:0; padding:0}
.lang-switcher li{list-style:none}
.lang-switcher a{padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#ffffff; font-size:.85rem; color:#0f172a}
.lang-switcher img{height:14px; vertical-align:-2px; margin-inline-end:6px}

input,select,textarea{width:100%; background:#ffffff; border:1px solid #e2e8f0; color:#0f172a; border-radius:12px; padding:12px 14px; outline:none}
button{cursor:pointer}

/* Clients carousel */
.clients{--logo-h:48px; --gap:48px; --speed:28s}
.clients .strip{overflow:hidden; position:relative; padding:10px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.clients .logo-track{display:flex; align-items:center; gap:var(--gap); will-change:transform; animation:dis-marquee var(--speed) linear infinite}
.clients .logo-track:nth-child(2){animation-delay: calc(var(--speed) / -2)}
.clients img.logo{height:var(--logo-h); width:auto; object-fit:contain; filter:grayscale(100%); opacity:.85; transition:opacity .2s ease, filter .2s ease, transform .2s ease}
.clients img.logo:hover{filter:none; opacity:1; transform:translateY(-2px)}
.clients .strip:hover .logo-track{animation-play-state:paused}
@keyframes dis-marquee{to{transform:translateX(calc(-100% - var(--gap)))}}

.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:translateY(0); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease}

@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr}
  .brand img{height:38px}
  .nav{position:relative;height:64px}
  .nav .nav-toggle{display:inline-flex}
  .nav > nav.menu{position:absolute; top:64px; inset-inline:0; background:#fff; border-bottom:1px solid #e5e7eb; display:none; padding:16px 20px; box-shadow:0 10px 30px rgba(2,6,23,.08)}
  body.nav-open .nav > nav.menu{display:block}
  .nav nav.menu ul.menu{flex-direction:column; gap:12px}
  .nav nav.menu .btn{width:100%; justify-content:center}
  .nav nav.menu .lang-switcher{display:flex}
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .hero-media{transform:none!important}
}