@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #02090d;
  --text: #f5fbfa;
  --muted: #91a8aa;
  --accent: #00e5c2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background:var(--bg); }
body {
  margin:0; min-width:320px; overflow-x:hidden; background:var(--bg); color:var(--text);
  font-family:Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
.hero {
  min-height:900px; height:min(100vh,1020px); position:relative; overflow:hidden;
  isolation:isolate; background:#02090d;
}
.hero::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-18%; top:34%; width:48%; height:54%;
  background:radial-gradient(ellipse at 20% 55%, rgba(0,78,74,.15) 0%, rgba(0,47,46,.07) 43%, transparent 76%);
}
.hero::after {
  content:""; position:absolute; z-index:2; pointer-events:none; left:0; right:0; bottom:-1px;
  height:38%; background:linear-gradient(to bottom,rgba(2,9,13,0) 0%,rgba(2,9,13,.20) 30%,rgba(2,9,13,.72) 70%,#02090d 100%);
}
.hero-header {
  position:relative; z-index:8; width:min(1500px,calc(100% - 100px)); margin:0 auto;
  padding-top:34px; display:flex; justify-content:space-between; align-items:flex-start;
}
.brand { display:block; width:clamp(190px,17vw,250px); line-height:0; }
.brand img { display:block; width:100%; height:auto; position:relative; z-index:2; filter:none; }
.header-actions { display:flex; align-items:center; gap:22px; }
.header-contact {
  display:inline-flex; align-items:center; gap:13px; padding:10px 17px;
  border:1px solid rgba(0,229,194,.85); border-radius:5px; color:var(--accent);
  text-decoration:none; font-size:11px; line-height:1; font-weight:700; letter-spacing:.13em;
}
.header-contact span:last-child {
  display:grid; place-items:center; width:20px; height:20px; border-radius:4px;
  background:var(--accent); color:#00120f; font-size:15px; letter-spacing:0;
}
.language-switch { display:flex; align-items:center; gap:10px; color:rgba(0,229,194,.7); font-size:13px; letter-spacing:.08em; }
.lang-button {
  width:auto; min-width:0; padding:5px 1px; border:0; background:transparent;
  color:#b5c7c7; font:700 13px Manrope,Arial,sans-serif; letter-spacing:.08em; cursor:pointer;
}
.lang-button.is-active,.lang-button:hover { color:var(--accent); }
.market-chart {
  position:absolute; z-index:1; right:-1%; top:13%; width:73%; height:62%;
  overflow:hidden; opacity:.94;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 10%,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 10%,#000 34%);
}
.market-chart img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.market-chart svg { width:100%; height:100%; overflow:visible; }
.hero-content {
  position:relative; z-index:4; width:min(1500px,calc(100% - 120px)); margin:0 auto;
  padding-top:clamp(125px,12.5vh,165px);
}
h1 {
  margin:0; max-width:690px; font-size:clamp(64px,6.1vw,92px); line-height:.99;
  letter-spacing:-.065em; font-weight:500; text-shadow:0 2px 24px rgba(0,0,0,.2);
}
h1 span { color:#d5efed; }
.feature-row {
  position:absolute; z-index:5; left:50%; bottom:7.5%; transform:translateX(-50%);
  width:min(1320px,calc(100% - 120px)); display:grid; grid-template-columns:repeat(3,1fr);
}
.feature {
  min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:15px; color:#edf8f7; font-size:clamp(16px,1.65vw,24px); font-weight:500; text-align:center;
}
.feature + .feature { border-left:1px solid rgba(0,229,194,.68); }
.feature svg {
  width:60px; height:60px; fill:none; stroke:var(--accent); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 10px rgba(0,229,194,.55));
}
.feature:first-child svg rect { fill:rgba(0,229,194,.10); stroke:var(--accent); }
.hero-glow { display:none; }
.contact-section {
  position:relative; z-index:3; width:min(1180px,calc(100% - 96px)); margin:0 auto;
  padding:112px 0 118px; display:grid; grid-template-columns:.82fr 1.18fr; gap:10%;
  background:var(--bg);
}
.eyebrow { margin:0 0 22px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.24em; }
h2 { margin:0; font-size:clamp(34px,4vw,48px); line-height:1.15; font-weight:500; letter-spacing:-.05em; }
.section-intro > p:last-child { margin-top:18px; color:var(--muted); font-size:14px; }
.contact-form { display:flex; flex-direction:column; gap:22px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form label:not(.hp) { display:flex; flex-direction:column; gap:10px; color:#b6c6c6; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
input,textarea {
  width:100%; border:1px solid rgba(128,167,169,.22); border-radius:0; outline:none; background:#050d11;
  padding:14px 15px; color:var(--text); font:14px Manrope,Arial,sans-serif; transition:border-color .2s;
}
input { height:48px; }
textarea { min-height:125px; resize:vertical; }
input:focus,textarea:focus { border-color:var(--accent); }
.form-bottom { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.form-note { margin:0; color:#718587; font-size:11px; }
button[type="submit"] {
  flex:none; border:0; background:var(--accent); color:#00150f; padding:16px 20px;
  font:700 10px Manrope,Arial,sans-serif; letter-spacing:.12em; cursor:pointer;
}
button[type="submit"] span { margin-left:18px; font-size:15px; }
.hp { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-status { min-height:18px; margin:14px 0 0; color:var(--accent); font-size:12px; }
footer {
  border-top:1px solid rgba(0,222,199,.18); min-height:76px; padding:0 max(48px,calc((100% - 1180px)/2));
  display:flex; justify-content:space-between; align-items:center; color:#708487; font-size:10px; letter-spacing:.13em;
  background:var(--bg);
}
@media (max-width:760px) {
  .hero {
    height:auto; min-height:0; max-height:none; padding-bottom:0;
    background:#02090d !important;
  }
  .hero::before {
    left:-30%; top:24%; width:82%; height:48%;
    background:radial-gradient(ellipse at 18% 52%, rgba(0,78,74,.16) 0%, rgba(0,47,46,.07) 42%, transparent 76%);
  }
  .hero::after {
    height:210px;
    background:linear-gradient(to bottom,rgba(2,9,13,0) 0%,rgba(2,9,13,.24) 38%,rgba(2,9,13,.78) 78%,#02090d 100%);
  }
  .hero-header { width:calc(100% - 40px); padding-top:24px; align-items:center; }
  .brand { width:min(43vw,180px); }
  .header-actions { gap:12px; }
  .header-contact { gap:7px; padding:8px 9px; font-size:9px; letter-spacing:.08em; }
  .header-contact span:last-child { width:17px; height:17px; font-size:13px; }
  .language-switch { gap:6px; font-size:11px; }
  .lang-button { font-size:11px; }
  .market-chart {
    top:30%; right:-30%; width:126%; height:42%; opacity:.78;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 16%,#000 48%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 16%,#000 48%);
  }
  .hero-content { width:calc(100% - 48px); padding-top:145px; }
  h1 { font-size:clamp(46px,11.5vw,66px); line-height:1.02; }
  .feature-row {
    position:relative; left:auto; bottom:auto; transform:none;
    width:calc(100% - 48px); margin:250px auto 0;
    display:flex; flex-direction:column; gap:0;
  }
  .feature { min-height:116px; justify-content:flex-start; border-right:0; border-bottom:1px solid rgba(0,229,194,.34); }
  .feature:last-child { border-bottom:0; }
  .contact-section {
    width:100%; margin:0; padding:90px 24px 100px;
    background:#02090d !important;
  }
}

@media (max-width:380px) {
  .brand { width:36vw; }
  .hero-header { width:calc(100% - 30px); }
  .header-actions { gap:8px; }
  .header-contact { padding:7px 7px; font-size:8px; }
  .language-switch { gap:4px; }
  .hero-content,.feature-row,.contact-section { width:calc(100% - 40px); }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *{transition:none!important;} }

/* Prevent the decorative SVG/filter from creating a horizontal page offset. */
html, body { max-width:100%; overflow-x:clip; }
.hero-content { padding-left:0; }
@media (min-width:761px) {
  .hero-content { padding-left:0; }
  .market-chart { max-width:76%; }
}


/* v16: isolated brand, restrained glow and seamless section transition. */
.hero-header, .brand { isolation:isolate; }
.brand { z-index:9; }
@media (max-width:760px) {
  .hero { background:#02090d !important; }
  .hero::before { top:34% !important; height:48% !important; }
  .hero::after { height:250px !important; }
  .brand, .brand img { filter:none !important; }
  .market-chart { opacity:.61 !important; }
  .contact-section { background:#02090d !important; }
}

/* v17: continuous dark canvas on mobile and chart as a composed visual asset. */
html, body { background:#02090d; }
@media (max-width:760px) {
  body, main, .hero, .contact-section { background-color:#02090d !important; }
  .hero { overflow:hidden; }
  .brand, .brand img { filter:none !important; }
}


/* v18: higher-resolution chart asset and a deliberately reflowed mobile layout. */
.market-chart img { width:100%; height:100%; object-fit:cover; object-position:center; }
.feature:first-child svg rect { fill:rgba(0,229,194,.10); stroke:var(--accent); }

@media (max-width:760px) {
  .hero {
    min-height:0;
    height:auto;
    padding:0 0 34px;
    overflow:hidden;
  }
  .hero-header {
    width:calc(100% - 36px);
    padding-top:22px;
    align-items:center;
    gap:12px;
  }
  .brand { width:clamp(128px,38vw,172px); flex:0 1 auto; }
  .header-actions { gap:10px; flex:0 0 auto; }
  .header-contact { padding:9px 10px; font-size:9px; }
  .language-switch { gap:6px; }
  .lang-button { font-size:11px; }
  .hero-content {
    width:calc(100% - 44px);
    padding-top:clamp(76px,12vh,112px);
  }
  h1 {
    max-width:520px;
    font-size:clamp(43px,10.2vw,66px);
    line-height:1.04;
    letter-spacing:-.065em;
  }
  .market-chart {
    top:31%;
    right:-27%;
    left:auto;
    width:132%;
    height:auto;
    aspect-ratio:936 / 600;
    opacity:.68;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .market-chart img {
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .hero::after {
    height:220px;
    background:linear-gradient(to bottom,transparent 0%,rgba(2,9,13,.35) 40%,#02090d 100%);
  }
  .feature-row {
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:calc(100% - 44px);
    margin:clamp(82px,13vh,126px) auto 0;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .feature {
    min-height:106px;
    padding:20px 8px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:25px;
    text-align:left;
    font-size:18px;
    line-height:1.3;
  }
  .feature + .feature {
    border-left:0;
    border-top:1px solid rgba(0,229,194,.34);
  }
  .feature svg {
    flex:0 0 52px;
    width:52px;
    height:52px;
    stroke-width:2.7;
    filter:drop-shadow(0 0 7px rgba(0,229,194,.38));
  }
  .feature:first-child svg rect { fill:rgba(0,229,194,.10); stroke:var(--accent); }
  .contact-section {
    width:100%;
    margin:0;
    padding:76px 22px 82px;
    display:grid;
    grid-template-columns:1fr;
    gap:38px;
  }
  .form-row { grid-template-columns:1fr; gap:18px; }
  .form-bottom { align-items:flex-start; flex-direction:column; }
  footer {
    min-height:70px;
    padding:18px 22px;
    gap:12px;
    flex-wrap:wrap;
  }
}
@media (max-width:380px) {
  .hero-header { width:calc(100% - 28px); }
  .brand { width:118px; }
  .header-actions { gap:7px; }
  .header-contact { padding:8px 7px; font-size:8px; }
  .language-switch { gap:4px; }
  .hero-content,.feature-row { width:calc(100% - 40px); }
  .feature { gap:18px; font-size:16px; }
  .feature svg { flex-basis:48px; width:48px; height:48px; }
}


/* v19: corrected chart asset URL, cache-busted stylesheet and tighter mobile section rhythm. */
@media (max-width:760px) {
  .hero { padding-bottom:18px; }
  .feature-row { margin-top:clamp(64px,9vh,92px); }
  .feature { min-height:96px; padding-top:16px; padding-bottom:16px; }
  .contact-section { padding-top:64px; padding-bottom:72px; }
}


/* v22: chart follows the headline in mobile flow, never overlays the text. */
.market-chart img { image-rendering:auto; }
@media (max-width:760px) {
  .market-chart {
    position:relative !important;
    z-index:1 !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    width:calc(100% + 44px) !important;
    height:auto !important;
    aspect-ratio:936 / 600 !important;
    margin:22px 0 0 -22px !important;
    overflow:hidden;
    opacity:.78 !important;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.96) 72%, transparent 100%) !important;
    mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.96) 72%, transparent 100%) !important;
  }
  .market-chart img {
    display:block;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  .feature-row {
    position:relative !important;
    z-index:5 !important;
    margin:14px auto 0 !important;
  }
}