:root{color-scheme:dark;--bg:#06101d;--panel:#0d2031;--muted:#99b1c6;--cyan:#38d7ef;--orange:#ff931f;--white:#f4f8ff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.topbar{height:78px;position:sticky;top:0;z-index:20;background:rgba(4,13,25,.92);border-bottom:1px solid #1a3547;backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,92px);gap:25px}.brand,.footer-brand{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:850;letter-spacing:1.4px}.brand img{width:49px;height:49px;object-fit:contain}.brand strong,.footer-brand b{color:var(--orange)}nav{display:flex;gap:38px;font-size:13px;color:#cad8e5}nav a,.footer-links a{transition:color .2s}nav a:hover,.footer-links a:hover{color:var(--cyan)}.lang{background:#112638;border:1px solid #35566b;color:white;border-radius:9px;padding:10px 14px;cursor:pointer}.lang:hover{border-color:var(--cyan)}.hero-art{height:clamp(250px,36vw,590px);background:url('assets/baner.png') center center/cover no-repeat;position:relative}.hero-art:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,var(--bg))}.hero-bottom{text-align:center;padding:8px 20px 112px;position:relative}.hero-line{display:block;width:1px;height:65px;background:linear-gradient(var(--cyan),transparent);margin:-12px auto 22px}.eyebrow{color:var(--cyan);font-size:11px;font-weight:850;letter-spacing:3px}.hero h1{font-size:clamp(38px,5.6vw,88px);line-height:1.04;letter-spacing:-2.5px;margin:24px auto;max-width:1050px;font-weight:900}.lead{max-width:630px;color:#b3c8d9;font-size:clamp(15px,1.5vw,19px);line-height:1.8;margin:0 auto 30px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:linear-gradient(120deg,#ffad39,#f87812);color:#08101a;font-weight:800;border-radius:9px;padding:17px 25px;box-shadow:0 10px 34px #fa7b1525;transition:transform .25s,box-shadow .25s}.primary:hover{transform:translateY(-4px);box-shadow:0 14px 40px #fa7b1555}.section{max-width:1230px;margin:auto;padding:95px 30px}.section-heading{text-align:center;max-width:720px;margin:0 auto 47px}.section h2,.about-section h2{font-size:clamp(34px,4vw,60px);line-height:1.1;letter-spacing:-1.5px;margin:18px 0}.section-heading h2 span{color:#a9bfd0}.section-heading>p:last-child{color:var(--muted);line-height:1.8}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.project-card{overflow:hidden;border:1px solid #24435a;border-radius:19px;background:linear-gradient(155deg,#10273a,#091625);transition:transform .3s,border-color .3s,box-shadow .3s}.project-card:hover{transform:translateY(-8px);border-color:#3d819d;box-shadow:0 24px 55px #0006}.card-art{height:320px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 40%,#174c61 0%,#0a2536 38%,#061421 90%);border-bottom:1px solid #26475c}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#3ac9e711 1px,transparent 1px),linear-gradient(90deg,#3ac9e711 1px,transparent 1px);background-size:35px 35px;transform:perspective(450px) rotateX(28deg) scale(1.4);opacity:.65}.art-kicker{position:absolute;top:24px;left:26px;color:#7fe4f1;font-size:10px;letter-spacing:2px;font-weight:800}.phone{position:absolute;right:15%;top:26px;width:153px;height:260px;background:#050d16;border:5px solid #395c71;border-radius:24px;box-shadow:-25px 20px 50px #0009,0 0 35px #3ce0ff22;transform:rotate(8deg);animation:float 7s ease-in-out infinite}.phone-notch{height:9px;width:55px;border-radius:0 0 8px 8px;background:#000;margin:auto}.phone-content{padding:20px 12px;color:#cdebf6}.phone-content small{color:#ff9e30;font-size:11px;font-weight:900}.phone-line{height:7px;background:#244b5e;border-radius:4px;width:62%;margin:14px 0}.phone-line.wide{width:94%}.phone-stats{display:flex;gap:5px;margin:18px 0}.phone-stats span{font-size:8px;padding:7px;background:#15465a;border-radius:4px}.phone-chart{height:65px;border:2px solid #39d6e5;border-radius:9px;background:linear-gradient(150deg,#38d7ef40,transparent)}.route-line{position:absolute;left:-8%;top:40%;width:75%;height:100px;border:2px dashed #2cd4ed55;border-radius:50%;transform:rotate(-18deg)}.card-art-title{position:absolute;left:26px;bottom:30px;font-size:clamp(28px,3vw,42px);font-weight:950;letter-spacing:-1.5px;text-shadow:0 4px 18px #000b}.card-art-title span{color:var(--orange)}.port-art{background:radial-gradient(circle at 70% 20%,#a3542040,#0a273b 55%,#061421)}.crane{position:absolute;right:17%;top:42px;width:180px;height:215px;filter:drop-shadow(0 0 12px #f78e3040)}.crane-mast{position:absolute;right:20px;top:24px;width:12px;height:180px;background:repeating-linear-gradient(45deg,#f3a83a 0 8px,#9e4f18 8px 12px)}.crane-beam{position:absolute;right:-30px;top:25px;width:245px;height:10px;background:#ff9b27;transform:rotate(-5deg)}.crane-rope{position:absolute;left:36px;top:30px;width:2px;height:105px;background:#ffd194}.crane-load{position:absolute;left:2px;top:135px;width:73px;height:48px;background:repeating-linear-gradient(90deg,#d26726 0 9px,#ed8e39 9px 12px);box-shadow:0 10px 30px #0008;animation:load 6s ease-in-out infinite}.containers{position:absolute;bottom:0;right:0;display:grid;grid-template-columns:repeat(3,75px);gap:3px}.containers i{height:45px;background:repeating-linear-gradient(90deg,#1c6179 0 10px,#184b60 10px 13px);border:1px solid #3992a9}.containers i:nth-child(2n){background:repeating-linear-gradient(90deg,#b45b2a 0 10px,#8d421e 10px 13px)}.card-body{padding:31px}.status{font-size:10px;font-weight:850;letter-spacing:2px;color:var(--cyan)}.status.development{color:var(--orange)}.card-body h3{font-size:30px;margin:14px 0}.card-body p{color:#a7bdce;line-height:1.8;min-height:88px}.text-link{font-size:14px;color:var(--orange);font-weight:800}.text-link:hover{text-decoration:underline}.text-link.muted{color:#8298aa;font-weight:500}.about-section{border-top:1px solid #1b3547;border-bottom:1px solid #1b3547;background:linear-gradient(120deg,#0b2031,#081522)}.about-inner{max-width:1170px;margin:auto;padding:100px 30px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-inner>div>p:not(.eyebrow){color:#b2c4d4;line-height:1.95;font-size:17px}.about-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.about-tags span{font-size:10px;color:#83d9e7;border:1px solid #2c5c70;padding:10px;border-radius:6px;letter-spacing:1px}.contact-panel{background:linear-gradient(110deg,#102e43,#0b1b2c);border:1px solid #28546b;border-radius:20px;padding:60px;display:flex;justify-content:space-between;align-items:center;gap:30px}.contact-panel p:not(.eyebrow){color:#b2c4d4;line-height:1.7}footer{border-top:1px solid #1b3547;max-width:100%;padding:38px max(30px,calc((100vw - 1170px)/2));display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap}.footer-brand img{width:46px}.footer-links{display:flex;gap:22px;font-size:12px;color:#b2c4d4}footer small{color:#7890a5;font-size:11px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes float{50%{transform:translateY(-12px) rotate(8deg)}}@keyframes load{50%{transform:translateY(9px)}}@media(max-width:760px){.topbar{height:68px;padding:0 15px;gap:8px}.brand{font-size:9px;gap:5px;letter-spacing:.2px}.brand img{width:35px;height:35px}nav{gap:12px;font-size:11px}.lang{padding:7px}.hero-art{height:240px;background-size:auto 100%;background-position:center}.hero-bottom{padding-bottom:60px}.hero h1{letter-spacing:-1px}.section{padding:65px 18px}.project-grid,.about-inner{grid-template-columns:1fr}.about-inner{padding:65px 20px;gap:15px}.contact-panel{padding:30px;align-items:flex-start;flex-direction:column}.card-art{height:285px}footer{padding:30px 20px}}@media(max-width:400px){.brand span{display:none}nav{gap:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.real-phone{overflow:hidden}.real-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.truck .card-art-title{z-index:2;text-shadow:0 3px 16px #000}

.legal-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:15px 20px 22px;font-size:12px}.legal-links a{color:#a6c7db}.legal-links a:hover{color:#44d9f2}

/* Flag icons rendered as SVG, independent of Windows emoji fonts */
.language-flag{width:23px;height:15px;object-fit:cover;vertical-align:-2px;display:inline-block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.24);margin-right:5px}

