:root{
  --ink:#062427; --deep:#0A3A3E; --teal:#0C4347; --teal-2:#0E4F52; --emerald:#128079;
  --mint:#5FE3D1; --gold:#D2A64C; --gold-dk:#8C6A1F; --gold-2:#B8892F;
  --ivory:#F5F2EA; --paper:#FFFDF8; --line:#E4DDCC; --text:#12312F; --muted:#4A5F5D; --soft:#B5CFCB;
  --radius:20px; --max:1200px;
  --f-display:'Sora','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-body:'Manrope','IBM Plex Sans Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--text);background:var(--ivory);line-height:1.6;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{--f-display:'IBM Plex Sans Arabic',system-ui,sans-serif;--f-body:'IBM Plex Sans Arabic',system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
html[lang="en"] [data-lang="ar"], html[lang="ar"] [data-lang="en"]{display:none!important}

.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
section{padding:96px 0}
.eyebrow{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:12px}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:15px}
.dark .eyebrow{color:var(--gold)}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;color:var(--deep)}
h2{font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
h3{font-size:20px;font-weight:700}
.lead{font-size:18px;color:var(--muted);max-width:720px}
.dark{background:radial-gradient(circle at 80% 20%,#0F5A5B 0%,var(--deep) 45%,var(--ink) 100%);color:var(--ivory)}
.dark h1,.dark h2,.dark h3{color:var(--ivory)}
.dark .lead{color:var(--soft)}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.hdr.scrolled{background:rgba(6,36,39,.92);backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ivory)}
.brand img{width:44px;height:44px}
.brand b{font-family:var(--f-display);font-size:19px;display:block;line-height:1.1}
.brand small{font-size:12px;color:var(--gold);letter-spacing:.08em}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:#D5E5E2;font-size:15px;font-weight:600;transition:color .2s}
.nav a:hover{color:var(--gold)}
.lang-btn{border:1px solid var(--gold);color:var(--gold);background:transparent;border-radius:30px;padding:7px 16px;font:700 14px var(--f-body);cursor:pointer;transition:.2s}
.lang-btn:hover{background:var(--gold);color:var(--ink)}
.menu-btn{display:none;background:none;border:0;color:var(--ivory);cursor:pointer}
.menu-btn svg{width:28px;height:28px}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 90px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,78px);font-weight:700;letter-spacing:-.02em;margin:10px 0 22px}
.hero h1 span{color:var(--gold)}
.hero .lead{font-size:19px;margin-bottom:34px}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:40px;font-weight:700;font-size:16px;transition:transform .2s,box-shadow .2s,background .2s}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(210,166,76,.35)}
.btn-ghost{border:1px solid rgba(245,242,234,.35);color:var(--ivory)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center}
.hero-art .ring{position:absolute;inset:0;border:2px solid #1F6E6C;border-radius:50%;animation:spin 60s linear infinite}
.hero-art .ring.r2{inset:12%;border:1px dashed #2A7F7A;animation-direction:reverse;animation-duration:45s}
.hero-art .ring::after{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}
.hero-art img{width:58%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45));animation:float 6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-14px)}}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 70% 40%,#000 0%,transparent 70%)}

/* stats */
.stats{margin-top:-56px;position:relative;z-index:2;padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--emerald);border-radius:var(--radius);padding:26px 24px;box-shadow:0 20px 40px rgba(6,36,39,.08)}
.stat:nth-child(n+3){border-top-color:var(--gold)}
.stat b{font-family:var(--f-display);font-size:38px;color:var(--deep);display:block;line-height:1.1}
.stat span{color:var(--muted);font-size:15px}

/* about */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.split p{color:var(--muted);font-size:17px;margin-bottom:16px}
.split p strong{color:var(--deep)}
.art{border-radius:26px;overflow:hidden;box-shadow:0 30px 60px rgba(6,36,39,.18)}
.art img{width:100%;height:100%;object-fit:cover}

