/* ================================================
   STARTIQOS.AI — Components
================================================ */

/* PAGE LOADER */
#page-loader {
  position:fixed; inset:0; background:var(--ink); z-index:99998;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:20px;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
#page-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo {
  font-family:var(--font-mono); font-size:1.1rem; font-weight:700;
  letter-spacing:0.15em; color:var(--white);
}
.loader-logo span { color:var(--rose); }
.loader-bar {
  width:120px; height:1px; background:var(--mist-line);
  position:relative; overflow:hidden;
}
.loader-bar::after {
  content:''; position:absolute; top:0; left:-100%; bottom:0; width:100%;
  background:var(--rose); animation:loaderFill 1.2s var(--ease-out) forwards;
}

/* CURSOR */
#cursor-outer {
  position:fixed; width:44px; height:44px;
  border:1px solid var(--rose); border-radius:50%;
  pointer-events:none; z-index:var(--z-cursor);
  transform:translate(-50%,-50%);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              border-color .3s, background .3s;
  mix-blend-mode:exclusion;
}
#cursor-inner {
  position:fixed; width:6px; height:6px;
  background:var(--rose); border-radius:50%;
  pointer-events:none; z-index:calc(var(--z-cursor) + 1);
  transform:translate(-50%,-50%);
}
body.hovering #cursor-outer { width:72px; height:72px; background:rgba(255,45,107,.06); }

/* TICKER */
.ticker {
  position:relative; z-index:var(--z-overlay); overflow:hidden;
  padding:17px 0; background:var(--ink-2);
  border-top:1px solid var(--mist-line); border-bottom:1px solid var(--mist-line);
}
.ticker-track {
  display:flex; white-space:nowrap;
  animation:ticker 35s linear infinite;
}
.ticker-track span {
  font-family:var(--font-mono); font-size:0.58rem; font-weight:600;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--dim); padding:0 38px;
}
.ticker-track span.accent { color:var(--rose); }

/* STAT BOX */
.stat-box {
  background:var(--ink-2); padding:36px 28px;
  border:1px solid var(--mist-line); position:relative; overflow:hidden;
  transition:border-color var(--trans-base);
}
.stat-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform 0.4s var(--ease-out);
}
.stat-box:hover { border-color:var(--rose-border); }
.stat-box:hover::before { transform:scaleX(1); }
.stat-val {
  font-family:var(--font-mono); font-size:2.3rem; font-weight:700;
  color:var(--rose); letter-spacing:-0.02em; display:block;
  margin-bottom:6px; line-height:1.1;
}
.stat-label {
  font-size:0.7rem; font-weight:300; color:var(--dim);
  letter-spacing:0.1em; text-transform:uppercase;
}

/* FEATURE CARD */
.feat-card {
  background:var(--card); border:1px solid var(--mist-line);
  padding:40px 36px; position:relative; overflow:hidden;
  transition: background var(--trans-base), border-color var(--trans-base), transform 0.4s var(--ease-out);
  cursor: none;
}
.feat-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,45,107,.05) 0%, transparent 60%);
  opacity:0; transition:opacity 0.4s;
}
.feat-card:hover { background:var(--card-hover); border-color:var(--rose-border); transform:translateY(-5px); }
.feat-card:hover::before { opacity:1; }

