/* MyRemoting product site — matches the control app theme (navy + green). */
:root{
  --bg:#0f1a2e; --grad1:#0f1a2e; --grad2:#1B365D;
  --panel:#14213a; --panel2:#0b1424;
  --border:#21304b; --border2:#2a3a59;
  --text:#e6e6e6; --muted:#8a93a6; --dim:#6b7280;
  --accent:#4CAF50; --accent-bg:#11261c; --accent-bg-h:#163524; --accent-bd:#1f5c43;
  --blue:#60a5fa; --amber:#fbbf24;
  --radius:14px; --radius-sm:9px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  background:
    radial-gradient(1100px 700px at 80% -10%, #1d3a63 0%, rgba(29,58,99,0) 60%),
    linear-gradient(160deg, var(--grad1), var(--grad2) 120%);
  background-attachment:fixed; min-height:100vh;
}
a{color:var(--blue); text-decoration:none}
a:hover{color:#cfd6e4}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
h1,h2,h3{line-height:1.2; margin:0 0 .4em}
section{padding:64px 0}
.eyebrow{text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:700; color:var(--accent)}

/* Header */
header.site{position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
  background:rgba(11,20,36,.72); border-bottom:1px solid var(--border)}
header.site .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:11px; color:var(--text); font-weight:700; font-size:18px}
.brand img{width:30px; height:30px; border-radius:7px}
header nav{margin-left:auto; display:flex; align-items:center; gap:24px}
header nav a{color:#aeb8cc; font-size:14.5px; font-weight:500}
header nav a:hover{color:#fff}
@media (max-width:760px){ header nav a.navlink{display:none} }

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:11px 18px;
  font-size:15px; font-weight:600; border:1px solid var(--border2); background:#16223a; color:#dfe6f2; cursor:pointer}
.btn:hover{background:#1d2c46; color:#fff}
.btn.primary{background:var(--accent-bg); color:#bdf0c6; border-color:var(--accent-bd)}
.btn.primary:hover{background:var(--accent-bg-h); color:#d6ffdd}
.btn.lg{padding:14px 24px; font-size:16px}

/* Hero */
.hero{padding:84px 0 56px; text-align:center}
.hero h1{font-size:clamp(34px,5.4vw,56px); letter-spacing:-.02em}
.hero h1 .grn{color:var(--accent)}
.hero p.lead{font-size:clamp(17px,2.2vw,21px); color:#c4cde0; max-width:760px; margin:0 auto 30px}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.pill-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.pill{font-size:13px; color:#bcd; background:rgba(255,255,255,.05); border:1px solid var(--border);
  padding:6px 13px; border-radius:20px}

/* Philosophy band */
.band{background:linear-gradient(180deg, rgba(76,175,80,.07), rgba(76,175,80,0));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.band h2{font-size:clamp(24px,3.4vw,34px)}
.band .big{font-size:clamp(22px,3vw,30px); font-weight:700; color:#fff; max-width:820px; margin:0 auto 16px; text-align:center}
.band .big .grn{color:var(--accent)}
.band p{max-width:760px; margin:0 auto; text-align:center; color:#c4cde0}

/* Feature groups */
.fgroup{margin-top:34px}
.fgroup h3{font-size:18px; color:#fff; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.fcard{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px}
.fcard h4{font-size:15px; margin:0 0 5px; color:#eef2f8}
.fcard p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:26px}
.step{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.step .n{width:34px; height:34px; border-radius:50%; background:var(--accent-bg); color:var(--accent);
  border:1px solid var(--accent-bd); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px}
.step h4{margin:0 0 6px; font-size:16px; color:#fff}
.step p{margin:0; color:var(--muted); font-size:14px}

/* Hosting cards */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:28px; align-items:start}
.plan{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:26px; position:relative}
.plan.feature{border-color:var(--accent-bd); box-shadow:0 0 0 1px var(--accent-bd), 0 14px 40px rgba(0,0,0,.3)}
.plan .tag{position:absolute; top:-12px; left:26px; font-size:12px; font-weight:700; padding:3px 11px; border-radius:11px}
.plan.feature .tag{background:var(--accent); color:#08220d}
.plan.alt .tag{background:#1d2c46; color:#bcd; border:1px solid var(--border2)}
.plan h3{font-size:21px; color:#fff; margin-bottom:4px}
.plan .price{font-size:15px; color:var(--accent); font-weight:700; margin-bottom:14px}
.plan.alt .price{color:#bcd}
.plan ul{list-style:none; padding:0; margin:0 0 22px}
.plan li{padding:7px 0 7px 26px; position:relative; font-size:14.5px; color:#d3dbea; border-top:1px solid var(--border)}
.plan li:first-child{border-top:0}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}
.plan .btn{width:100%; justify-content:center}

/* Account / CTA strip */
.cta-strip{text-align:center}
.cta-strip .box{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:40px 26px; max-width:760px; margin:0 auto}
.cta-strip h2{font-size:clamp(24px,3.4vw,32px)}

/* Footer */
footer.site{border-top:1px solid var(--border); padding:34px 0; color:var(--muted); font-size:13.5px}
footer.site .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
footer.site a{color:#aeb8cc}
footer.site .sp{flex:1}
.note{font-size:12.5px; color:var(--dim)}