:root{--navy:#071c2c;--deep:#061521;--green:#087f5b;--lime:#6ee7b7;--white:#f8fafc;--muted:#b8c7d1;--line:rgba(255,255,255,.14);--panel:rgba(255,255,255,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:#071c2c;color:var(--white);line-height:1.6}a{color:inherit;text-decoration:none}.container{width:min(1160px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(4,19,31,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em}.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#0b9b6a,#064b48);display:grid;place-items:center;font-size:15px;font-weight:900;box-shadow:0 8px 20px #0005;border:1px solid #6ee7b755}.brand small{display:block;font-size:10px;letter-spacing:.16em;color:#a7f3d0;font-weight:600}.navlinks{display:flex;align-items:center;gap:25px;font-size:14px;color:#d8e4eb}.navlinks a:hover,.navlinks a.active{color:var(--lime)}.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:white;border-radius:10px;font-size:25px;width:46px;height:44px;cursor:pointer}
.hero{position:relative;min-height:610px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(115deg,rgba(4,22,34,.98),rgba(4,38,43,.82)),url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=85') center/cover}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 35%,rgba(16,185,129,.2),transparent 36%);pointer-events:none}.hero-inner{position:relative;z-index:1;padding:86px 0;max-width:790px}.eyebrow{color:#6ee7b7;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800}.hero h1{font-size:clamp(42px,6.3vw,76px);line-height:1.04;letter-spacing:-.045em;margin:20px 0}.hero p{font-size:18px;color:#d0dde5;max-width:690px}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:12px;font-weight:800;border:1px solid transparent;transition:transform .25s,box-shadow .25s;isolation:isolate}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0005}.btn-primary{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 8px 0 #034d3d,0 13px 24px #0004}.btn-outline{background:rgba(3,20,32,.35);border:2px solid transparent;background-image:linear-gradient(#071c2c,#071c2c),conic-gradient(from var(--angle,0deg),#34d399,#60a5fa,#f472b6,#facc15,#34d399);background-origin:border-box;background-clip:padding-box,border-box;animation:spin 5s linear infinite}.btn-outline:hover{box-shadow:0 0 22px #34d39955,0 8px 0 #03111d}@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes spin{to{--angle:360deg}}
.welcome{position:fixed;inset:0;background:#061521;z-index:100;display:grid;place-items:center;text-align:center;padding:24px;transition:opacity .6s,visibility .6s}.welcome.hidden{opacity:0;visibility:hidden;pointer-events:none}.welcome-card{max-width:650px}.welcome-mark{width:82px;height:82px;border-radius:24px;margin:0 auto 22px;display:grid;place-items:center;background:linear-gradient(145deg,#10b981,#064e3b);font-size:25px;font-weight:900;box-shadow:0 15px 40px #0006}.welcome h2{font-size:clamp(30px,5vw,48px);line-height:1.1;margin:12px 0}.welcome p{color:var(--muted)}
.section{padding:82px 0}.section.alt{background:#0a2535}.section-head{max-width:700px;margin-bottom:32px}.section h2{font-size:clamp(30px,4vw,45px);line-height:1.15;margin:12px 0}.section p{color:#c4d2db}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{position:relative;min-height:230px;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#102e40;display:flex;align-items:end;transition:transform .25s,border-color .25s}.card:hover{transform:translateY(-5px);border-color:#34d39999}.card-bg{position:absolute;inset:0;background-position:center;background-size:cover;transition:transform .5s}.card:hover .card-bg{transform:scale(1.06)}.card-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,17,28,.98),rgba(3,17,28,.2) 100%)}.card-content{position:relative;padding:24px}.card-content h3{margin:0 0 6px;font-size:22px}.card-content p{margin:0;color:#d1dde4;font-size:14px}.card-arrow{display:inline-block;color:#6ee7b7;margin-top:12px;font-weight:800}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{border:1px solid var(--line);background:var(--panel);padding:25px;border-radius:16px}.feature .number{font-size:13px;color:#6ee7b7;letter-spacing:.14em;font-weight:800}.feature h3{margin:12px 0 5px}.feature p{margin:0;font-size:14px}
.page-hero{padding:78px 0 64px;background:linear-gradient(120deg,#061521,#0b493e);border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(38px,5vw,60px);line-height:1.08;margin:12px 0}.page-hero p{max-width:760px;color:#d1dde4;font-size:18px}.content-two{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:start}.info-panel{padding:28px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}.info-panel h3{margin-top:0}.list{padding-left:20px;color:#c4d2db}.list li{margin:8px 0}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}.contact-box{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--panel)}.contact-box a{color:#6ee7b7}.contact-form{display:grid;gap:14px}.contact-form label{font-size:13px;color:#d1dde4}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:13px;border-radius:10px;border:1px solid #315164;background:#061521;color:white;font:inherit}.contact-form textarea{min-height:130px;resize:vertical}.note{font-size:12px;color:#9eb1bd}
footer{border-top:1px solid var(--line);background:#04131f;padding:32px 0;color:#aebfc9}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}.footer-links a:hover{color:#6ee7b7}.whatsapp{position:fixed;right:18px;bottom:18px;z-index:30;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#062d18;font-size:25px;font-weight:900;box-shadow:0 10px 25px #0005;border:2px solid #ffffff44}
@media(max-width:800px){.menu-toggle{display:block}.navlinks{display:none;position:absolute;top:77px;left:0;right:0;padding:18px 4%;background:#04131f;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.navlinks.open{display:flex}.navlinks a{padding:12px 0;border-bottom:1px solid #ffffff12}.hero{min-height:570px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}.content-two,.contact-grid{grid-template-columns:1fr}.section{padding:62px 0}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.hero-inner{padding:66px 0}.hero p{font-size:16px}.btn{width:100%}.nav{height:70px}.navlinks{top:69px}.brand{font-size:13px}.logo{width:38px;height:38px}}

/* DEHJEH GROUP brand assets */
.brand-logo{width:46px;height:46px;object-fit:contain;display:block;flex:0 0 auto}
.welcome-logo{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 22px;filter:drop-shadow(0 8px 16px #0007)}
@media(max-width:520px){.brand-logo{width:40px;height:40px}}


/* DEHJEH motion enhancements — additive, preserving the existing design */
.welcome{perspective:1200px;overflow:hidden}
.welcome-card{transform-origin:center;will-change:transform,opacity}
.welcome-mark{transform-style:preserve-3d}
.welcome.launching{pointer-events:none;animation:welcomeCurtainOut 1.25s cubic-bezier(.76,0,.24,1) forwards}
.welcome.launching .welcome-card{animation:welcomeCardOut 1.05s cubic-bezier(.65,0,.35,1) forwards}
.welcome.launching .welcome-logo,
.welcome.launching .welcome-mark{animation:welcomeLogoTurn .95s cubic-bezier(.22,.75,.25,1) forwards}
.welcome.launching .welcome-card h2,
.welcome.launching .welcome-card p,
.welcome.launching .welcome-card .eyebrow{animation:welcomeTextOut .65s ease forwards}
@keyframes welcomeCurtainOut{0%{clip-path:inset(0 0 0 0);opacity:1}65%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden}}
@keyframes welcomeCardOut{0%{transform:translateY(0) scale(1);opacity:1}55%{transform:translateY(-12px) scale(1.025);opacity:1}100%{transform:translateY(-70px) scale(.88);opacity:0}}
@keyframes welcomeLogoTurn{0%{transform:rotateY(0) rotateZ(0) scale(1)}55%{transform:rotateY(180deg) rotateZ(12deg) scale(1.12)}100%{transform:rotateY(360deg) rotateZ(0) scale(.82);opacity:0}}
@keyframes welcomeTextOut{to{opacity:0;transform:translateY(-14px)}}

/* Service cards and content glide in alternately from left and right */
.motion-item{opacity:0;transform:translate3d(var(--motion-x,0),24px,0);transition:opacity .8s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--motion-delay,0ms);will-change:transform,opacity}
.motion-item.from-left{--motion-x:-54px}
.motion-item.from-right{--motion-x:54px}
.motion-item.is-visible{opacity:1;transform:translate3d(0,0,0)}
.card.motion-item{transition-duration:.9s}
.feature.motion-item{transition-duration:.8s}
@media(prefers-reduced-motion:reduce){
 .welcome,.welcome-card,.welcome-mark,.welcome-logo,.motion-item{animation:none!important;transition:none!important;transform:none!important}
 .motion-item{opacity:1!important}
}


/* Responsive refinement for phones, tablets and desktop screens */
html{width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
.container{width:min(1160px,calc(100% - 48px))}
.nav{min-width:0}
.brand{min-width:0;max-width:calc(100% - 64px);gap:10px}
.brand span{min-width:0;line-height:1.25}
.brand small{white-space:normal;line-height:1.25}
.navlinks{flex-shrink:0}
.hero-inner{width:100%}
.grid,.feature-grid{min-width:0}
.card,.feature,.info-panel,.contact-box{min-width:0;overflow-wrap:anywhere}
.page-hero,.section{min-width:0}
.whatsapp{
 position:fixed!important;right:max(18px,env(safe-area-inset-right))!important;
 bottom:max(18px,env(safe-area-inset-bottom))!important;
 z-index:99999!important;width:58px!important;height:58px!important;
 min-width:58px!important;max-width:58px!important;min-height:58px!important;
 border-radius:50%!important;display:flex!important;align-items:center!important;
 justify-content:center!important;padding:0!important;line-height:1!important;
 color:#fff!important;background:#25D366!important;border:2px solid #fff!important;
 box-shadow:0 5px 18px rgba(0,0,0,.38)!important;overflow:hidden!important;
 text-indent:0!important;font-size:0!important
}
.whatsapp svg{display:block!important;width:34px!important;height:34px!important;
 flex:0 0 34px!important;max-width:none!important;fill:#fff}
@media(min-width:1100px){
 .container{width:min(1160px,calc(100% - 80px))}
 .hero{min-height:640px}
 .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
 .nav{height:72px;gap:12px}
 .menu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 44px}
 .navlinks{display:none;position:absolute;top:100%;left:0;right:0;width:100%;
   padding:12px 24px 18px;background:#04131f;border-bottom:1px solid var(--line);
   flex-direction:column;align-items:stretch;gap:0;box-shadow:0 14px 22px #0004}
 .navlinks.open{display:flex}
 .navlinks a{display:block;padding:13px 2px;border-bottom:1px solid #ffffff16}
 .hero{min-height:540px}
 .content-two,.contact-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
 .container{width:calc(100% - 36px)}
 .nav{height:68px}
 .brand{font-size:12px;letter-spacing:.02em;gap:8px}
 .brand-logo{width:38px;height:38px}
 .brand small{font-size:8px;letter-spacing:.1em}
 .menu-toggle{width:42px;height:42px;flex-basis:42px;font-size:23px}
 .navlinks{padding-left:18px;padding-right:18px}
 .hero{min-height:520px;background-position:center}
 .hero-inner{padding:54px 0}
 .hero h1{font-size:clamp(34px,10vw,48px);overflow-wrap:anywhere}
 .hero p,.page-hero p{font-size:16px}
 .actions{gap:12px}
 .btn{width:100%;min-height:48px;padding:13px 16px}
 .section{padding:48px 0}
 .section h2{font-size:clamp(27px,8vw,36px)}
 .grid{grid-template-columns:1fr;gap:15px}
 .feature-grid{grid-template-columns:1fr;gap:14px}
 .card{min-height:210px}
 .card-content{padding:20px}
 .page-hero{padding:52px 0 42px}
 .content-two,.contact-grid{gap:18px}
 .info-panel,.contact-box,.feature{padding:20px}
 .footer-inner{align-items:flex-start;flex-direction:column}
 .footer-links{gap:12px}
 .welcome{padding:20px}
 .welcome-card{width:100%;max-width:520px}
 .welcome-logo{width:88px;height:88px}
 .whatsapp{right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important}
}
@media(max-width:380px){
 .container{width:calc(100% - 28px)}
 .brand{font-size:11px}
 .brand-logo{width:34px;height:34px}
 .brand small{font-size:7px}
 .hero h1{font-size:33px}
 .hero p{font-size:15px}
}


/* CEO-approved automatic welcome intro: hold, then slide left to reveal the homepage */
.welcome{display:flex;align-items:center;justify-content:center;transform:translateX(0);opacity:1;visibility:visible;will-change:transform;}
.welcome-card{width:min(650px,100%);padding:12px 0;}
.intro-caption{margin:26px auto 0;color:#a9c7bd;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;}
.welcome.launching{animation:dehjehIntroSlideLeft 2.15s cubic-bezier(.72,0,.24,1) forwards;}
.welcome.launching .welcome-card{animation:dehjehIntroContentFade 1.35s ease-in forwards;}
@keyframes dehjehIntroSlideLeft{
  0%{transform:translateX(0);opacity:1;visibility:visible}
  18%{transform:translateX(-3%);opacity:1}
  100%{transform:translateX(-110%);opacity:1;visibility:hidden}
}
@keyframes dehjehIntroContentFade{
  0%{opacity:1;transform:translateX(0) scale(1)}
  35%{opacity:1;transform:translateX(-12px) scale(.99)}
  100%{opacity:0;transform:translateX(-70px) scale(.96)}
}
@media(prefers-reduced-motion:reduce){.welcome.launching{animation-duration:.25s}.welcome.launching .welcome-card{animation-duration:.2s}}