:root{
  --bg:#050607;
  --panel:#0b1220;
  --primary:#0c61ab;
  --primary-600:#0a4f8a;
  --ring:#1b2a45;
  --text:#e7eefb;
  --muted:#a8b3cf;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  letter-spacing:.2px;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(12,97,171,.15), transparent 70%),
    radial-gradient(800px 400px at 20% 30%, rgba(255,255,255,.015), transparent 60%),
    radial-gradient(600px 300px at 80% 70%, rgba(255,255,255,.01), transparent 50%);
  pointer-events:none;
  z-index:1;
}

main{
  position:relative;
  z-index:2;
}

a{color:var(--text); text-decoration:none}
a:hover{opacity:.95}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,6,7,0.7); backdrop-filter: blur(8px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:10px; align-items:center}
.brand img{height:28px; width:auto}
.brand .name{font-weight:700; letter-spacing:.4px}

.nav{display:flex; gap:18px; align-items:center}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--primary), #5aa9e6);
  border:0; color:#fff; padding:20px 30px; border-radius:12px; font-weight:700; cursor:pointer;
  box-shadow: 0 8px 20px rgba(12,97,171,.35);
  font-size:24px;
}
.cta_header{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--primary), #5aa9e6);
  border:0; color:#fff; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer;
  box-shadow: 0 8px 20px rgba(12,97,171,.35);
  font-size:16px;
}
.cta.secondary{
  background:rgba(18, 24, 39, 0.8); color:var(--text);
}
.cta:hover{transform:translateY(-1px)}
.badge{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
  background:rgba(12,97,171,.18); color:#b8d9ff; font-weight:600; font-size:12px;
}

