:root{--bg:#07101e;--p:#101c2e;--p2:#0b1525;--text:#eef5ff;--muted:#9cb0c8;--line:#243754;--blue:#2f7df6;--green:#48d597}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#102b4c 0,transparent 34%),var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:20;background:#07101edc;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff10}.nav{max-width:1180px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:21px}.brand-logo{width:46px;height:46px;object-fit:cover;border-radius:12px;box-shadow:0 0 22px rgba(38,157,255,.28)}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:22px;letter-spacing:-.4px}.brand-copy small{margin-top:5px;color:#35c9ff;font-size:9px;font-weight:900;letter-spacing:.34em;padding-left:2px}header nav{display:flex;gap:22px;align-items:center;color:var(--muted);font-size:14px;font-weight:700}header nav a:hover,header nav .on{color:white}.toggle{display:none;background:none;border:0;color:white;font-size:26px}
.btn{display:inline-flex;justify-content:center;align-items:center;padding:13px 20px;border-radius:11px;background:linear-gradient(135deg,#2f7df6,#1e64db);font-weight:850;color:white;border:1px solid #ffffff18;cursor:pointer}.small{padding:10px 14px}.ghost{background:#ffffff08;border-color:var(--line)}
.hero{max-width:1180px;margin:auto;padding:88px 22px 64px;display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}.eyebrow{display:inline-block;padding:7px 11px;border:1px solid #315778;border-radius:999px;background:#244e731f;color:#b7d9ff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}h1{font-size:clamp(44px,6vw,74px);line-height:1.02;letter-spacing:-3px;margin:20px 0}.grad{background:linear-gradient(90deg,#fff,#a9d4ff,#65d7ff);background-clip:text;-webkit-background-clip:text;color:transparent}.lead{font-size:19px;color:var(--muted)}.ctas{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.micro{font-size:12px;color:#7e94ad}
.panel,.card,.form-card,.legal,.price{background:linear-gradient(160deg,var(--p),var(--p2));border:1px solid var(--line);border-radius:20px;padding:24px}.panel{box-shadow:0 24px 70px #0007}.terminal{background:#09111d;border:1px solid #26384f;border-radius:16px;overflow:hidden}.tbar{padding:12px 14px;border-bottom:1px solid #26384f;color:#9fb2c8;font-size:12px}.tbody{padding:16px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat,.row{background:#0f1b2b;border:1px solid #21344d;border-radius:12px;padding:13px}.stat span,.row small{display:block;color:#8299b4;font-size:11px}.row{margin-top:10px;display:flex;justify-content:space-between}.badge{font-size:10px;font-weight:900;color:#69e6b3;background:#143c31;padding:6px 9px;border-radius:999px}
.strip,.section{max-width:1180px;margin:auto;padding:0 22px}.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px}.trust{border:1px solid var(--line);background:#0f1c2eb8;border-radius:14px;padding:16px;color:#a9bdd4;font-size:13px}.trust b{display:block;color:white}.section{padding-top:72px;padding-bottom:72px}.head{max-width:760px;margin-bottom:32px}.head h2{font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-1.5px;margin:12px 0}.head p,.card p,.price p,.page p{color:var(--muted)}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.icon{width:42px;height:42px;display:grid;place-items:center;background:#122e53;color:#82b9ff;border-radius:11px;font-size:20px}.card h3{margin:14px 0 8px}.page{max-width:900px;margin:auto;text-align:center;padding:74px 22px 18px}.page h1{font-size:clamp(40px,5vw,62px)}
.process{display:grid;grid-template-columns:1fr 52px 1fr 52px 1fr;align-items:center}.arr{text-align:center;color:#5f7591;font-size:24px}.step{color:#7cadff;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.check{list-style:none;padding:0}.check li{padding:10px 0;border-bottom:1px solid #ffffff10;color:#b6c8dc}.check li:before{content:"✓";color:#69e6b3;margin-right:10px}
.cta{max-width:1136px;margin:20px auto 70px;padding:30px;border:1px solid #2d5d91;border-radius:22px;background:linear-gradient(120deg,#102b4d,#0b1729);display:flex;justify-content:space-between;align-items:center;gap:20px}.cta h3{margin:0;font-size:26px}.cta p{margin:4px 0;color:var(--muted)}
.form-wrap{max-width:820px;margin:auto;padding:20px 22px 80px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field label{display:block;color:#b5c5d8;font-size:13px;font-weight:750;margin-bottom:6px}.field input{width:100%;padding:12px;border:1px solid #30445f;border-radius:10px;background:#09131f;color:white}.full{grid-column:1/-1}.checkbox{display:flex!important;gap:10px}.checkbox input{width:auto}.notice{padding:14px;border:1px solid #255f4b;border-radius:12px;background:#0f2e26;color:#9de3c6;margin-bottom:16px}.error{border-color:#6e2e39;background:#2d141a;color:#ffb1b8}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#0d1828;margin-bottom:10px;overflow:hidden}.faq-q{width:100%;padding:18px 20px;background:none;border:0;color:white;text-align:left;font:inherit;font-weight:800;display:flex;justify-content:space-between}.faq-a{display:none;padding:0 20px 18px;color:var(--muted)}.faq-item.open .faq-a{display:block}
.price{position:relative}.popular{position:absolute;top:16px;right:16px;padding:5px 9px;border-radius:999px;background:#173d70;color:#8cc0ff;font-size:10px;font-weight:900}.money{font-size:40px;font-weight:900}
footer{border-top:1px solid var(--line);padding:48px 22px 24px;background:#07101b}.foot{max-width:1180px;margin:auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px}.foot p{color:#8196af}.foot h4{margin:0 0 10px}.foot>div>a:not(.brand){display:block;color:#8fa4bc;padding:4px 0}.copy{max-width:1180px;margin:30px auto 0;padding-top:20px;border-top:1px solid #1b2a3f;color:#6f839b;font-size:11px}
@media(max-width:900px){.toggle{display:block}header nav{display:none;position:absolute;top:62px;left:12px;right:12px;flex-direction:column;align-items:stretch;background:#0b1524;padding:16px;border:1px solid var(--line);border-radius:14px}header nav.open{display:flex}.hero,.split{grid-template-columns:1fr}.grid3,.strip{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr}.arr{transform:rotate(90deg)}.foot{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid3,.strip,.form-grid,.foot,.stats{grid-template-columns:1fr}.full{grid-column:auto}.cta{flex-direction:column;align-items:flex-start}}

footer .brand-logo{width:50px;height:50px}
footer .brand-copy strong{font-size:23px}
@media(max-width:620px){
  .brand-logo{width:42px;height:42px}
  .brand-copy strong{font-size:20px}
}


/* v0.4 branded hero background */
.hero-branded{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:none;
  padding-left:max(22px,calc((100vw - 1180px)/2 + 22px));
  padding-right:max(22px,calc((100vw - 1180px)/2 + 22px));
  background:
    linear-gradient(90deg,rgba(5,14,27,.95) 0%,rgba(7,20,38,.88) 35%,rgba(6,16,29,.68) 64%,rgba(5,12,22,.86) 100%),
    linear-gradient(180deg,rgba(7,16,30,.08) 0%,rgba(7,16,30,.28) 60%,rgba(7,16,30,.98) 100%),
    url('/assets/brand/pipslab-hero-background-1920.jpg') center/cover no-repeat;
  border-bottom:1px solid rgba(63,133,203,.14);
}
.hero-branded::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 31% 54%,rgba(0,186,255,.10),transparent 28%),
    radial-gradient(circle at 70% 42%,rgba(0,106,255,.08),transparent 30%);
  pointer-events:none;
}
.hero-branded::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:140px;
  z-index:-1;
  background:linear-gradient(180deg,transparent,#07101e);
  pointer-events:none;
}
.hero-branded>div:first-child,
.hero-branded>.panel{position:relative;z-index:2}
.hero-branded .panel{
  background:linear-gradient(160deg,rgba(16,28,46,.94),rgba(11,21,37,.96));
  backdrop-filter:blur(5px);
  border-color:rgba(61,107,154,.72);
  box-shadow:0 28px 70px rgba(0,0,0,.38),0 0 38px rgba(0,140,255,.08);
}
.hero-branded .lead{
  color:#b7c9dd;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.hero-branded h1{
  text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero-benefits{
  margin-top:-14px;
  position:relative;
  z-index:3;
}
.hero-benefits .trust{
  background:linear-gradient(180deg,rgba(8,25,43,.92),rgba(8,20,35,.82));
  backdrop-filter:blur(8px);
  border-color:rgba(39,93,145,.55);
}
.hero-benefits .trust b{
  color:#f4f8ff;
}
.brand-values{
  padding-top:34px;
  padding-bottom:24px;
}
.brand-values .card{
  background:linear-gradient(160deg,rgba(16,31,51,.96),rgba(9,20,35,.96));
}
@media(max-width:900px){
  .hero-branded{
    padding-left:22px;
    padding-right:22px;
    background-position:42% center;
  }
}
@media(max-width:620px){
  .hero-branded{
    background:
      linear-gradient(180deg,rgba(5,14,27,.96),rgba(6,17,31,.91)),
      url('/assets/brand/pipslab-hero-background-1920.jpg') 35% center/cover no-repeat;
  }
}


/* =========================================================
   v0.5 Premium homepage — matched to approved visual concept
   ========================================================= */
.premium-hero{
  position:relative;
  background:#06111f;
  border-bottom:1px solid rgba(50,128,201,.24);
  overflow:hidden;
}
.premium-hero-bg{
  position:absolute;
  inset:0 0 112px 0;
  background:
    linear-gradient(90deg,rgba(4,13,25,.90) 0%,rgba(5,17,31,.64) 38%,rgba(3,12,23,.38) 65%,rgba(4,12,23,.72) 100%),
    linear-gradient(180deg,rgba(5,15,28,.05) 0%,rgba(5,15,28,.04) 56%,rgba(5,15,28,.82) 100%),
    url('/assets/brand/pipslab-hero-background-1920.jpg') center 42%/cover no-repeat;
  filter:saturate(1.18) contrast(1.04) brightness(1.12);
}
.premium-hero-bg:after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 37% 44%,rgba(0,198,255,.08),transparent 25%),
    radial-gradient(circle at 77% 35%,rgba(0,121,255,.10),transparent 30%);
}
.premium-hero-inner{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 44px));
  margin:0 auto;
  min-height:620px;
  padding:64px 0 52px;
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(440px,1.04fr);
  gap:68px;
  align-items:center;
}
.premium-copy{position:relative;z-index:3;padding-top:4px}
.premium-copy .eyebrow{
  padding:6px 13px;
  font-size:11px;
  border-color:#285e8a;
  background:rgba(8,35,60,.58);
  letter-spacing:.13em;
}
.premium-copy h1{
  margin:22px 0 18px;
  font-size:clamp(48px,4.7vw,68px);
  line-height:.98;
  letter-spacing:-2.8px;
  color:#f5f8ff;
  text-shadow:0 7px 28px rgba(0,0,0,.4);
}
.premium-copy h1 span{
  background:linear-gradient(180deg,#f0f7ff 0%,#77ddff 68%,#18c2f5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.premium-lead{
  max-width:610px;
  margin:0;
  color:#b8cae0;
  font-size:17px;
  line-height:1.55;
}
.premium-copy .ctas{margin-top:22px}
.premium-primary{
  padding:13px 20px;
  box-shadow:0 10px 30px rgba(25,115,255,.28), inset 0 1px rgba(255,255,255,.15);
}
.premium-primary span{font-size:19px;margin-left:7px}
.premium-secondary{
  background:rgba(4,16,30,.68);
  border:1px solid #188ff0;
  box-shadow:none;
  color:#eef7ff;
}
.play-dot{
  width:26px;height:26px;border:2px solid #10a8ff;border-radius:50%;
  display:inline-grid;place-items:center;color:#39c7ff;font-size:10px;
}
.premium-monitor-wrap{position:relative;z-index:4;display:flex;justify-content:flex-end}
.premium-monitor{
  width:min(100%,510px);
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(80,132,180,.48);
  background:rgba(7,18,31,.88);
  box-shadow:0 26px 70px rgba(0,0,0,.38),0 0 38px rgba(0,152,255,.06);
  backdrop-filter:blur(8px);
}
.monitor-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 14px 15px;
  color:#bdcde0;font-size:13px;
  border-bottom:1px solid rgba(105,141,177,.26);
}
.monitor-live{color:#55e89e;font-weight:800}.monitor-live i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#31e589;margin-right:6px;box-shadow:0 0 12px rgba(49,229,137,.5)}
.monitor-body{padding:12px}
.monitor-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:10px}
.monitor-stats>div{
  background:rgba(13,29,49,.94);border:1px solid rgba(74,111,150,.36);
  border-radius:12px;padding:13px 12px;
}
.monitor-stats small,.monitor-text small{display:block;color:#8da8c5;font-size:11px}
.monitor-stats strong{display:block;margin-top:4px;font-size:15px;color:#fff}.monitor-stats .online{color:#54e3aa}
.monitor-item{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;
  padding:12px;margin-top:9px;border-radius:12px;
  background:rgba(12,29,48,.95);border:1px solid rgba(70,108,146,.34);
}
.monitor-icon{width:36px;height:36px;display:grid;place-items:center;color:#19c3ff;font-size:23px}
.monitor-text strong{display:block;font-size:14px}.monitor-text small{margin-top:2px}
.monitor-pill{padding:7px 11px;border-radius:999px;background:#0e493a;color:#57e6ae;font-size:10px}
.bars-icon{display:flex;align-items:flex-end;justify-content:center;gap:2px}.bars-icon i{display:block;width:3px;border:1px solid #15bff8}.bars-icon i:nth-child(1){height:9px}.bars-icon i:nth-child(2){height:16px}.bars-icon i:nth-child(3){height:23px}.bars-icon i:nth-child(4){height:29px}
.wifi-icon span{position:absolute;border:2px solid #1fe6bb;border-color:#1fe6bb transparent transparent transparent;border-radius:50%;transform:rotate(0deg)}.wifi-icon{position:relative}.wifi-icon span:nth-child(1){width:29px;height:29px;top:7px}.wifi-icon span:nth-child(2){width:20px;height:20px;top:12px}.wifi-icon span:nth-child(3){width:5px;height:5px;background:#1fe6bb;border:0;top:25px}
.hero-phrases{position:absolute;color:#2796ed;font-size:10px;line-height:1.8;letter-spacing:.31em;opacity:.72;font-weight:750;z-index:1}
.hero-phrases i{display:block;width:25px;height:1px;background:#26a7ff;margin-top:7px}.phrase-top{left:49%;top:94px}.phrase-bottom{left:52%;bottom:112px}.phrase-right{right:0;top:78px;text-align:right}.phrase-right i{margin-left:auto}
.premium-benefits{
  position:relative;z-index:3;
  width:min(1180px,calc(100% - 44px));
  margin:0 auto;
  min-height:112px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  border-top:1px solid rgba(48,124,193,.15);
}
.benefit{
  min-height:64px;
  display:flex;align-items:center;gap:14px;
  padding:9px 18px;
  border-right:1px solid rgba(92,128,164,.24);
}
.benefit:first-child{padding-left:0}.benefit:last-child{border-right:0}
.benefit-icon{width:36px;flex:0 0 36px;text-align:center;color:#18c9ff;font-size:31px;font-weight:800}
.benefit strong{display:block;color:#f5f8ff;font-size:13px}.benefit small{display:block;color:#88a1bb;font-size:11px;margin-top:3px}
.values-band{
  background:#071321;
  border-top:1px solid rgba(36,92,143,.20);
  border-bottom:1px solid rgba(36,92,143,.20);
  padding:24px 22px 34px;
}
.values-grid{
  max-width:1180px;margin:auto;
  display:grid;grid-template-columns:1fr 1fr 1fr 1.05fr;gap:16px;
}
.value-card{
  min-height:152px;
  padding:22px 20px;
  border-radius:18px;
  border:1px solid rgba(52,96,138,.42);
  background:linear-gradient(160deg,rgba(13,32,53,.96),rgba(8,23,39,.96));
  display:flex;gap:16px;align-items:flex-start;
}
.value-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;color:#1ac6ff;font-size:25px}
.value-card h3{margin:1px 0 9px;font-size:16px}.value-card p{margin:0;color:#a9bdd2;font-size:12px;line-height:1.62}
.value-highlight{
  position:relative;overflow:hidden;display:block;
  padding:25px 26px;
  border-color:rgba(54,151,255,.56);
  background:linear-gradient(135deg,#0dbdf2 0%,#1475ff 48%,#123bd4 100%);
  box-shadow:0 18px 45px rgba(0,91,255,.18);
}
.value-highlight:after{content:"";position:absolute;inset:auto -40px -55px auto;width:150px;height:150px;background:radial-gradient(circle,rgba(73,232,255,.28),transparent 65%)}
.highlight-arrow{color:#5eeeff;font-size:28px;line-height:1}.value-highlight strong{display:block;margin-top:13px;font-size:24px;line-height:1.35;color:white}.value-highlight i{display:block;width:26px;height:2px;background:#45dfff;margin-top:18px}
.lower-home{padding-top:62px}
@media(max-width:980px){
  .premium-hero-inner{grid-template-columns:1fr;gap:34px;padding-top:50px}
  .premium-monitor-wrap{justify-content:flex-start}
  .premium-monitor{width:100%;max-width:620px}
  .hero-phrases{display:none}
  .premium-benefits{grid-template-columns:1fr 1fr;padding:18px 0}
  .benefit:nth-child(2){border-right:0}
  .values-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .premium-hero-bg{inset:0;background-position:37% center;filter:saturate(1.1) brightness(.84)}
  .premium-hero-inner{width:calc(100% - 30px);min-height:auto;padding:38px 0 30px}
  .premium-copy h1{font-size:46px}
  .premium-lead{font-size:15px}
  .premium-benefits{width:calc(100% - 30px);grid-template-columns:1fr}
  .benefit{border-right:0;border-bottom:1px solid rgba(92,128,164,.18);padding:14px 4px}
  .monitor-stats{grid-template-columns:1fr 1fr 1fr}
  .monitor-item{grid-template-columns:36px 1fr auto;padding:10px}
  .monitor-text strong{font-size:12px}.monitor-text small{font-size:10px}
  .values-grid{grid-template-columns:1fr}
}