.feat-tag {
  font-family:var(--font-mono); font-size:0.56rem; font-weight:700;
  letter-spacing:0.2em; color:var(--rose); text-transform:uppercase;
  margin-bottom:18px; display:block;
}
.feat-icon {
  width:48px; height:48px; border:1px solid rgba(255,45,107,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:18px; background:rgba(255,45,107,.04);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.feat-name {
  font-family:var(--font-display); font-size:1.2rem; font-weight:800;
  color:var(--white); margin-bottom:12px; line-height:1.25;
}
.feat-desc {
  font-size:0.87rem; font-weight:300; color:var(--silver);
  line-height:1.8; margin-bottom:18px;
}
.feat-problem { padding-top:18px; border-top:1px solid var(--mist-line); }
.feat-problem-label {
  font-family:var(--font-mono); font-size:0.54rem; font-weight:700;
  letter-spacing:0.16em; color:rgba(255,45,107,.65); text-transform:uppercase;
  margin-bottom:6px; display:block;
}
.feat-problem p { font-size:0.8rem; font-weight:300; color:var(--dim); line-height:1.65; font-style:italic; }

.feats-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:2px;
}

/* INTERACTIVE DEMO CARD */
.demo-card {
  background:var(--card); border:1px solid var(--mist-line);
  padding:32px; position:relative; overflow:hidden;
  transition:border-color var(--trans-base);
}
.demo-card:hover { border-color:var(--rose-border); }
.demo-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--mist-line);
}
.demo-card-title {
  font-family:var(--font-mono); font-size:0.65rem; font-weight:700;
  letter-spacing:0.18em; color:var(--rose); text-transform:uppercase;
}
.demo-badge {
  font-family:var(--font-mono); font-size:0.5rem; font-weight:700;
  letter-spacing:0.12em; color:var(--rose); border:1px solid var(--rose-border);
  padding:3px 8px; background:var(--rose-fade);
}

/* STEP INDICATOR */
.step-indicator {
  display:flex; align-items:center; gap:0; margin-bottom:32px; overflow-x:auto;
  scrollbar-width:none;
}
.step-indicator::-webkit-scrollbar { display:none; }
.step-item {
  display:flex; align-items:center; flex:1; min-width:0;
  cursor:none;
}
.step-num {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--mist-line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.65rem; font-weight:700;
  color:var(--dim); background:var(--ink-2); flex-shrink:0;
  transition:all var(--trans-base);
}
.step-item.active .step-num { border-color:var(--rose); color:var(--rose); background:var(--rose-fade); }
.step-item.done   .step-num { border-color:var(--rose); color:var(--ink); background:var(--rose); }
.step-connector {
  flex:1; height:1px; background:var(--mist-line); min-width:20px;
  transition:background var(--trans-base);
}
.step-item.done ~ .step-item .step-connector { background:var(--rose); }

/* IMPACT CELL */
.impact-cell {
  background:var(--card); padding:52px 20px; border-right:1px solid var(--mist-line);
  text-align:center; position:relative; overflow:hidden;
  transition:background var(--trans-base);
}
.impact-cell:hover { background:rgba(255,45,107,.02); }
.impact-cell:last-child { border-right:none; }
.impact-val {
  font-family:var(--font-mono); font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:700; color:var(--rose); display:block; margin-bottom:8px; letter-spacing:-0.02em;
}
.impact-label { font-size:0.66rem; font-weight:300; color:var(--dim); letter-spacing:0.14em; text-transform:uppercase; }

/* MISSION BOX */
.mission-box {
  background:var(--ink-2); border:1px solid var(--mist-line);
  padding:36px; clip-path:var(--clip-card); margin-top:2px;
}
.mission-box p {
  font-family:var(--font-display); font-size:1.1rem; font-style:italic;
  font-weight:700; color:var(--white); line-height:1.6;
}
.mission-box p span { color:var(--rose); }

/* INSIGHT CARD */
.insight-card {
  background:var(--card); border:1px solid var(--mist-line); overflow:hidden;
  transition:border-color var(--trans-base), transform 0.4s var(--ease-out); cursor:none;
}
.insight-card:hover { border-color:rgba(255,45,107,.22); transform:translateY(-8px); }
.insight-thumb {
  height:200px; display:flex; align-items:center; justify-content:center;
  font-size:3rem; border-bottom:1px solid var(--mist-line);
  background:linear-gradient(135deg, rgba(255,45,107,.07), rgba(4,4,10,.4));
  position:relative;
}
.insight-thumb::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(4,4,10,.6));
}
.insight-body { padding:28px 30px; }
.insight-cat {
  font-family:var(--font-mono); font-size:0.56rem; font-weight:700;
  letter-spacing:0.18em; color:var(--rose); text-transform:uppercase;
  margin-bottom:10px; display:block;
}
.insight-title {
  font-family:var(--font-display); font-size:1.05rem; font-weight:800;
  color:var(--white); margin-bottom:10px; line-height:1.35;
}
.insight-excerpt { font-size:0.84rem; font-weight:300; color:var(--silver); line-height:1.8; }

