*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#01060b}
body{font-family:"Segoe UI",Arial,sans-serif;color:#f4f7f8}
.hero-stage{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:480px;display:grid;grid-template-columns:40% 60%;grid-template-rows:82px minmax(0,1fr);background:radial-gradient(ellipse at 55% 90%,#073049 0,transparent 65%),#01080e}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;opacity:.85}
.site-header{grid-column:1/-1;position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:18px clamp(28px,7vw,150px) 0;border-bottom:1px solid rgba(139,171,190,.22);background:linear-gradient(180deg,rgba(1,6,11,.75),rgba(1,6,11,.15))}
.hero-copy{grid-column:1;grid-row:2;position:relative;z-index:2;align-self:center;text-align:center;padding:0 10px 9vh 4vw}
.hero-emblem{width:min(17vw,27vh,275px);aspect-ratio:1;margin:0 auto clamp(20px,4vh,44px);overflow:hidden;border-radius:50%}
.hero-emblem img{display:block;width:100%;height:100%;transform:translate(-1.455%,-2.909%) scale(1.12);clip-path:circle(42% at 51.455% 52.909%)}
.hero-copy h1{margin:0;font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:clamp(26px,3.25vw,66px);font-weight:400;line-height:1.12;letter-spacing:.1em;white-space:nowrap;text-shadow:0 2px 9px #000}
.hero-copy p{margin:16px auto 0;max-width:36em;font-size:clamp(14px,1.2vw,23px);line-height:1.5;letter-spacing:.025em;text-wrap:balance;text-shadow:0 2px 7px #000}
.hero-product{grid-column:2;grid-row:2;min-width:0;min-height:0;display:flex;justify-content:center;align-items:center;padding:3vh 2.5vw 3vh 0}
.program-screenshot{display:block;width:100%;height:auto;aspect-ratio:1244/795;overflow:hidden;border-radius:6px;user-select:none;box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 65px rgba(16,141,178,.12);outline:1px solid rgba(148,206,218,.18)}
a:focus-visible,button:focus-visible{outline:2px solid #28e1ef;outline-offset:6px}
.brand-block{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:320px}
.brand-name{text-decoration:none;color:rgba(245,247,250,.98);font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:28px;font-weight:500;line-height:1;letter-spacing:.26em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 12px rgba(255,255,255,.05)}
.brand-line{position:relative;width:248px;height:8px}
.brand-line::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:188px;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(34,214,236,.02),rgba(34,214,236,.5) 22%,rgba(34,214,236,1) 50%,rgba(34,214,236,.5) 78%,rgba(34,214,236,.02));box-shadow:0 0 10px rgba(34,214,236,.18)}
.site-nav{display:flex;align-items:center;gap:46px;padding-top:2px}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:rgba(240,243,246,.92);font-size:17px;font-weight:400;line-height:1;letter-spacing:.01em}
.nav-link.is-active{color:#2be4f1}
.nav-link.is-active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:42px;height:2px;border-radius:999px;background:#2be4f1}
.contact-link{color:rgba(240,243,246,.95)}
.contact-link svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;flex:0 0 auto}


.contact-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.68);z-index:20}
.contact-modal.is-open{display:flex}
.contact-panel{width:430px;border-radius:18px;padding:24px;background:rgba(7,13,18,.96);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.48)}
.contact-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.contact-top h2{margin:0;color:#f3f5f7;font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:30px;font-weight:500;letter-spacing:.06em}
.close-modal{border:0;background:transparent;color:#d7dce2;font-size:30px;line-height:1;cursor:pointer}
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form label{display:flex;flex-direction:column;gap:6px;color:#b9c2cb;font-size:13px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#0b131a;color:#f5f7f9;padding:11px 12px;font:inherit}
.contact-form textarea{min-height:110px;resize:vertical}
.form-actions{display:flex;justify-content:flex-end}
.send-btn{border:0;border-radius:10px;padding:10px 18px;background:#24d9ed;color:#041117;font-weight:600;cursor:pointer}


.contact-modal{position:fixed;overflow-y:auto;padding:20px}
.contact-panel{width:min(430px,100%);max-height:100%;overflow-y:auto}
@media(max-width:1000px){.site-header{padding-inline:28px}.brand-block{min-width:0}.brand-name{font-size:23px}.site-nav{gap:24px}.hero-copy{padding-left:3vw}.hero-copy h1{font-size:3.25vw}}
@media(max-width:700px){.hero-stage{height:auto;min-height:100svh;grid-template-columns:1fr;grid-template-rows:auto auto auto}.site-header{padding:20px 22px 24px;flex-direction:column;gap:25px;align-items:center}.brand-block{align-items:center}.brand-name{font-size:23px}.brand-line{width:240px}.site-nav{gap:26px}.nav-link{font-size:15px}.nav-link.is-active::after{bottom:-10px}.hero-copy{grid-column:1;grid-row:2;padding:40px 22px 12px}.hero-emblem{width:150px;margin-bottom:22px}.hero-copy h1{font-size:clamp(27px,7.3vw,46px)}.hero-copy p{font-size:16px;max-width:28em;margin-top:12px}.hero-product{grid-column:1;grid-row:3;padding:20px 14px 36px}.program-screenshot{height:auto}.hero-bg{object-position:center bottom}}
@media(min-width:701px) and (max-height:600px){.hero-stage{grid-template-rows:70px minmax(0,1fr)}.site-header{padding-top:12px}.hero-copy{padding-bottom:3vh}.hero-emblem{width:23vh;margin-bottom:14px}.hero-copy h1{font-size:min(3.25vw,8vh)}.hero-copy p{margin-top:10px;font-size:14px}}

/* Abstract atmosphere remains forgiving across monitor sizes. */
.hero-stage{background:#01080e;grid-template-columns:38% 62%}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(1,8,14,.2),transparent 25%,rgba(1,8,14,.12)),radial-gradient(ellipse at 74% 55%,rgba(0,165,204,.06),transparent 65%)}
.hero-product{position:relative;align-items:center;padding:3vh 3vw 3vh 1vw}
.program-screenshot{max-width:calc((100svh - 82px - 6vh) * 1244 / 795)}
.hero-copy{padding-left:3vw;padding-bottom:3vh}
.hero-copy h1{font-size:clamp(26px,3.1vw,66px)}
@media(min-width:701px) and (max-height:600px){.program-screenshot{max-width:calc((100svh - 70px - 6vh) * 1244 / 795)}}
@media(max-width:700px){
  .hero-stage{grid-template-columns:1fr}
  .hero-bg{object-position:65% center}
  .hero-copy{padding:36px 22px 16px}
  .hero-copy h1{font-size:clamp(27px,7.3vw,46px)}
  .hero-product{padding:20px 18px 44px}
  .program-screenshot{max-width:100%}
}

/* Keep the atmosphere muted so the original interface colors lead. */
.hero-bg{filter:saturate(.38);opacity:.75}
.hero-emblem{position:relative;overflow:visible;margin-bottom:clamp(54px,7vh,82px);isolation:isolate}
.hero-emblem img{position:relative;z-index:2}
.emblem-halo{position:absolute;inset:-48%;border-radius:50%;background:radial-gradient(circle,rgba(32,143,166,.16),rgba(12,79,99,.07) 45%,transparent 70%);pointer-events:none}
.emblem-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(24,151,205,.3);border-radius:50%;z-index:3;pointer-events:none}
.emblem-orbit::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#0d87ba;box-shadow:0 0 10px rgba(37,231,242,.3);transform:translate(50%,-50%)}
.emblem-orbit-a{width:132%;height:132%}
.emblem-orbit-a::after{right:14.65%;top:14.65%}
.emblem-orbit-b{width:153%;height:153%;opacity:.72}
.emblem-orbit-b::after{right:93.3%;top:75%;width:5px;height:5px}
.hero-product{isolation:isolate}
.hero-product::before{content:"";position:absolute;inset:4% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 52% 48%,rgba(45,156,181,.18),rgba(29,88,110,.09) 47%,transparent 72%)}
.program-screenshot{outline-color:rgba(160,206,215,.3);box-shadow:0 32px 65px rgba(0,0,0,.65),0 0 42px rgba(105,176,192,.13),0 0 110px rgba(21,104,130,.1)}
@media(max-width:700px){.hero-copy{padding-top:64px}.hero-emblem{margin-bottom:54px}.hero-product::before{inset:0}}
@media(min-width:701px) and (max-height:600px){.hero-emblem{margin-bottom:38px}}

/* A softly lit charcoal rim finishes the capture without obscuring the UI. */
.program-frame{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:calc((100svh - 82px - 6vh - 12px) * 1244 / 795 + 12px);
  padding:5px;
  border:1px solid transparent;
  border-radius:12px;
  background:linear-gradient(165deg,#384b56,#22313b 42%,#1d2c35) padding-box,linear-gradient(165deg,#a3bec9,#658b9e 38%,#54798c 72%,#8baebd) border-box;
  box-shadow:0 0 0 1px rgba(122,170,190,.28),inset 0 0 0 1px rgba(168,199,211,.18),0 34px 70px -18px rgba(0,0,0,.8),0 12px 24px -10px rgba(0,0,0,.65);
}
.program-frame::before{
  content:"";position:absolute;inset:10% -2% -7%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 85%,rgba(47,126,150,.2),rgba(26,78,98,.07) 46%,transparent 70%);
  filter:blur(24px);
}
.program-frame::after{
  content:"";position:absolute;top:-1px;left:8%;right:8%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(183,211,220,.46) 45%,rgba(124,170,187,.25) 75%,transparent);
}
.program-frame .program-screenshot{max-width:none;border-radius:6px;outline:1px solid rgba(0,0,0,.5);box-shadow:none}
@media(min-width:701px) and (max-height:600px){.program-frame{max-width:calc((100svh - 70px - 6vh - 12px) * 1244 / 795 + 12px)}}
@media(max-width:700px){.program-frame{max-width:100%;padding:3px;border-radius:10px}.program-frame::before{inset:10% 0 -5%}}

/* Two quiet outlines echo the emblem's orbits around the software. */
.program-orbit{position:absolute;pointer-events:none;border:1px solid rgba(24,151,205,.3)}
.program-orbit-a{inset:-13px;border-radius:24px}
.program-orbit-b{inset:-26px;border-radius:37px;opacity:.72}
@media(max-width:700px){
  .hero-product{padding:30px 30px 44px}
  .program-orbit-a{inset:-10px;border-radius:19px}
  .program-orbit-b{inset:-20px;border-radius:29px}
}

/* Reduce the complete software presentation to 75% of its previous size. */
.program-frame{width:75%;max-width:calc(((100svh - 82px - 6vh - 12px) * 1244 / 795 + 12px) * .75);padding:3.75px;border-width:.75px;border-radius:9px}
.program-frame .program-screenshot{border-radius:4.5px}
.program-orbit{border-width:.75px}
.program-orbit-a{inset:-9.75px;border-radius:18px}
.program-orbit-b{inset:-19.5px;border-radius:27.75px}
@media(min-width:701px) and (max-height:600px){.program-frame{max-width:calc(((100svh - 70px - 6vh - 12px) * 1244 / 795 + 12px) * .75)}}
@media(max-width:700px){.program-frame{max-width:75%;padding:2.25px;border-radius:7.5px}.program-orbit-a{inset:-7.5px;border-radius:14.25px}.program-orbit-b{inset:-15px;border-radius:21.75px}}

/* Bring the emblem group toward the software and let its orbits breathe. */
@media(min-width:701px){
  .hero-copy{transform:translateX(clamp(18px,2.5vw,64px))}
  .hero-emblem{margin-bottom:clamp(82px,11vh,120px);transform:translateY(18px)}
  .hero-copy h1,.hero-copy p{transform:translateY(18px)}
}
.emblem-orbit-a{width:144%;height:144%}
.emblem-orbit-b{width:170%;height:170%}
.emblem-halo{inset:-30%;z-index:1;background:radial-gradient(circle,rgba(34,225,240,.105),rgba(3,12,19,0) 64%);filter:blur(18px)}
.hero-emblem::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,rgba(20,161,205,.085),transparent 68%);filter:blur(2px);pointer-events:none}
.hero-emblem::after{content:"";position:absolute;inset:4%;z-index:1;border-radius:50%;box-shadow:0 0 18px rgba(25,219,235,.16),0 18px 38px rgba(0,0,0,.48);pointer-events:none}
@media(min-width:701px) and (max-height:600px){.hero-emblem{margin-bottom:52px;transform:translateY(10px)}.hero-copy h1,.hero-copy p{transform:translateY(10px)}}
@media(max-width:700px){.hero-copy{padding-top:76px}.hero-emblem{margin-bottom:72px}}

/* Let the emblem light spill visibly beyond its edge. */
.emblem-halo{inset:-42%;background:radial-gradient(circle,transparent 30%,rgba(35,199,220,.22) 39%,rgba(20,144,181,.15) 48%,rgba(10,86,116,.06) 60%,transparent 72%);filter:blur(12px)}
.hero-emblem::after{box-shadow:0 0 14px rgba(71,224,235,.48),0 0 34px rgba(29,195,220,.34),0 0 72px rgba(15,142,182,.2),0 18px 38px rgba(0,0,0,.35)}