/* v10 — calmer desktop proportions inspired by the 80% browser preview.
   Mobile retains the original comfortable tap targets and text sizes. */
@media (min-width: 761px) {
  .topbar{height:66px;padding-inline:clamp(20px,4.4vw,80px)}
  .brand img{width:43px;height:43px}
  .brand{font-size:11px}
  nav{gap:32px;font-size:13px}
  .lang{padding:8px 12px}
  .hero-art{height:clamp(270px,29vw,465px)}
  .hero-bottom{padding:4px 20px 72px}
  .hero-line{height:45px;margin:-10px auto 18px}
  .hero h1{font-size:clamp(38px,4.5vw,70px);margin:19px auto;letter-spacing:-2px}
  .lead{font-size:clamp(15px,1.15vw,17px);line-height:1.7;margin-bottom:23px}
  .primary{padding:13px 21px;gap:18px;border-radius:8px}
  .section{max-width:1150px;padding:72px 30px}
  .section-heading{margin-bottom:36px}
  .section h2,.about-section h2{font-size:clamp(32px,3.25vw,49px)}
  .project-grid{gap:22px}
  .card-art{height:275px}
  .card-body{padding:26px}
  .card-body h3{font-size:27px}
  .card-body p{min-height:75px}
  .about-inner{padding:76px 30px;gap:65px}
  .contact-panel{padding:46px}
  footer{padding-top:30px;padding-bottom:30px}
}

