:root{
    --navy-deep:   #060f24;
    --navy-base:   #0a1e3f;
    --navy-mid:    #12294f;
    --line:        rgba(200,215,240,0.10);
    --line-strong: rgba(200,215,240,0.22);
    --ink:         #f2f5fa;
    --muted:       #8ba0c4;
    --muted-dim:   #5c6f92;
    --orange:      #f15a22;
    --orange-dim:  rgba(241,90,34,0.35);
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:
      radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(241,90,34,0.08), transparent 60%),
      radial-gradient(ellipse 900px 600px at 100% 110%, rgba(60,100,180,0.10), transparent 55%),
      var(--navy-base);
    color:var(--ink);
    font-family:'Archivo', sans-serif;
    overflow-x:hidden;
    min-height:100vh;
  }

  /* blueprint grid */
  .grid-fine, .grid-coarse{
    position:fixed; inset:0; pointer-events:none; z-index:0;
  }
  .grid-fine{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 40%, transparent 85%);
    opacity:0.9;
  }
  .grid-coarse{
    background-image:
      linear-gradient(var(--line-strong) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
    background-size: 168px 168px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%);
    opacity:0.7;
  }

  /* corner registration marks, like a drawing sheet */
  .crop{
    position:fixed; width:26px; height:26px; z-index:2; opacity:0.55;
  }
  .crop::before, .crop::after{ content:''; position:absolute; background:var(--muted); }
  .crop::before{ width:100%; height:1px; top:50%; }
  .crop::after{ height:100%; width:1px; left:50%; }
  .crop.tl{ top:28px; left:28px; }
  .crop.tr{ top:28px; right:28px; }
  .crop.bl{ bottom:28px; left:28px; }
  .crop.br{ bottom:28px; right:28px; }

  .sheet-label{
    position:fixed; z-index:2;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--muted-dim);
  }
  .sheet-label.top-left{ top:34px; left:64px; }
  .sheet-label.top-right{ top:34px; right:64px; text-align:right; }
  .sheet-label.bottom-left{ bottom:34px; left:64px; }
  .sheet-label.bottom-right{ bottom:34px; right:64px; text-align:right; }
  .sheet-label .dim{ color:var(--muted); }
  .sheet-label .dot{ color:var(--orange); }

  main{
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding: 140px 24px 120px;
    text-align:center;
  }

  .logo{
    width:min(300px, 62vw);
    height:auto;
    opacity:0;
    filter: drop-shadow(0 0 40px rgba(241,90,34,0.10));
    animation: rise 0.9s cubic-bezier(.19,1,.22,1) 0.15s forwards;
  }

  .beam{
    width:64px; height:4px; background:var(--orange);
    margin: 30px 0 26px;
    transform: skewX(-22deg);
    opacity:0;
    animation: rise 0.7s cubic-bezier(.19,1,.22,1) 0.55s forwards;
  }

  h1{
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-0.01em;
    margin:0 0 20px;
    max-width: 15ch;
    opacity:0;
    animation: rise 0.8s cubic-bezier(.19,1,.22,1) 0.7s forwards;
  }
  h1 span{ color:var(--orange); }

  .sub{
    font-family:'IBM Plex Mono', monospace;
    font-size:15px;
    line-height:1.7;
    color:var(--muted);
    max-width:46ch;
    margin:0 0 46px;
    opacity:0;
    animation: rise 0.8s cubic-bezier(.19,1,.22,1) 0.9s forwards;
  }

  .notify{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
    opacity:0;
    animation: rise 0.8s cubic-bezier(.19,1,.22,1) 1.1s forwards;
  }
  .notify input{
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line-strong);
    color:var(--ink);
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    padding:15px 18px;
    border-radius:2px;
    width:300px;
    max-width:64vw;
    outline:none;
    transition: border-color .2s ease, background .2s ease;
  }
  .notify input::placeholder{ color:var(--muted-dim); }
  .notify input:focus{ border-color:var(--orange); background:rgba(255,255,255,0.05); }

  .notify button{
    background:var(--orange);
    color:#0a1120;
    border:none;
    font-family:'Archivo', sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:0.02em;
    padding:15px 26px;
    border-radius:2px;
    cursor:pointer;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  }
  .notify button:hover{ background:#ff6a30; box-shadow:0 8px 24px rgba(241,90,34,0.30); }
  .notify button:active{ transform: translateY(1px); }
  .notify button:focus-visible, .notify input:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

  .form-note{
    margin-top:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--muted-dim);
    min-height:16px;
    opacity:0;
    animation: rise 0.8s cubic-bezier(.19,1,.22,1) 1.25s forwards;
  }

  .contact-row{
    margin-top:64px;
    display:flex; gap:34px; flex-wrap:wrap; justify-content:center;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--muted);
    opacity:0;
    animation: rise 0.8s cubic-bezier(.19,1,.22,1) 1.4s forwards;
  }
  .contact-row a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease; }
  .contact-row a:hover{ color:var(--ink); border-color:var(--orange); }
  .contact-row span.sep{ color:var(--muted-dim); }

  @keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  }

  footer{
    position:relative; z-index:1;
    text-align:center;
    padding: 0 24px 40px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.05em;
    color:var(--muted-dim);
  }

  @media (max-width:640px){
    .sheet-label.top-left, .sheet-label.top-right,
    .sheet-label.bottom-left, .sheet-label.bottom-right{ font-size:9.5px; }
    .sheet-label.top-right, .sheet-label.bottom-right{ display:none; }
    main{ padding-top:110px; }
    .contact-row{ flex-direction:column; gap:12px; }
  }