/* ====== Minimal Reset ====== */
    :root{
      --bg-dark:#0D1117;
      --accent:#7A3FFF;
      --accent-2:#C6A7FF;
      --muted:#9AA3B2;
      --card:#F5F6FA;
      --white:#ffffff;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:#0b1220;
      background:#fff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    a{color:var(--accent); text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:28px}
    header.site-header{padding:24px 0;display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:14px}
    .brand img{height:42px;width:auto;display:block}
    .nav a{margin-left:18px;color:#222;font-weight:600}
    /* HERO */
    .hero{
      background:linear-gradient(180deg,var(--bg-dark) 0%, #0f1530 100%);
      color:var(--white);
      padding:72px 0;
      position:relative;
    }
    .hero-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;gap:40px;align-items:center}
    .hero-copy{flex:1}
    .hero h1{font-size:36px;margin:0 0 12px;letter-spacing:-0.4px}
    .hero p{color:rgba(255,255,255,0.85);margin:0 0 20px}
    .hero-cta{display:flex;gap:12px}
    .btn{background:var(--accent);color:white;padding:12px 18px;border-radius:10px;font-weight:600;display:inline-block}
    .btn.secondary{background:transparent;border:2px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.95)}
    .app-icons{margin-top:22px;display:flex;gap:12px;align-items:center}
    .app-icons img{height:46px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
    .hero-mock{flex:0 0 360px;display:flex;justify-content:center}
    .phone-mock{width:220px;height:460px;background:linear-gradient(180deg,#111 0,#222 100%);border-radius:30px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
    /* WHAT WE DO */
    .three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:48px 0}
    .card{background:var(--white);padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(15,20,30,0.04)}
    .card h4{margin:6px 0 10px}
    .muted{color:var(--muted);font-size:14px}
    /* APPS GRID */
    .apps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:24px 0}
    .app-card{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--card);border-radius:12px}
    .app-card img.icon{width:72px;height:72px;border-radius:16px;object-fit:cover}
    .app-card h3{margin:0}
    .app-features{margin:8px 0;color:#334155;font-size:14px}
    .learn{margin-left:auto}
    /* APP DETAIL */
    .app-detail{display:flex;gap:30px;align-items:center;padding:36px 0;border-bottom:1px solid rgba(10,12,20,0.03)}
    .app-detail:nth-child(even){background:#fbfbfe}
    .app-detail img.screenshot{width:240px;height:480px;border-radius:22px;object-fit:cover;box-shadow:0 20px 50px rgba(6,8,20,0.08)}
    .features ul{padding-left:18px;margin:8px 0;color:#263238}
    /* GROWTH/METHOD */
    .growth{background:linear-gradient(180deg,#0b1220 0%, #0f1530 100%);color:white;padding:36px;border-radius:12px;margin-top:18px}
    .growth h3{margin-top:0}
    .growth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .growth-item{padding:14px}
    /* ABOUT */
    .about{padding:26px 0;display:flex;gap:18px;align-items:center}
    .about img{width:120px;height:120px;border-radius:12px;object-fit:cover}
    /* CONTACT */
    footer{padding:28px 0;border-top:1px solid rgba(10,12,20,0.04);text-align:center}
    /* Responsive */
    @media (max-width:880px){
      .hero-inner{flex-direction:column;align-items:flex-start;padding:0 18px}
      .hero-mock{order: -1}
      .three-cols{grid-template-columns:1fr}
      .apps-grid{grid-template-columns:1fr}
      .growth-grid{grid-template-columns:1fr}
      .app-detail{flex-direction:column;align-items:flex-start}
      .hero h1{font-size:28px}
    }

    /* ---------- Hero rotating phone styles (scoped) ---------- */
    .hero{background:linear-gradient(180deg,var(--bg-dark,#0D1117) 0%, #0f1530 100%);color:var(--white,#fff);padding:72px 0}
    .hero-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;gap:40px;align-items:center}
    .hero-copy{flex:1;min-width:260px}
    .hero h1{font-size:36px;margin:0 0 12px;line-height:1.05}
    .hero p{color:rgba(255,255,255,0.85);margin:0 0 20px}
    .hero-cta{display:flex;gap:12px}
    .btn{background:var(--accent,#7A3FFF);color:white;padding:12px 18px;border-radius:10px;font-weight:600;display:inline-block}
    .btn.secondary{background:transparent;border:2px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.95)}

    /* phone frame */
    .hero-mock{flex:0 0 360px;display:flex;justify-content:center;align-items:center}
    .phone-frame{
      width:260px;
      height:540px;
      border-radius:38px;
      background:linear-gradient(180deg,#0b1220 0%, #15172a 100%);
      box-shadow: 0 30px 70px rgba(2,6,23,0.6);
      padding:18px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }
    .phone-screen{
      width:100%;
      height:100%;
      border-radius:26px;
      background:linear-gradient(180deg,#000 0%, #101418 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }
    .carousel-img{
      position:absolute;
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:0;
      transform:scale(1.03);
      transition:opacity 600ms ease, transform 600ms ease;
    }
    .carousel-img.active{opacity:1;transform:scale(1);}

    /* dots */
    .dots{
      position:absolute;
      bottom:14px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      gap:8px;
      z-index:40;
      pointer-events:none;
    }
    .dot{
      width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18);transition:all 220ms ease;cursor:pointer;pointer-events:auto;
    }
    .dot.active{width:28px;border-radius:999px;background:rgba(255,255,255,0.95);}

    /* hover visual */
    .phone-frame:hover{transform:translateY(-6px);transition:transform 220ms ease}
    @media (max-width:880px){
      .hero-inner{flex-direction:column;align-items:flex-start}
      .hero-mock{order:-1;margin-bottom:18px}
      .phone-frame{width:200px;height:420px}
      .hero h1{font-size:28px}
    }

  
/* Small-screen layout and keyboard accessibility. */
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:3px solid #7a3fff;outline-offset:4px}
.app-card>div{min-width:0}
.app-card img.icon{flex-shrink:0}
.dot{border:0;padding:0}
.phone-frame:focus-within{outline:2px solid var(--accent-2)}
@media(max-width:880px){
 header.site-header{padding:24px 20px;gap:20px;flex-wrap:wrap}
 .nav{display:flex;flex-wrap:wrap;gap:18px}.nav a{margin:0}
 .hero-mock{flex-basis:auto;align-self:center}
 .about{flex-wrap:wrap}.about>div:first-child{flex-basis:100%!important}
}
@media(max-width:480px){
 .container{padding:22px 18px}.hero-copy{min-width:0}.hero-cta{flex-wrap:wrap}
 .app-card{flex-wrap:wrap}.app-card>div:not(.learn){flex:1;min-width:145px}
 .app-card .learn{flex-basis:100%;margin-left:88px}
 .growth{padding:24px 18px}.brand{gap:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.carousel-img,.phone-frame,.dot{transition:none!important}}