:root{
  --bg:#070809;
  --ink:#f3efe6;
  --muted:#b9b1a3;
  --panel:#111418;
  --paper:#efe8d6;
  --pink:#e15a8b;
  --blue:#1e6fa8;
  --cyan:#9fe6e6;
  --lime:#b7ff59;
  --line:rgba(255,255,255,.14);
  --shadow:rgba(0,0,0,.45);
  --max:1180px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(159,230,230,.12), transparent 28%),
    radial-gradient(circle at 85% 35%, rgba(225,90,139,.12), transparent 28%),
    linear-gradient(180deg,#090b0d,#050607 65%,#030303);
  line-height:1.6;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

.wrap{
  width:min(var(--max),calc(100% - 32px));
  margin:0 auto;
}

/* HEADER */

header{
  position:relative;
  z-index:5;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  background:rgba(5,6,7,.82);
  backdrop-filter:blur(8px);
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.brand strong{
  display:block;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.95rem;
}

.brand span{
  color:var(--muted);
  font-size:.9rem;
}

nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

nav a{
  border:1px solid var(--line);
  color:var(--muted);
  padding:8px 13px;
  border-radius:999px;
  font-size:.92rem;
}

nav a:hover{
  color:var(--ink);
  border-color:var(--cyan);
}

/* HERO */

.hero{
  position:relative;
  min-height:720px;
  padding:90px 0 80px;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.32),rgba(0,0,0,.78)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 7px
    );
  pointer-events:none;
}

.hero:after{
  content:"Wait... this is already set up?\A\A$19 Launch Price\ARegular $29\A\AYours forever • No subscriptions";
  white-space:pre-line;
  position:absolute;
  right:6%;
  top:90px;
  width:360px;
  min-height:240px;
  border:5px solid rgba(159,230,230,.55);
  background:rgba(159,230,230,.12);
  transform:rotate(-2deg);
  box-shadow:0 0 35px rgba(159,230,230,.15);
  color:var(--cyan);
  font-size:1.35rem;
  font-weight:bold;
  font-family:"Courier New", monospace;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  text-align:center;
  z-index:4;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:42px;
  align-items:center;
}

.eyebrow{
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:bold;
  margin-bottom:18px;
}

h1{
  font-size:clamp(3rem,8vw,7rem);
  line-height:.86;
  letter-spacing:-.07em;
  margin:0 0 24px;
}

.hero-lead{
  max-width:620px;
  color:var(--muted);
  font-size:1.2rem;
}

.stroke{
  color:var(--pink);
  text-decoration:underline;
  text-decoration-thickness:6px;
  text-underline-offset:8px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.btn{
  display:inline-block;
  padding:13px 20px;
  border-radius:8px;
  border:2px solid var(--ink);
  background:rgba(255,255,255,.05);
  box-shadow:5px 5px 0 rgba(0,0,0,.45);
  font-weight:bold;
}

.btn.primary{
  background:var(--cyan);
  color:#061014;
  border-color:var(--cyan);
}

.btn:hover{
  transform:translateY(-2px);
}

.loop-hero-wrap{
  position:relative;
  min-height:560px;
}

.loop-hero{
  position:absolute;
  right:70px;
  bottom:0;
  width:min(520px,100%);
  filter:drop-shadow(0 22px 22px var(--shadow));
  z-index:3;
}

.speech{
  position:absolute;
  left:0;
  bottom:80px;
  max-width:310px;
  background:var(--paper);
  color:#111;
  padding:20px 24px;
  border:4px solid #111;
  border-radius:28px;
  font-size:1.35rem;
  font-weight:bold;
  transform:rotate(-3deg);
  box-shadow:8px 8px 0 rgba(0,0,0,.35);
  z-index:4;
}

.speech:after{
  content:"";
  position:absolute;
  right:38px;
  bottom:-24px;
  width:38px;
  height:38px;
  background:var(--paper);
  border-right:4px solid #111;
  border-bottom:4px solid #111;
  transform:rotate(35deg);
}

/* WORKTABLE STRIP */

.worktable{
  position:relative;
  z-index:3;
  margin-top:-55px;
}

.table-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    #12100d;
  border:1px solid var(--line);
  box-shadow:0 22px 40px rgba(0,0,0,.35);
  padding:30px;
  border-radius:18px;
  transform:rotate(.4deg);
}