.hero{padding:72px 0 40px}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center}
h1{font-size: clamp(28px, 4.6vw, 56px); line-height:1.05; margin:12px 0 14px}
.lead{color:#c9d6f3; font-size: clamp(15px, 1.8vw, 18px); max-width:58ch}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px}
.actions{display:flex; gap:12px; flex-wrap:wrap}

.hero-features{display:flex; flex-direction:column; gap:20px}
.feature-highlight{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(12,97,171,.05);
  border-radius:12px; padding:20px;
}
.feature-icon{font-size:24px; min-width:32px}
.feature-highlight h3{margin:0 0 6px; font-size:16px; font-weight:600}
.feature-highlight p{margin:0; color:var(--muted); font-size:14px; line-height:1.4}

.preview{
  background:rgba(12,97,171,.08);
  border-radius:16px; padding:18px;
}
.preview img{width:100%; height:auto; border-radius:12px; display:block}

.section{padding:56px 0}
.section h2{font-size: clamp(22px, 3vw, 32px); margin:0 0 8px}
.section p.sub{color:var(--muted); margin:0 0 18px}

.grid{display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
.card{
  background:rgba(11, 18, 32, 0.6);
  border-radius:16px; padding:18px;
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:#bdc9e6}

/* Tutorial Section Styles */
.tutorial{display:flex; flex-direction:column; gap:48px}

.demo-section{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center}
.demo-content h3{font-size: clamp(18px, 2.5vw, 24px); line-height:1.3; margin:0 0 16px}
.demo-content p{color:var(--muted); line-height:1.6}
.brand-text{color:var(--primary)}
.demo-image{
  background:rgba(12,97,171,.08);
  border-radius:16px; padding:18px;
}
.demo-image img{width:100%; height:auto; border-radius:12px; display:block}

.commands-section{text-align:center}
.commands-section h3{margin:0 0 8px; font-size: clamp(20px, 2.8vw, 28px)}
.commands-section .sub{margin:0 0 32px}

.command-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0 0 40px}
.command-group{
  background:rgba(11, 18, 32, 0.6);
  border-radius:16px; padding:24px;
}
.command-group h4{margin:0 0 16px; color:var(--primary); font-size:16px}
.command-examples{display:flex; flex-direction:column; gap:8px}
.command-examples code{
  background:rgba(12,97,171,.12); color:#b8d9ff; padding:8px 12px;
  border-radius:8px; font-size:14px;
}

.examples{margin-top:32px}
.examples h4{margin:0 0 16px; font-size:18px}
.example-commands{display:flex; flex-direction:column; gap:8px; margin:0 0 16px}
.example-commands code{
  background:rgba(11, 20, 36, 0.8); color:#e7eefb; padding:12px 16px;
  border-radius:8px; font-size:13px;
  text-align:left;
}
.note{
  background:rgba(12,97,171,.1); color:#b8d9ff; padding:12px 16px;
  border-radius:8px; font-size:14px;
  margin:0;
}

.process-steps h3{margin:0 0 24px; text-align:center; font-size: clamp(20px, 2.8vw, 28px)}
.process-flow{display:flex; align-items:center; justify-content:center; gap:16px}
.process-step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:rgba(11, 18, 32, 0.6);
  border-radius:16px; padding:20px; flex:1; max-width:280px;
}
.process-num{
  min-width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:var(--primary); font-weight:800; font-size:18px; margin:0 0 12px;
}
.process-content strong{display:block; margin:0 0 8px; font-size:16px}
.process-content p{margin:0; color:var(--muted); font-size:14px; line-height:1.4}
.process-arrow{color:var(--primary); font-size:24px; font-weight:bold}

/* Privacy Page Styles */
.privacy-hero{padding:72px 0 40px; text-align:center}
.privacy-hero h1{font-size: clamp(32px, 5vw, 48px); margin:0 0 16px}
.privacy-hero .lead{font-size: clamp(16px, 2vw, 20px); margin:0 0 12px}
.last-updated{color:var(--muted); font-size:14px; margin:0}

.privacy-content{padding:0 0 56px}
.privacy-section{margin:0 0 48px; max-width:800px}
.privacy-section h2{
  color:var(--primary); font-size: clamp(24px, 3.5vw, 32px); 
  margin:0 0 20px; padding-bottom:8px;
  position:relative;
}
.privacy-section h2::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, rgba(12,97,171,.3), rgba(12,97,171,.1), transparent);
}
.privacy-section h3{color:#e7eefb; font-size:18px; margin:0 0 12px; display:flex; align-items:center; gap:8px}
.privacy-section p{line-height:1.6; margin:0 0 16px; color:#c9d6f3}
.privacy-section ul{margin:0 0 16px 20px; color:#c9d6f3}
.privacy-section li{margin:0 0 8px; line-height:1.5}
.privacy-section a{color:var(--primary); text-decoration:underline}
.privacy-section a:hover{color:#5aa9e6}

.data-list{display:flex; flex-direction:column; gap:24px}
.data-item{
  background:linear-gradient(180deg, #0c1221, #0a0f1a);
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
  border-radius:12px; padding:20px;
}
.data-item h3{margin:0 0 12px; font-size:16px}
.data-item p{margin:0 0 12px; font-size:14px; line-height:1.5}
.data-item p:last-child{margin:0}
.data-item ul{margin:8px 0 12px 16px; font-size:14px}
.data-item strong{color:var(--primary)}

.dont-list{display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.dont-item{
  background:rgba(220,38,38,.1); color:#fca5a5; padding:12px 16px;
  border-radius:8px; box-shadow: inset 0 1px 0 rgba(220,38,38,.15), 0 1px 2px rgba(0,0,0,.05); font-size:14px;
}

.contact-info{
  background:linear-gradient(180deg, rgba(12,97,171,.08), rgba(12,97,171,.02));
  box-shadow: inset 0 1px 0 rgba(12,97,171,.15), 0 2px 8px rgba(0,0,0,.1);
  border-radius:12px; padding:20px; margin:16px 0 0;
}
.contact-info p{margin:0; font-size:16px}

/* Contact Page Styles */
.contact-hero{padding:72px 0 40px; text-align:center}
.contact-hero h1{font-size: clamp(32px, 5vw, 48px); margin:0 0 16px}
.contact-hero .lead{font-size: clamp(16px, 2vw, 20px); margin:0; color:#c9d6f3}

.contact-content{padding:0 0 56px}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}

.about-dev h2, .contact-info h2{
  color:var(--primary); font-size: clamp(24px, 3.5vw, 32px); 
  margin:0 0 24px; padding-bottom:8px;
  position:relative;
}
.about-dev h2::after, .contact-info h2::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, rgba(12,97,171,.3), rgba(12,97,171,.1), transparent);
}

.dev-card{
  background:linear-gradient(180deg, #0c1221, #0a0f1a);
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
  border-radius:16px; padding:24px;
}
.dev-info h3{margin:0 0 16px; font-size:20px; display:flex; align-items:center; gap:8px}
.dev-info p{line-height:1.6; margin:0 0 16px; color:#c9d6f3}
.dev-info strong{color:var(--primary)}

.dev-stats{display:flex; flex-direction:column; gap:16px; margin:24px 0 0}
.stat{display:flex; gap:12px; align-items:flex-start}
.stat-icon{font-size:20px; min-width:24px}
.stat strong{display:block; margin:0 0 4px; font-size:14px; color:#e7eefb}
.stat p{margin:0; font-size:13px; color:var(--muted); line-height:1.3}

.contact-method{
  background:linear-gradient(180deg, rgba(12,97,171,.08), rgba(12,97,171,.02));
  box-shadow: inset 0 1px 0 rgba(12,97,171,.15), 0 2px 8px rgba(0,0,0,.1);
  border-radius:16px; padding:24px; margin:0 0 32px;
}
.contact-header{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.contact-icon{font-size:20px}
.contact-method h3{margin:0; font-size:18px}

.email-container{
  display:flex; align-items:center; gap:12px; margin:0 0 16px;
  background:#0b1424; box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.02);
  border-radius:8px; padding:12px 16px;
}
.email-container code{
  flex:1; background:none; color:#e7eefb; font-size:16px;
  border:none; padding:0;
}
.copy-btn{
  background:var(--primary); color:#fff; border:none;
  padding:6px 12px; border-radius:6px; font-size:12px;
  font-weight:600; cursor:pointer; transition:all 0.2s;
}
.copy-btn:hover{background:var(--primary-600); transform:translateY(-1px)}

.contact-topics h3{margin:0 0 16px; font-size:18px; color:#e7eefb}
.topic-list{display:flex; flex-direction:column; gap:16px}
.topic-item{display:flex; gap:12px; align-items:flex-start}
.topic-icon{font-size:16px; min-width:20px; margin-top:2px}
.topic-item strong{display:block; margin:0 0 4px; font-size:14px; color:#e7eefb}
.topic-item p{margin:0; font-size:13px; color:var(--muted); line-height:1.4}

.response-info{
  background:linear-gradient(180deg, #0c1221, #0a0f1a);
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
  border-radius:12px; padding:20px; margin:32px 0 0;
}
.response-info h3{margin:0 0 12px; font-size:16px; color:var(--primary)}
.response-info p{margin:0 0 16px; font-size:14px; line-height:1.5; color:#c9d6f3}
.response-info p:last-child{margin:0}
.cheers{text-align:center; padding:12px 0 0; position:relative}
.cheers::before{content:''; position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent)}

.footer{padding:28px 0 56px; color:#9fb0cf; position:relative}
.footer::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent)}

@media (max-width: 900px){
  .hero{padding:48px 0 0}
  .hero-grid{grid-template-columns: 1fr; gap:22px}
  .grid{grid-template-columns: 1fr; gap:14px}
  
  /* Add padding to brand/logo for mobile spacing */
  .brand{padding-right:16px}
  
  /* Tutorial responsive styles */
  .tutorial{gap:32px}
  .demo-section{grid-template-columns: 1fr; gap:24px}
  .demo-section .demo-image{order:-1}
  .command-grid{grid-template-columns: 1fr; gap:16px}
  .process-flow{flex-direction:column; gap:12px}
  .process-arrow{transform:rotate(90deg)}
  .process-step{max-width:100%}
  
  /* Contact page mobile styles */
  .contact-grid{grid-template-columns: 1fr; gap:32px}
}