/* Scale-like dark minimal theme (original, not copied) */
:root{
  --bg:#0b0b0c;
  --card:#121214;
  --muted:#9aa0a6;
  --text:#f5f6f7;
  --accent:linear-gradient(135deg, #66b3ff 0%, #ff99d6 100%); /* lighter blue to pink gradient */
  --line:#1f2023;
  --pill:#202127;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b0b0ccc 0%,#0b0b0c00 100%)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px;padding:8px 24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.brand__mark{width:18px;height:18px;border-radius:4px;background:conic-gradient(from 45deg, var(--accent), #ff8a00 33%, #845ef7 66%, #35a0ff 100%);box-shadow:0 0 0 1px #ffffff1f}
.brand__text{letter-spacing:.2px}
.nav__links{display:flex;gap:28px}
.nav__links a{color:#cfd3d8;font-weight:500}
.nav__links a:hover{color:#fff}
.nav__cta{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;font-weight:700;border-radius:999px;padding:10px 16px;border:1px solid transparent;cursor:pointer;transition:transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#fff;border:none;position:relative;overflow:hidden}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(53,160,255,0.3)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:transparent;border-color:#ffffff24;color:#e6e7ea}
.btn--ghost:hover{background:#ffffff10}
.nav__burger{display:none;flex-direction:column;gap:4px;background:transparent;border:0;padding:8px}
.nav__burger span{width:22px;height:2px;background:#cfd3d8;display:block}

/* Drawer */
.nav__drawer{display:none;flex-direction:column;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--bg)}
.nav__drawer:not([hidden]){display:flex}

/* Hero */
.hero{position:relative;padding:88px 0 40px;overflow:hidden}
.hero__bg{
  position:absolute;inset:-10% -10% auto -10%;height:60%;
  background:radial-gradient(40% 40% at 20% 30%, #66b3ff33 0%, transparent 60%),
             radial-gradient(35% 35% at 80% 10%, #ff99d633 0%, transparent 60%);
  filter:blur(20px);
  pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.display{font-size: clamp(40px, 6vw, 72px); line-height:1.0; letter-spacing:-.02em; margin:0 0 16px}
.lead{color:#c9cdd2;font-size: clamp(16px, 2.4vw, 20px);max-width:60ch;margin-bottom:20px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 24px}
.trust{margin-top:10px}
.trust__label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
.logorow{display:flex;gap:14px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.logorow li{font-weight:700;color:#8b9098;background:var(--pill);border:1px solid #ffffff14;border-radius:999px;padding:6px 12px}

/* Hero code card */
.hero__card{display:flex;justify-content:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;width:min(520px, 100%);transition:transform 0.2s ease, box-shadow 0.2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.4)}

/* macOS-style header */
.card__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, #1a1a1c 0%, #0f0f11 100%)}
.card__controls{display:flex;gap:6px}
.dot{width:12px;height:12px;border-radius:50%;transition:all 0.2s ease}
.dot--red{background:#ff5f57;box-shadow:0 0 0 1px #ff3b30}
.dot--yellow{background:#ffbd2e;box-shadow:0 0 0 1px #ff9500}
.dot--green{background:#28ca42;box-shadow:0 0 0 1px #30d158}
.dot:hover{transform:scale(1.1);filter:brightness(1.2)}

.card__title{color:#8b8b8b;font-size:12px;font-weight:500;letter-spacing:0.5px}
.card__actions{display:flex;gap:6px}

/* macOS-style buttons */
.card__btn{width:24px;height:24px;border-radius:6px;border:none;background:#2a2a2c;color:#8b8b8b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;font-size:10px}
.card__btn:hover{background:#3a3a3c;color:#fff;transform:scale(1.05)}
.card__btn:active{transform:scale(0.95)}

/* Code container */
.card__body{padding:0}
.code-container{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:13px;line-height:1.5;background:#0a0a0b;padding:16px 20px;overflow-x:auto}

/* Code lines */
.code-line{display:flex;align-items:center;padding:2px 0;transition:all 0.2s ease;border-radius:4px;margin:1px 0}
.code-line:hover{background:rgba(255,255,255,0.05);padding-left:8px;margin-left:-8px}

.line-number{color:#4a4a4a;width:24px;text-align:right;margin-right:12px;font-size:11px;user-select:none}
.code-comment{color:#6a6a6a;font-style:italic}
.code-keyword{color:#ff79c6;font-weight:500}
.code-string{color:#f1fa8c}
.code-indent{color:#8be9fd}

/* Interactive effects */
.code-line:hover .line-number{color:#6a6a6a}
.code-line:hover .code-keyword{color:#ff8dd1}
.code-line:hover .code-string{color:#f7f7a8}
.code-line:hover .code-comment{color:#8a8a8a}

/* Chat Demo */
.chat-demo{margin-top:60px;padding:32px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.chat-demo__header{text-align:center;margin-bottom:24px}
.chat-demo__header h3{margin:0 0 8px;font-size:24px}
.chat-demo__header p{color:#c9cdd2;margin:0}

.chat-container{max-width:600px;margin:0 auto;background:#0a0a0b;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chat-messages{height:300px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}

.message{display:flex;gap:12px;animation:messageSlide 0.3s ease-out}
.message--ai{align-items:flex-start}
.message--user{align-items:flex-end;flex-direction:row-reverse}

.message__avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.message--ai .message__avatar{background:linear-gradient(135deg, #66b3ff 0%, #ff99d6 100%);color:#fff}
.message--user .message__avatar{background:#2a2a2c;color:#fff}

.message__content{max-width:70%;display:flex;flex-direction:column;gap:4px}
.message--user .message__content{align-items:flex-end}

.message__text{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--text);line-height:1.4}
.message--user .message__text{background:linear-gradient(135deg, #66b3ff 0%, #ff99d6 100%);color:#fff;border:none}

.message__time{font-size:11px;color:var(--muted);padding:0 4px}

.chat-input{padding:16px;border-top:1px solid var(--line);background:#0f0f11;display:flex;justify-content:center}
.chat-demo-notice{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;padding:8px 16px;background:rgba(102,179,255,0.1);border-radius:8px;border:1px solid rgba(102,179,255,0.2)}
.chat-demo-notice i{color:#66b3ff}

.typing-indicator{display:flex;gap:4px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;max-width:80px}
.typing-dot{width:6px;height:6px;border-radius:50%;background:#66b3ff;animation:typing 1.4s infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}

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

@keyframes typing{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-10px)}
}

/* Tiles */
.section-head{margin:56px 0 18px}
.section-head h2{font-size:32px;margin:0 0 6px}
.section-head p{color:#c9cdd2;margin:0}
.tiles__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.tile__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#ffffff10}
.link{display:inline-flex;align-items:center;gap:8px;background:var(--accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;transition:all 0.2s ease;cursor:default}
.link:hover{transform:translateX(2px)}

/* Banner */
.banner{padding:80px 0;background:linear-gradient(180deg,#0b0b0c 0%, #0f1115 100%)}
.banner__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.banner__copy h2{margin:0 0 8px}
.banner__copy p{color:#c9cdd2}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips span{padding:6px 10px;border-radius:999px;background:var(--pill);border:1px solid #ffffff14;color:#d0d3d8;font-size:12px}
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.checklist li{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.checklist i{color:#36d399}

/* Quotes */
.quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.quote{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.quote blockquote{margin:0 0 10px; font-size:18px; line-height:1.4}
.quote figcaption{color:var(--muted);font-size:14px}

/* CTA */
.cta{padding:80px 0}
.cta__box{background:linear-gradient(180deg, #121214, #0f0f11);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta__box h2{margin:0}

/* Footer */
.footer{border-top:1px solid var(--line);padding:40px 0 60px;background:#0b0b0c}
.footer__grid{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:24px}
.footer h4{margin:0 0 10px}
.footer a{display:block;color:#c9cdd2;margin:6px 0}
.muted{color:var(--muted)}

/* Modal */
.modal{border:0;border-radius:14px;padding:0;background:transparent}
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal__card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:min(520px, 92vw);color:var(--text)}
.modal__card h3{margin:0 0 6px}
.modal__card p{margin:0 0 12px}
.modal__card label{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.modal__card input,.modal__card textarea{background:#0f0f11;border:1px solid #2a2b30;border-radius:10px;padding:10px;color:#fff}
.modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}

/* Responsive */
@media (max-width: 960px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .tiles__grid{grid-template-columns:repeat(2,1fr)}
  .quotes__grid{grid-template-columns:1fr 1fr}
  .hero__grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .tiles__grid{grid-template-columns:1fr}
  .quotes__grid{grid-template-columns:1fr}
  .cta__box{align-items:flex-start}
}