/* vision */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0}
.vm-card{background:var(--teal-2);border:1px solid #1F6E6C;border-radius:24px;padding:36px}
.vm-card .ico{width:58px;height:58px;border-radius:50%;background:var(--gold);display:grid;place-items:center;margin-bottom:18px}
.vm-card .ico svg{width:28px;height:28px;stroke:var(--ink)}
.vm-card p{color:#C9DDDA;font-size:17px;margin-top:10px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.values div{border-top:2px solid var(--gold);padding-top:18px;color:#C9DDDA;font-size:15px}
.values svg{width:26px;height:26px;stroke:var(--gold);margin-bottom:10px}

/* services grid */
.svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.svc:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(6,36,39,.12);border-color:var(--gold)}
.svc .ico{width:56px;height:56px;border-radius:16px;background:var(--teal);display:grid;place-items:center;margin-bottom:18px}
.svc:nth-child(n+6) .ico{background:var(--emerald)}
.svc .ico svg{width:26px;height:26px;stroke:var(--gold)}
.svc:nth-child(n+6) .ico svg{stroke:var(--ivory)}
.svc h3{font-size:17px;line-height:1.35}

/* detail blocks */
.detail{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:22px;margin-top:44px;align-items:stretch}
.card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:32px}
.card-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.card-h .ico{width:48px;height:48px;border-radius:14px;background:var(--teal);display:grid;place-items:center;flex:none}
.card-h .ico svg{width:24px;height:24px;stroke:var(--gold)}
.card ul{list-style:none;display:grid;gap:10px}
.card li{position:relative;padding-inline-start:22px;color:var(--muted);font-size:15.5px}
.card li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold-2)}
.sec3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.sec3 .card{padding:0;overflow:hidden}
.sec3 .card-h{background:var(--teal);padding:26px 30px;margin:0}
.sec3 .card:nth-child(2) .card-h{background:var(--emerald)}
.sec3 .card-h h3{color:var(--ivory)}
.sec3 .card-h .ico{background:var(--gold);border-radius:50%}
.sec3 .card-h .ico svg{stroke:var(--ink)}
.sec3 ul{padding:26px 30px}
.power{display:grid;grid-template-columns:1fr .55fr;gap:28px;margin-top:44px}
.power-list{display:grid;gap:18px}
.row-card{display:flex;gap:20px;background:var(--paper);border:1px solid var(--line);border-inline-start:6px solid var(--gold);border-radius:20px;padding:26px 28px}
.row-card:nth-child(2){border-inline-start-color:var(--emerald)}
.row-card .ico{width:54px;height:54px;border-radius:16px;background:var(--teal);display:grid;place-items:center;flex:none}
.row-card .ico svg{width:26px;height:26px;stroke:var(--gold)}
.row-card p{color:var(--muted);font-size:15.5px;margin-top:6px}