.process-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.process-step{
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.25);
  padding:24px;
  min-height:150px;
}

.process-step strong{
  display:block;
  font-size:2rem;
  line-height:1;
  margin-bottom:12px;
}

.process-step:nth-child(1) strong{color:var(--cyan);}
.process-step:nth-child(2) strong{color:var(--pink);}
.process-step:nth-child(3) strong{color:var(--lime);}

.process-step p{
  color:var(--muted);
  margin:0;
}

/* SECTIONS */

section{
  padding:80px 0;
}

.section-head{
  max-width:760px;
  margin-bottom:30px;
}

h2{
  font-size:clamp(2rem,5vw,4rem);
  line-height:.95;
  letter-spacing:-.05em;
  margin:0 0 16px;
}

.muted{
  color:var(--muted);
}

/* LOOP BREAK */

.loop-break{
  position:relative;
  padding:34px 0;
  overflow:hidden;
}

.loop-break-inner{
  display:flex;
  align-items:center;
  gap:24px;
  background:rgba(225,90,139,.08);
  border-left:6px solid var(--pink);
  padding:22px;
}

.loop-break img{
  width:120px;
  flex:0 0 auto;
  filter:drop-shadow(0 12px 12px var(--shadow));
}

.loop-break span{
  font-size:1.5rem;
  font-weight:bold;
}

/* MODULE BOARD */

.module-board{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)),
    #10151a;
  border:1px solid var(--line);
  border-radius:20px;
  padding:34px;
  overflow:visible; /* changed from hidden so rotated cards and full rows are not clipped */
}

.module-board:before{
  content:"";
  position:absolute;
  inset:24px;
  border:2px solid rgba(159,230,230,.18);
  transform:rotate(-1deg);
  pointer-events:none;
}

.modules{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:start; /* prevents uneven card clipping/wrap issues */
}

.note{
  background:#eee4cc;
  color:#111;
  padding:22px;
  min-height:170px;
  border:3px solid #111;
  box-shadow:8px 8px 0 rgba(0,0,0,.35);
}

.note:nth-child(odd){
  transform:rotate(-1.6deg);
}

.note:nth-child(even){
  transform:rotate(1.2deg);
}

.note h3{
  margin:0 0 10px;
  font-size:1.35rem;
}

.note p{
  margin:0;
}

.note textarea{
  width:100%;
  box-sizing:border-box;
}

.builder-panel .note,
.builder-game-form .note{
  transform:none !important;
}

.builder-markup-source{
  display:none !important;
}

.builder-markup-write{
  display:block;
  min-height:150px;
  margin:0;
  padding:13px 14px;
  border:3px solid rgba(40,22,7,.82);
  background:#ffffff;
  color:#120b05;
  caret-color:#000000;
  font-size:1rem;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  box-sizing:border-box;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.8),
    4px 4px 0 rgba(0,0,0,.16);
}

.builder-markup-write:empty:before{
  content:attr(data-placeholder);
  color:rgba(40,22,7,.58);
  pointer-events:none;
}

.builder-markup-write:focus{
  outline:none;
  border-color:#d94f8a;
  caret-color:#000000;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    0 0 0 3px rgba(217,79,138,.24),
    4px 4px 0 rgba(0,0,0,.18);
}

.builder-markup-editor textarea[data-markup-source]{
  display:block;
  min-height:150px;
  margin:0;
  padding:13px 14px;
  border:3px solid rgba(40,22,7,.82);
  background:#fffdf4;
  color:#120b05;
  caret-color:#e0005a !important;
  font-size:1rem;
  line-height:1.55;
  resize:vertical;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.55),
    4px 4px 0 rgba(0,0,0,.16);
}

.builder-markup-editor textarea[data-markup-source]::placeholder{
  color:rgba(40,22,7,.58);
}

.builder-markup-editor textarea[data-markup-source]:focus{
  outline:none;
  border-color:#d94f8a;
  background:#ffffff;
  caret-color:#e0005a !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.8),
    0 0 0 3px rgba(217,79,138,.24),
    4px 4px 0 rgba(0,0,0,.18);
}

.builder-markup-editor{
  display:grid;
  gap:8px;
}

.builder-editor-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:3px 7px;
  border:2px solid rgba(40,22,7,.72);
  background:#281607;
  color:#fff8e8;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  line-height:1;
  box-shadow:2px 2px 0 rgba(0,0,0,.18);
}

