:root {
  --ink:#2e2e34;
  --muted:#66727a;
  --cyan-dark:#087ca2;
  --line:rgba(12,130,165,.14);
  --mx:0deg;
  --my:0deg;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
html{background:#eef9fd}
body{
  min-height:100svh;min-height:100dvh;overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 14%,rgba(255,190,31,.14),transparent 24rem),
    radial-gradient(circle at 83% 29%,rgba(14,165,207,.18),transparent 27rem),
    linear-gradient(145deg,#fff 0%,#eef9fd 52%,#dff3fa 100%);
}
.page-shell{
  width:100%;height:100svh;height:100dvh;
  display:grid;place-items:center;
  padding:clamp(12px,2vw,28px);
}
.hero{
  width:min(980px,100%);
  height:min(820px,calc(100dvh - clamp(24px,4vw,56px)));
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;justify-items:center;
  gap:clamp(10px,1.5vh,18px);
  padding:clamp(16px,2.2vw,30px);
  border:1px solid var(--line);
  border-radius:clamp(22px,3vw,36px);
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.48));
  box-shadow:0 28px 70px rgba(33,104,128,.11),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand-stage{
  width:min(760px,86vw);
  max-height:55vh;
  display:grid;place-items:center;
  perspective:1000px;
}
.brand-logo{
  display:block;width:100%;max-height:53vh;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  transform:rotateX(var(--my)) rotateY(var(--mx));
  transform-style:preserve-3d;
  will-change:transform;
  filter:drop-shadow(0 18px 25px rgba(6,104,135,.15));
  animation:logo-float 4.6s ease-in-out infinite;
  transition:transform .2s ease-out;
}
.content{
  width:min(760px,96%);
  text-align:center;
  display:grid;justify-items:center;gap:8px;
}
.eyebrow{
  display:inline-flex;padding:5px 12px;
  border:1px solid rgba(7,127,164,.16);
  border-radius:999px;background:rgba(255,255,255,.7);
  color:var(--cyan-dark);
  font-size:clamp(.7rem,1.4vw,.8rem);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
h1{
  margin:0;font-size:clamp(1.45rem,3vw,2.35rem);
  line-height:1.08;letter-spacing:-.035em;text-wrap:balance;
}
.subtitle{
  max-width:650px;margin:0;color:var(--muted);
  font-size:clamp(.88rem,1.7vw,1.03rem);
  line-height:1.5;text-wrap:balance;
}
.contact{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;padding:9px 15px;
  border:1px solid rgba(10,139,177,.18);
  border-radius:13px;color:var(--cyan-dark);
  background:rgba(255,255,255,.72);
  font-size:clamp(.84rem,1.6vw,.96rem);
  font-weight:750;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.contact:hover{
  transform:translateY(-2px);background:#fff;
  box-shadow:0 12px 26px rgba(15,123,155,.12);
}
.ambient{
  position:fixed;border-radius:50%;pointer-events:none;
  filter:blur(4px);animation:drift 9s ease-in-out infinite alternate;
}
.ambient--one{
  width:14px;height:14px;top:16%;left:12%;
  background:rgba(255,184,24,.62);
}
.ambient--two{
  width:20px;height:20px;top:25%;right:11%;
  background:rgba(16,165,209,.28);animation-delay:-3s;
}
@keyframes logo-float{
  0%,100%{transform:translateY(0) rotateX(var(--my)) rotateY(var(--mx))}
  50%{transform:translateY(-9px) rotateX(var(--my)) rotateY(var(--mx))}
}
@keyframes drift{
  from{transform:translate(-7px,-7px) scale(.95)}
  to{transform:translate(12px,14px) scale(1.12)}
}
@media(max-width:720px){
  .page-shell{padding:10px}
  .hero{height:calc(100dvh - 20px);padding:14px 12px;border-radius:22px;gap:8px}
  .brand-stage{width:min(95vw,660px);max-height:47vh}
  .brand-logo{max-height:45vh}
}
@media(max-height:650px){
  .brand-stage{max-height:40vh}
  .brand-logo{max-height:38vh}
  .subtitle{line-height:1.32}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .brand-logo{transform:none!important}
}