/* COTRUGLI Tech × Rimac Technology — the live room. COTRUGLI blue and metallic gold, Rimac cyan on a drawing grid. */
:root{
  --navy0:#040b20;--navy1:#081638;--navy2:#0d2150;--navy3:#132c66;
  --fg:#f2f5fb;--muted:#a7b4cc;--dim:#6f7f9e;
  --cyan:#05a8db;--cyan2:#45c8f2;--cyan-soft:rgba(5,168,219,.14);--cyan-line:rgba(5,168,219,.28);
  --panel:rgba(255,255,255,.035);--panel2:rgba(255,255,255,.06);--rule:rgba(255,255,255,.09);
  --g1:#f6e3a2;--g2:#d9ad4a;--g3:#a8781f;
  --gold:linear-gradient(180deg,#f7e4a6 0%,#dcb050 46%,#a8781f 72%,#e7c56e 100%);
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --head:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;color:var(--fg);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background-color:var(--navy1);
  background-image:
    linear-gradient(rgba(5,168,219,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,168,219,.045) 1px,transparent 1px),
    radial-gradient(ellipse 120% 80% at 70% -10%,var(--navy3) 0%,var(--navy1) 55%,var(--navy0) 100%);
  background-size:48px 48px,48px 48px,100% 100%;background-attachment:fixed;
}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 32px}}
.goldtext{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}
.kicker{font:600 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan2)}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* co-brand bar */
.cobrand{display:flex;align-items:center;gap:14px 22px;padding:18px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.ct{display:flex;flex-direction:column;gap:5px;text-decoration:none}
.ct .wm{font:600 20px/1 var(--display);letter-spacing:.18em}
.ct .sub{font:500 10px/1 var(--display);letter-spacing:.34em;color:var(--muted)}
.cobrand .x{font:300 26px/1 var(--head);color:var(--dim)}
.cobrand img{height:52px;width:auto;display:block}
@media(max-width:560px){
  .cobrand{flex-direction:column;align-items:flex-start;gap:14px}
  .cobrand .x{display:none}
  .cobrand img{height:auto;width:100%;max-width:380px}
}

/* hero */
.hero{padding:44px 0 26px}
.hero h1{font:700 clamp(34px,6.4vw,64px)/1.04 var(--head);letter-spacing:-.02em;margin:14px 0 16px}
.hero h1 em{font-style:normal;color:var(--cyan2)}
.hero p.lead{font-size:clamp(17px,2.2vw,20px);color:#d3dcee;max-width:680px}

/* cards and form */
.card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--rule);
  border-radius:var(--r);padding:22px;box-shadow:0 30px 80px rgba(2,8,26,.45)}
@media(min-width:720px){.card{padding:30px}}
.step{margin-bottom:24px}
.step>label,.step>.lbl{display:flex;gap:12px;align-items:baseline;font:600 17px/1.3 var(--head);margin-bottom:12px}
.step .n{font:600 12px/1 var(--mono);color:var(--cyan2);letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{cursor:pointer;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 14px;font-size:14.5px;
  background:rgba(255,255,255,.03);transition:background .15s,border-color .15s,color .15s;user-select:none}
.chips label:hover{border-color:var(--cyan-line)}
.chips input:checked+label{background:var(--cyan);border-color:var(--cyan);color:#021027;font-weight:600}
.chips input:focus-visible+label{outline:2px solid var(--cyan2);outline-offset:2px}
@media(max-width:560px){
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .chips label{border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;
    padding:8px 10px;font-size:14px;line-height:1.25}
}
textarea{width:100%;min-height:120px;resize:vertical;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(2,10,30,.45);padding:14px 16px;font-size:16.5px;line-height:1.5}
textarea:focus,input[type=text]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
.count{font:12px var(--mono);color:var(--dim);text-align:right;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;cursor:pointer;
  background:var(--cyan);color:#021027;font:700 17px/1 var(--head);padding:17px 26px;letter-spacing:.01em;
  box-shadow:0 10px 30px rgba(5,168,219,.35);transition:transform .12s,box-shadow .12s;text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(5,168,219,.45)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.22);box-shadow:none}
.btn.wide{width:100%}
.fine{font-size:13.5px;color:var(--muted);margin-top:12px}
.err{color:#ffb4a8;font-size:14.5px;margin-top:10px;min-height:1em}
input[type=text]{border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(2,10,30,.45);padding:14px 16px;
  font:600 22px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;width:100%;max-width:260px}
.gate{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.done{text-align:center;padding:12px 0 4px}
.done .big{font:700 64px/1 var(--head);color:var(--cyan2);margin:10px 0}
.done h2{font:700 24px/1.25 var(--head);margin-bottom:8px}

/* live list on the phone */
.live{margin-top:26px}
.live-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:12px}
.live-head h3{font:600 17px/1.3 var(--head)}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:8px;
  box-shadow:0 0 0 0 rgba(5,168,219,.6);animation:pulse 1.8s infinite;vertical-align:middle}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,168,219,.55)}70%{box-shadow:0 0 0 10px rgba(5,168,219,0)}100%{box-shadow:0 0 0 0 rgba(5,168,219,0)}}