/* SLA */
.sla{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;margin-top:44px;align-items:start}
.sla-side{display:grid;gap:18px}
.sla-side .card.dk{background:var(--teal);border:0}
.sla-side .card.dk h3{color:var(--ivory)} .sla-side .card.dk p{color:#C9DDDA}
.sla-side .card p{color:var(--muted);margin-top:8px}
table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
th{background:var(--deep);color:var(--ivory);text-align:start;padding:18px 24px;font-size:15px}
td{padding:22px 24px;border-top:1px solid var(--line);font-size:16px;color:var(--muted)}
td:first-child{font-weight:700;color:var(--deep)}
td.num{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--emerald)}
tr.em td{background:#FBF3E0} tr.em td.num{color:var(--gold-dk)}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:50px;position:relative}
.steps::before{content:"";position:absolute;top:36px;inset-inline:10%;border-top:3px dashed var(--gold)}
.step{text-align:center;position:relative}
.step .n{width:72px;height:72px;border-radius:50%;background:var(--teal);color:var(--gold);font:700 28px var(--f-display);display:grid;place-items:center;margin:0 auto 20px;border:6px solid var(--ivory);position:relative}
.step:last-child .n{background:var(--emerald);color:var(--ivory)}
.step .card{padding:24px 18px}
.step p{color:var(--muted);font-size:14.5px;margin-top:8px}
.note{margin-top:30px;background:#EDE5D2;border-inline-start:5px solid var(--gold);border-radius:12px;padding:18px 24px;font-style:italic;color:var(--deep)}

/* team */
.team{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;margin-top:44px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.team-grid .card{padding:24px}
.team-grid .card-h{margin-bottom:8px}
.team-grid .card-h h3{font-size:17px}
.team-grid p{color:var(--muted);font-size:14.5px}

/* projects */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.proj .card{border-top:5px solid var(--emerald)}
.proj .card:nth-child(n+4){border-top-color:var(--gold)}
.proj .loc{color:var(--emerald);font-weight:700;font-size:14px;margin:6px 0 8px}
.proj p{color:var(--muted);font-size:15px}
.proj .card.dk{background:linear-gradient(150deg,var(--teal),var(--ink));border:0;display:flex;flex-direction:column;justify-content:center}
.proj .card.dk h3{color:var(--ivory)} .proj .card.dk p{color:var(--soft)}
.proj .card.dk svg{width:40px;height:40px;stroke:var(--gold);margin-bottom:14px}

/* logos */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.logo{background:#fff;border:1px solid var(--line);border-radius:16px;aspect-ratio:16/9;display:grid;place-items:center;padding:14px;transition:transform .25s,box-shadow .25s}
.logo:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(6,36,39,.1)}
.logo img{max-height:100%;object-fit:contain;filter:grayscale(.15)}
.logo.dkbg{background:#2A2A2A}
.sub-h{margin-top:70px}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.id-card{background:#FBF8F0;border-radius:30px;padding:48px 40px;text-align:center;color:var(--text)}
.id-card img{width:130px;margin:0 auto 18px}
.id-card h3{font-size:28px;color:var(--deep)}
.id-card .tag{color:var(--gold-dk);font-weight:600;margin:4px 0 22px}
.id-card hr{border:0;border-top:1px solid var(--line);margin-bottom:22px}
.id-card .lbl{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.id-card .unn{font-family:'Sora',sans-serif;font-size:34px;font-weight:700;color:var(--text)}
.pill{display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;padding:11px 24px;border-radius:30px;margin-top:26px}

footer{background:var(--ink);color:#8FB3AE;padding:30px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero-art *{animation:none!important}}

/* responsive */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .detail{grid-template-columns:1fr 1fr}.detail .art{grid-column:1/-1;max-height:360px}
  .logos{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}.steps::before{display:none}
}
@media (max-width:860px){
  section{padding:72px 0}
  .nav{position:fixed;inset:76px 0 auto;background:var(--ink);flex-direction:column;padding:24px;gap:18px;display:none}
  .nav.open{display:flex}
  .menu-btn{display:block}
  .hero .wrap,.split,.vm,.sec3,.power,.sla,.team,.contact .wrap{grid-template-columns:1fr}
  .hero-art{max-width:340px;margin-inline:auto;order:-1}
  .stats .wrap,.values{grid-template-columns:1fr 1fr}
  .svc-grid,.proj,.team-grid{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,1fr)}
  .power .art,.team .art{max-height:380px}
}
@media (max-width:520px){
  .svc-grid,.proj,.team-grid,.steps{grid-template-columns:1fr}
  .logos{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  th,td{padding:14px 12px;font-size:14px} td.num{font-size:18px}
  .brand small{display:none}
}
.sla-side .card.dk .ico svg{stroke:var(--ink)}
.values svg{display:block}
.team .art{align-self:stretch;min-height:420px}
.logos>*,.svc-grid>*,.proj>*,.team-grid>*,.steps>*,.detail>*,.split>*{min-width:0}
.logo img{width:100%;height:100%;object-fit:contain}

/* ===== v2 additions ===== */
.topbar{background:rgba(3,22,24,.75);font-size:13px;color:#A9C7C2;transition:margin .3s}
.topbar .wrap{height:36px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar a,.topbar span{display:inline-flex;align-items:center;gap:8px}
.topbar svg{width:15px;height:15px;stroke:var(--gold)}
.topbar a:hover{color:var(--gold)}
.hdr.scrolled .topbar{margin-top:-36px}
.hero{padding-top:170px}
.hero-net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
html[dir="rtl"] .hero-net{transform:scaleX(-1)}
.hero-net .nl line{stroke:#2A8F86;stroke-width:1;stroke-opacity:.35}
.hero-net .nn circle{fill:var(--mint);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.hero .wrap{position:relative}
.hero-mail{display:inline-flex;align-items:center;gap:10px;margin-top:26px;color:var(--soft);font-size:15px;direction:ltr}
.hero-mail svg{width:18px;height:18px;stroke:var(--gold)}
.hero-mail:hover{color:var(--gold)}

.contact .wrap{grid-template-columns:1fr 1fr;align-items:start}
.c-list{display:grid;gap:14px;margin-top:30px}
.c-item{display:flex;align-items:center;gap:18px;background:var(--teal-2);border:1px solid #1F6E6C;border-radius:18px;padding:18px 22px;transition:border-color .2s,transform .2s}
a.c-item:hover{border-color:var(--gold);transform:translateY(-2px)}
.c-item .ico{width:50px;height:50px;border-radius:14px;background:var(--gold);display:grid;place-items:center;flex:none}
.c-item .ico svg{width:24px;height:24px;stroke:var(--ink)}
.c-item small{display:block;color:var(--soft);font-size:13px}
.c-item b{color:var(--ivory);font-size:17px;word-break:break-word}
.c-form{background:#FBF8F0;border-radius:28px;padding:36px;color:var(--text);display:grid;gap:16px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.c-form h3{font-size:24px;margin-bottom:4px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.c-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.c-form input,.c-form select,.c-form textarea{font:inherit;font-weight:500;font-size:15px;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{outline:0;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(18,128,121,.15)}
.c-form .bad{border-color:#C2410C}
.c-form textarea{resize:vertical}
.c-form .btn{justify-content:center;border:0;cursor:pointer}
.c-form .btn svg{width:18px;height:18px;stroke:var(--ink)}
html[dir="rtl"] .c-form .btn svg{transform:scaleX(-1)}
.f-note{font-size:13px;color:var(--muted);text-align:center}

footer{padding:64px 0 0;background:var(--ink)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
.f-grid h4{font-family:var(--f-display);color:var(--ivory);font-size:16px;margin-bottom:16px}
.f-grid a,.f-grid > div > span{display:block;color:#8FB3AE;margin-bottom:10px;font-size:14.5px}
.f-grid a:hover{color:var(--gold)}
.f-grid p{color:#8FB3AE;font-size:14.5px;margin-top:16px;max-width:340px}
.f-grid .brand{display:flex;margin:0}
.f-bottom{border-top:1px solid #133A3D;padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#6E9590}

.to-top,.fab-mail{position:fixed;bottom:22px;z-index:40;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .3s,transform .3s}
.to-top{inset-inline-end:22px;background:var(--teal);opacity:0;pointer-events:none}
.to-top.show{opacity:1;pointer-events:auto}
.to-top svg{width:22px;height:22px;stroke:var(--gold)}
.fab-mail{inset-inline-end:84px;background:var(--gold)}
.fab-mail svg{width:22px;height:22px;stroke:var(--ink)}
.fab-mail:hover,.to-top:hover{transform:translateY(-3px)}

@media (max-width:860px){
  .topbar .tb-loc{display:none}
  .nav{inset:112px 0 auto}
  .hdr.scrolled .nav{inset:76px 0 auto}
  .contact .wrap,.f-row{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .hero-net{opacity:.3}
}
@media (max-width:520px){ .f-grid{grid-template-columns:1fr} .c-form{padding:26px 20px} }
.dark .c-form h3{color:var(--deep)}
.fab-mail{opacity:0;pointer-events:none}
.fab-mail.show{opacity:1;pointer-events:auto}

/* ===== v3: photographic, global look ===== */
.hero{min-height:100vh;padding:190px 0 140px}
.hero .wrap{grid-template-columns:1fr;max-width:var(--max)}
.hero .wrap > .rv{max-width:820px}
.hero h1{font-size:clamp(42px,6.4vw,92px)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,26,28,.96) 0%,rgba(6,36,39,.86) 45%,rgba(6,36,39,.45) 100%),linear-gradient(0deg,rgba(4,26,28,.9) 0%,transparent 40%)}
html[dir="rtl"] .hero-shade{background:linear-gradient(270deg,rgba(4,26,28,.96) 0%,rgba(6,36,39,.86) 45%,rgba(6,36,39,.45) 100%),linear-gradient(0deg,rgba(4,26,28,.9) 0%,transparent 40%)}
.hero .hero-grid{opacity:.5}
.hero-net{opacity:.35}

.svc-grid{grid-template-columns:repeat(5,1fr);gap:16px}
.svc{position:relative;padding:0;overflow:hidden;min-height:380px;border:0;border-radius:22px;background:var(--teal);display:flex;align-items:flex-end;isolation:isolate}
.svc > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s ease}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,36,39,.05) 20%,rgba(6,36,39,.55) 55%,rgba(4,26,28,.95) 100%);transition:background .4s}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(6,36,39,.28)}
.svc:hover > img{transform:scale(1.08)}
.svc:hover::after{background:linear-gradient(180deg,rgba(18,128,121,.25) 0%,rgba(6,36,39,.7) 50%,rgba(4,26,28,.97) 100%)}
.svc-in{padding:24px 22px;width:100%}
.svc .n{position:absolute;top:18px;inset-inline-start:20px;font:700 14px var(--f-display);color:var(--gold);letter-spacing:.1em}
.svc .ico,.svc:nth-child(n+6) .ico{width:46px;height:46px;border-radius:12px;background:rgba(210,166,76,.95);margin-bottom:14px}
.svc .ico svg,.svc:nth-child(n+6) .ico svg{width:22px;height:22px;stroke:var(--ink)}
.svc h3{color:#fff;font-size:18px;line-height:1.35}

.art{min-height:420px}
.split .art{height:520px}
.detail{grid-template-columns:1fr 1fr 1fr}
.detail .art{min-height:460px}
.power .art{min-height:480px}
.team .art{min-height:560px}

@media (max-width:1080px){ .svc-grid{grid-template-columns:repeat(3,1fr)} .detail{grid-template-columns:1fr 1fr} .detail .art{grid-column:1/-1;min-height:360px} }
@media (max-width:860px){ .hero{min-height:88vh;padding:160px 0 110px} .svc-grid{grid-template-columns:1fr 1fr} .svc{min-height:300px} .split .art,.art{height:340px;min-height:0} .team .art,.power .art{min-height:0;height:340px} }
@media (max-width:520px){ .svc-grid{grid-template-columns:1fr 1fr;gap:12px} .svc{min-height:240px} .svc h3{font-size:15px} .svc-in{padding:16px 14px} .svc .ico{width:38px;height:38px;margin-bottom:10px} }

/* ===== v4 sections ===== */
.why-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.why-i{background:rgba(14,79,82,.55);border:1px solid #1F6E6C;border-radius:22px;padding:30px;transition:border-color .3s,transform .3s}
.why-i:hover{border-color:var(--gold);transform:translateY(-4px)}
.why-i .ico{width:52px;height:52px;border-radius:14px;background:var(--gold);display:grid;place-items:center;margin-bottom:18px}
.why-i .ico svg{width:26px;height:26px;stroke:var(--ink)}
.why-i p{color:#C9DDDA;font-size:15.5px;margin-top:8px}

.sec-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.sec-c{position:relative;height:260px;border-radius:22px;overflow:hidden;background:var(--teal);display:flex;align-items:flex-end;padding:24px;isolation:isolate}
.sec-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s}
.sec-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(4,26,28,.92))}
.sec-c:hover img{transform:scale(1.07)}
.sec-c h3{color:#fff;font-size:22px}

.pj-g{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.pj{background:var(--paper);border-radius:24px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.pj:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(6,36,39,.14)}
.pj-img{position:relative;height:280px;background:var(--teal);overflow:hidden}
.pj-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.pj:hover .pj-img img{transform:scale(1.06)}
.pj-loc{position:absolute;bottom:16px;inset-inline-start:16px;display:inline-flex;align-items:center;gap:6px;background:rgba(6,36,39,.85);backdrop-filter:blur(6px);color:var(--ivory);font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:30px}
.pj-loc svg{width:15px;height:15px;stroke:var(--gold)}
.pj-b{padding:26px 28px}
.pj-b h3{font-size:21px;margin-bottom:8px}
.pj-b p{color:var(--muted);font-size:15.5px}

.std{padding:44px 0;background:var(--deep)}
.std .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:space-between}
.std .wrap > p{color:var(--gold);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.std-row{display:flex;flex-wrap:wrap;gap:10px}
.std-row span{border:1px solid #2A6E6B;color:#D5E5E2;padding:9px 16px;border-radius:30px;font-size:14px;font-weight:600;direction:ltr}

.faq-w{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-w .lead a{color:var(--emerald);font-weight:700}
.fq-list{display:grid;gap:12px}
.fq{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:0 24px;transition:border-color .2s}
.fq[open]{border-color:var(--gold)}
.fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:17px;color:var(--deep)}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{width:32px;height:32px;border-radius:50%;background:#EFEADD;display:grid;place-items:center;flex:none;transition:transform .3s,background .3s}
.fq summary i svg{width:18px;height:18px;stroke:var(--deep)}
.fq[open] summary i{transform:rotate(45deg);background:var(--gold)}
.fq p{color:var(--muted);padding-bottom:22px;font-size:15.5px}

.cta-band{position:relative;padding:120px 0;overflow:hidden;background:var(--ink);text-align:center;isolation:isolate}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,36,39,.82),rgba(4,26,28,.9))}
.cta-band h2{color:var(--ivory);font-size:clamp(28px,4vw,48px)}
.cta-band p{color:var(--soft);font-size:18px;margin:6px 0 30px}

@media (max-width:1080px){ .why-g,.sec-g{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .faq-w,.pj-g{grid-template-columns:1fr;gap:28px} .pj-img{height:230px} .std .wrap{justify-content:center;text-align:center} .std-row{justify-content:center} }
@media (max-width:520px){ .why-g{grid-template-columns:1fr} .sec-g{grid-template-columns:1fr 1fr;gap:12px} .sec-c{height:180px;padding:16px} .sec-c h3{font-size:16px} }