.builder-editor-preview-label{
  margin-top:2px;
}

.builder-markup-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.builder-markup-toolbar button{
  min-width:34px;
  min-height:32px;
  padding:6px 8px;
  border:2px solid rgba(40,22,7,.75);
  background:#fff8e8;
  color:#281607;
  font-weight:800;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.22);
}

.builder-markup-toolbar button:hover{
  transform:translateY(-1px);
  background:#f0c86f;
}

.builder-markup-preview{
  min-height:74px;
  max-height:220px;
  overflow:auto;
  padding:12px;
  border:2px dashed rgba(40,22,7,.42);
  background:rgba(255,248,232,.58);
  color:#281607;
  font-size:.92rem;
  line-height:1.45;
}

.builder-markup-preview p,
.builder-markup-preview ul,
.builder-markup-preview ol,
.builder-markup-preview h3,
.builder-markup-preview h4,
.builder-markup-preview h5{
  margin:0 0 8px;
}

.builder-markup-preview ul,
.builder-markup-preview ol{
  padding-left:22px;
}

.builder-preview-empty{
  opacity:.62;
  font-style:italic;
}

.builder-upload-field{
  margin-top:12px;
  display:grid;
  gap:6px;
}

.builder-upload-button{
  width:max-content;
  max-width:100%;
  padding:9px 12px;
  border:2px solid rgba(40,22,7,.75);
  background:#281607;
  color:#fff8e8;
  font-weight:900;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.22);
}

.builder-upload-button:hover{
  transform:translateY(-1px);
  background:#5c2f0e;
}

.builder-upload-status{
  font-size:.78rem;
  line-height:1.35;
  opacity:.78;
}

.builder-upload-popup[hidden]{
  display:none !important;
}

.builder-upload-popup{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(5,6,8,.62);
}

.builder-upload-popup-panel{
  position:relative;
  width:min(420px, 100%);
  padding:20px;
  border:3px solid rgba(40,22,7,.9);
  background:#fff8e8;
  color:#281607;
  box-shadow:10px 10px 0 rgba(0,0,0,.32);
}

.builder-upload-popup-panel strong{
  display:block;
  margin:0 36px 8px 0;
  font-size:1.05rem;
}

.builder-upload-popup-panel p{
  margin:0 0 14px 0;
}

.builder-upload-popup-panel input[type="file"]{
  width:100%;
  max-width:100%;
}

.builder-upload-popup-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border:2px solid rgba(40,22,7,.75);
  background:#281607;
  color:#fff8e8;
  font-weight:900;
  cursor:pointer;
}

.builder-markup-hint{
  margin-top:10px !important;
  font-size:.78rem;
  line-height:1.35;
  opacity:.78;
}

.loop-working{
  position:absolute;
  right:20px;
  bottom:-8px;
  width:210px;
  z-index:3;
  filter:drop-shadow(0 18px 14px var(--shadow));
}

/* ACTION */

.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}

.action-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px;
  min-height:320px;
}

.action-card img{
  max-width:220px;
  display:block;
  margin:0 auto 18px;
  filter:drop-shadow(0 18px 14px var(--shadow));
}

.dual{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
  align-items:center;
}

.dual-card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  padding:28px;
  border-radius:20px;
  min-height:220px;
}

.dual-card h3{
  font-size:2rem;
  margin:0 0 10px;
}

.loop-small{
  width:130px;
  filter:drop-shadow(0 14px 12px var(--shadow));
}

footer{
  padding:40px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
}

@media(max-width:900px){
  .hero-grid,
  .process-row,
  .modules,
  .action-grid,
  .dual{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:auto;
    padding-top:60px;
  }

  .hero:after{
    display:none;
  }

  .loop-hero-wrap{
    min-height:420px;
  }

  .loop-hero{
    right:0;
    width:360px;
  }

  .speech{
    left:0;
    bottom:20px;
    font-size:1.1rem;
  }

  .loop-working{
    position:relative;
    display:block;
    margin:20px auto 0;
    right:auto;
    bottom:auto;
  }

  nav{
    width:100%;
  }
}

.action-card img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto 18px;
}

.action-grid {
  align-items: stretch;
}

.action-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.loop-break-inner span {
  display: inline-block;
  max-width: 220px;
  font-size: 1rem;
  line-height: 1.3;
}