.entry{border-left:2px solid var(--cyan);background:var(--panel);border-radius:0 10px 10px 0;padding:10px 14px;margin-bottom:8px}
.entry .tag{font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan2)}
.entry p{font-size:15px;margin-top:3px}
.entry.ex{border-left-color:rgba(217,173,74,.75);background:rgba(255,255,255,.02)}
.entry .exb{color:var(--g1)}
.entry .meta{font:12px var(--mono);color:var(--dim);margin-top:4px}
.new{animation:arrive .7s cubic-bezier(.2,.8,.2,1)}
@keyframes arrive{from{opacity:0;transform:translateY(14px) scale(.98);box-shadow:0 0 0 2px var(--cyan),0 0 40px rgba(5,168,219,.55)}
  to{opacity:1;transform:none}}

.banner{position:sticky;top:0;z-index:30;background:linear-gradient(90deg,var(--cyan),#2bb8e6);color:#021027;
  text-align:center;padding:12px 16px;font:700 15px/1.3 var(--head)}
.banner a{text-decoration:underline;text-underline-offset:3px}

/* sections */
section.band{padding:64px 0;border-top:1px solid var(--rule)}
section.band h2{font:700 clamp(26px,4vw,40px)/1.12 var(--head);letter-spacing:-.015em;margin:12px 0 14px}
section.band p.intro{color:#d3dcee;max-width:700px;font-size:17.5px}
.ladder{display:grid;gap:14px;margin-top:30px;grid-template-columns:1fr}
@media(min-width:640px){.ladder{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ladder{grid-template-columns:repeat(4,1fr)}}
.rung{position:relative;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:22px 20px 20px;overflow:hidden}
.rung:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);opacity:.8}
.rung .no{font:700 34px/1 var(--head);color:var(--cyan2);opacity:.9}
.rung h3{font:700 18px/1.25 var(--head);margin:12px 0 8px}
.rung p{font-size:15px;color:#cdd6e8}
.rung .get{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.14);font-size:13.5px;color:var(--muted)}
.rung .get b{color:var(--fg);font-weight:600}
.rung.here{border-color:var(--cyan-line);background:linear-gradient(180deg,rgba(5,168,219,.12),rgba(5,168,219,.03))}
.rung.here .flag{position:absolute;top:14px;right:14px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#021027;background:var(--cyan);border-radius:999px;padding:6px 9px}

.days{margin-top:30px;border-top:1px solid var(--rule)}
.day{display:grid;grid-template-columns:62px 1fr;gap:6px 18px;padding:20px 0;border-bottom:1px solid var(--rule)}
@media(min-width:860px){.day{grid-template-columns:80px 1.1fr 1.2fr 1fr;align-items:start}}
.day .d{font:700 40px/1 var(--head);color:var(--cyan2)}
.day .mode{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.14em;padding:5px 8px;border-radius:999px;margin-top:8px;
  border:1px solid rgba(255,255,255,.2);color:var(--muted)}
.day .mode.live{border-color:var(--g2);color:var(--g1)}
.day h3{font:700 18px/1.25 var(--head)}
.day .focus{font-size:14.5px;color:#cdd6e8;margin-top:4px}
.day .make{font-size:14.5px;color:#cdd6e8}
.day .make b{display:block;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.day .mods{font-size:14px}
.day .mods b{display:block;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.day .mods a{display:block;color:var(--cyan2);text-decoration:none;padding:1px 0}
.day .mods a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:859px){.day>div:not(.num){grid-column:2}}

.people{display:grid;gap:14px;margin-top:28px;grid-template-columns:1fr}
@media(min-width:720px){.people{grid-template-columns:1fr 1fr}}
.person{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.person h3{font:700 19px/1.2 var(--head)}
.person .role{font-size:14.5px;color:var(--muted);margin-top:4px}
.person p{font-size:15px;color:#cdd6e8;margin-top:10px}

footer.foot{padding:36px 0 48px;border-top:1px solid var(--rule);color:var(--muted);font-size:14px;display:flex;
  flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer.foot a{text-decoration:none;color:#d3dcee}
footer.foot a:hover{color:var(--fg)}