/* HOW STEP */
.how-step { text-align:center; padding:0 24px; }
.how-step-num {
  width:100px; height:100px; border:1px solid rgba(255,45,107,.2); border-radius:50%;
  margin:0 auto 26px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:1.45rem; font-weight:700;
  color:var(--rose); background:var(--ink-2); position:relative; z-index:1;
  transition:border-color var(--trans-base), box-shadow var(--trans-base);
}
.how-step:hover .how-step-num { border-color:var(--rose); box-shadow:0 0 50px rgba(255,45,107,.22); }
.how-step-title { font-family:var(--font-display); font-size:1.05rem; font-weight:800; color:var(--white); margin-bottom:12px; }
.how-step-desc  { font-size:0.85rem; font-weight:300; color:var(--silver); line-height:1.8; }

/* VALIDATION METER */
.val-meter-wrap { margin-bottom:16px; }
.val-meter-label {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.val-meter-name { font-size:0.8rem; font-weight:300; color:var(--silver); letter-spacing:0.04em; }
.val-meter-score { font-family:var(--font-mono); font-size:0.75rem; font-weight:700; color:var(--rose); }
.val-meter-bar { height:3px; background:var(--mist-line); position:relative; overflow:hidden; }
.val-meter-fill {
  height:100%; background:linear-gradient(90deg, var(--rose), var(--rose-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease-out);
}
.val-meter-fill.animate { transform:scaleX(1); }

/* FORM ELEMENTS */
.form-group { margin-bottom:20px; }
.form-label {
  display:block; font-family:var(--font-mono); font-size:0.58rem;
  font-weight:700; letter-spacing:0.16em; color:var(--dim);
  text-transform:uppercase; margin-bottom:8px;
}
.form-input, .form-textarea, .form-select {
  width:100%; background:var(--ink-2); border:1px solid var(--mist-line);
  color:var(--white); font-family:var(--font-body); font-size:0.9rem;
  font-weight:300; padding:14px 16px;
  transition:border-color var(--trans-fast), box-shadow var(--trans-fast);
  outline:none; appearance:none;
}
.form-textarea { resize:vertical; min-height:100px; }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff2d6b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 16px) center; padding-right:44px; cursor:none; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--rose); box-shadow:0 0 0 2px var(--rose-fade);
}

/* SCORE CIRCLE */
.score-circle {
  width:120px; height:120px; border-radius:50%;
  border:2px solid var(--rose-border); position:relative;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.score-circle-val {
  font-family:var(--font-mono); font-size:2rem; font-weight:700; color:var(--rose); line-height:1;
}
.score-circle-label { font-size:0.6rem; font-weight:300; color:var(--dim); letter-spacing:0.1em; text-transform:uppercase; margin-top:4px; }
.score-svg { position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); transform:rotate(-90deg); }
.score-svg circle { fill:none; stroke:var(--rose); stroke-width:2; stroke-linecap:round; transition:stroke-dashoffset 1.5s var(--ease-out); }

/* TAGS */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.54rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; padding:5px 12px;
  border:1px solid var(--rose-border); color:var(--rose); background:var(--rose-fade);
}
.tag-green  { border-color:rgba(52,211,153,.3); color:#34d399; background:rgba(52,211,153,.05); }
.tag-yellow { border-color:rgba(251,191,36,.3);  color:#fbbf24; background:rgba(251,191,36,.05); }
.tag-red    { border-color:rgba(248,113,113,.3); color:#f87171; background:rgba(248,113,113,.05); }

/* RESPONSIVE */
@media (max-width:1024px) { .feats-grid { grid-template-columns:1fr; } }
@media (max-width:768px)  { .feat-card { padding:28px 24px; } }