/* v12: show the complete home banner without cropping its lower logo text. */
@media (min-width: 761px) {
  .hero-art {
    height: auto;
    aspect-ratio: 2048 / 682;
    background-size: 100% 100%;
    background-position: center;
  }
}

/* v13: 16% smaller desktop banner, preserving the complete artwork and its proportions. */
@media (min-width: 761px) {
  .hero-art {
    width: 84%;
    margin-inline: auto;
    height: auto;
    aspect-ratio: 2048 / 682;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* Clickable project cards */
.project-card { cursor: pointer; }
.project-card:focus-visible { outline: 3px solid #31c9ed; outline-offset: 4px; }

/* v19 — contact form */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:clamp(28px,5vw,75px)}
.contact-direct{margin-top:28px;overflow-wrap:anywhere}.contact-direct a{color:#67dff1;font-weight:700}.contact-direct a:hover{text-decoration:underline}
.contact-form{display:flex;flex-direction:column;gap:10px;min-width:0}.contact-form label{font-size:13px;font-weight:700;color:#dceaf5;margin-top:7px}.contact-form input:not([type=hidden]),.contact-form textarea{width:100%;border:1px solid #3a6178;border-radius:9px;background:#071827;color:#fff;padding:13px 15px;font:inherit;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:#48d5e9;box-shadow:0 0 0 3px #48d5e926}.contact-form textarea{resize:vertical;min-height:130px}.contact-form .primary{border:0;cursor:pointer;align-self:flex-start;margin-top:10px}.contact-form .form-note{font-size:12px;color:#a9c0d2;line-height:1.6;margin:7px 0 0}.contact-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr;gap:20px}.contact-form .primary{width:100%}}

/* v21 — validated captcha and inline confirmation */
.contact-form .h-captcha{margin-top:12px;max-width:100%}.contact-form .captcha-help{font-size:12px;color:#a9c0d2;margin:0 0 3px}.contact-form .form-status{border-radius:9px;padding:13px 15px;margin:8px 0 0;font-size:14px;line-height:1.5}.contact-form .form-status[hidden]{display:none}.contact-form .form-status.success{background:#103b31;border:1px solid #3a9d7c;color:#c5fbe6}.contact-form .form-status.error{background:#47252b;border:1px solid #bf6470;color:#ffe1e5}.contact-form .primary:disabled{opacity:.65;cursor:wait;transform:none}.contact-form .form-note a{color:#67dff1;text-decoration:underline}