/* iFocusFlow landing styles */
:root{
  --bg:#0b0c10;
  --elev:#111318;
  --text:#e8e8ea;
  --muted:#a9acb2;
  --brand:#6ee7ff;
  --brand-2:#8b5cf6;
  --ring: rgba(110,231,255,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #121420 10%, transparent 60%), 
              radial-gradient(1000px 600px at 110% -10%, #0f1220 10%, transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(11,12,16,.6);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;min-height:64px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700}
.brand-mark{width:28px;height:28px}
.nav a{color:var(--muted);margin-left:18px;text-decoration:none}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:24px}

.hero{padding:72px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero-copy h1{font-size: clamp(32px, 5vw, 54px);line-height:1.1;margin:0 0 10px}
.accent{background:linear-gradient(45deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{color:var(--muted);margin:0 0 18px}
.cta-row{display:flex;gap:12px;margin:16px 0 4px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:var(--text);font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;box-shadow:0 0 0 0 var(--ring);transition:box-shadow .2s}
.btn.primary:focus{outline:none;box-shadow:0 0 0 6px var(--ring)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.domain-note{font-size:.9rem;color:var(--muted)}
.hero-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}

.features{padding:18px 0 18px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:32px 0;border-top:1px solid rgba(255,255,255,.06)}
.feature.reverse{direction:rtl}
.feature.reverse .feature-copy{direction:ltr}
.feature-media {--shot-scale: 0.6;}
.feature-media img{width:100%;height:auto}
.feature-copy h2{margin:0 0 6px;font-size:clamp(24px, 3vw, 34px)}
.feature-copy p{margin:0;color:var(--muted)}
.feature-media img {
  width: calc(100% * var(--shot-scale));   /* 30% of the slot’s width */
  height: auto;                            /* keep aspect ratio */
  display: block;
  border-radius: 12px;                     /* optional: soften corners */
}

.screens { --shot-scale: 1.0; } 
.screens{padding:40px 0 64px;border-top:1px solid rgba(255,255,255,.06)}
.screens h2{margin:0 0 8px}
.muted{color:var(--muted)}
.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.screen-slot{aspect-ratio:9/19;border-radius:16px;border:1px dashed rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(255,255,255,.03)}
.screen-slot span{pointer-events:none}
.screen-slot img {
  width: calc(100% * var(--shot-scale));   /* 30% of the slot’s width */
  height: auto;                            /* keep aspect ratio */
  display: block;
  border-radius: 12px;                     /* optional: soften corners */
}

.contact{padding:48px 0;border-top:1px solid rgba(255,255,255,.06)}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);padding:24px;border-radius:20px}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list a{color:var(--text)}
.contact-form label{display:block;margin:10px 0 6px}
.contact-form input,.contact-form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0f1015;color:var(--text)
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:0 0 0 4px var(--ring);border-color:transparent}
.contact-form .form-note{color:var(--muted);font-size:.85rem;margin-top:10px}

.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted)}
.small{font-size:.9rem}

@media (max-width: 900px){
  .hero-grid,.feature{grid-template-columns:1fr}
  .feature.reverse{direction:ltr}
  .contact-card{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:block;position:absolute;right:20px;top:62px;background:#0f1015;border:1px solid rgba(255,255,255,.1);padding:10px 14px;border-radius:12px}
  .nav a{display:block;margin:8px 0}
  .nav-toggle{display:block}
}