/* PerouzClouds professional landing: dark navy + magenta halftone motif */
:root{
  --bg:#0c1024;
  --ink:#e8eef7;
  --muted:#9fb0c0;
  --line:#1d2441;
  --accent:#ff2d55;      /* magenta/red accent similar to reference */
  --accent-2:#ff6a3d;    /* warm red/orange secondary */
  --brand:#cfeef7;
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 80% -20%, #13193a 0%, #0c1024 60%) fixed;
  font:16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.shell{max-width:1200px; margin:0 auto; padding:0 28px}

a{text-decoration:none; color:inherit}
a[aria-disabled="true"]{opacity:.6; pointer-events:none}

/* NAV */
.nav{
  height:72px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.brand__mark{display:block; filter: drop-shadow(0 6px 12px rgba(255,45,85,.22));}
.brand__name{color:#fff; font-size:18px}
.nav__toggle{display:none; background:transparent; border:0; color:var(--ink)}
.nav__links{display:flex; align-items:center; gap:26px; font-weight:600; color:var(--muted)}
.nav__links a:hover{color:#fff}
.nav__links .search{display:inline-flex; align-items:center; padding:6px 8px; border-radius:10px; background:transparent}
@media (max-width:980px){
  .nav__toggle{display:inline-flex}
  .nav__links{position:absolute; top:72px; left:0; right:0; padding:18px 28px; background:#0e1430; border-bottom:1px solid var(--line); display:none}
  .nav__links.is-open{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
}

/* HERO */
.hero{
  display:grid; gap:40px; align-items:center;
  grid-template-columns: 1.05fr .95fr;
  padding:64px 28px 56px;
}
@media (max-width:980px){ .hero{grid-template-columns:1fr; padding:36px 20px} }

.hero__copy h1{
  margin:0 0 14px;
  font-size:clamp(36px, 6vw, 64px);
  line-height:1.1; color:#fff;
}
.strong{font-weight:900}
.lead{color:var(--muted); margin:0 0 24px; max-width:62ch}

.actions{display:flex; gap:14px; margin:8px 0 26px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:999px; font-weight:800; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14); color:#fff; background:transparent;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; box-shadow:0 12px 36px rgba(255,45,85,.28)}
.btn--primary:hover{box-shadow:0 18px 48px rgba(255,45,85,.36)}

.dots-indicator{display:flex; gap:8px; align-items:center; margin-top:18px}
.dot{width:10px; height:10px; border-radius:999px; background:#2a345e; display:inline-block}
.dot.is-active{background:#fff}

.id-tag{margin-top:16px; font-size:12px; color:#7b8aa6; letter-spacing:.3px}

/* ART */
.hero__art{
  position:relative; min-height:360px;
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  background: radial-gradient(1200px 700px at 90% -30%, rgba(255,45,85,.15), transparent 60%);
}
.hero__art img{display:block; width:100%; height:auto;}

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  height:72px; display:flex; align-items:center; justify-content:space-between;
  color:#9fb0c0; font-size:14px;
}
.footer a{color:inherit}
.footer a:hover{color:#fff}