/* ---------- palette ---------- */
:root{--blue:#0077FF;--pink:#FF2DA0;--charcoal:#0D1117;--slate:#1B1F27;--grey:#DADDE1;--white:#FFFFFF;--radius:4px}
/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--charcoal);color:var(--white);line-height:1.5}
ul{list-style:none}a{text-decoration:none;color:var(--blue);transition:.2s}

/* =============================================================
   NAVBAR
============================================================= */
.navbar{background:var(--charcoal);border-bottom:1px solid var(--slate);position:sticky;top:0;z-index:100}
.nav-inner{max-width:1200px;margin:auto;display:flex;align-items:center;padding:.9rem 1rem;gap:1.4rem}
.logo img{display:block}

.menu{display:flex;gap:2.2rem;margin-left:auto}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:.35rem;font:600 1rem 'Poppins',sans-serif;color:var(--white)}
.menu>li>a:hover{color:var(--grey)}
.menu i.fa-chevron-down{font-size:.65rem;color:inherit}

.nav-icons{display:flex;align-items:center;gap:1.3rem}
.nav-icons a,.nav-icons button{color:var(--white);font-size:1.25rem}
.nav-icons a:hover{color:var(--grey)}
.nav-icons button{background:none;border:none;cursor:pointer}
.hamburger{display:none}

/* mega */
.has-mega:hover .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega{position:absolute;left:50%;top:100%;max-width:90vw;background:var(--slate);border-radius:var(--radius);padding:1.4rem 1.2rem;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px);transition:.25s;display:flex;flex-direction:column;align-items:center;text-align:center}
.mega h4{font:600 1rem 'Poppins',sans-serif;margin-bottom:.85rem}
.tiles{display:flex;gap:.75rem;justify-content:center;flex-wrap:nowrap}
.tile{display:inline-flex;align-items:center;gap:.55rem;background:var(--charcoal);padding:.6rem 1.05rem;border:1px solid transparent;border-radius:var(--radius);font:.9rem 'Inter',sans-serif;color:var(--white);white-space:nowrap}
.tile:hover{border-color:var(--pink);color:var(--pink)}
.tile i{font-size:.95rem}

/* mobile nav overrides */
@media(max-width:920px){
  .hamburger{display:block}
  .menu{display:none;margin:0}
  .menu.show{display:flex;flex-direction:column;gap:1rem;position:absolute;right:0;top:100%;width:260px;background:var(--slate);padding:1rem 1.1rem;border-bottom-left-radius:var(--radius)}
  .menu.show .mega{display:none;position:relative;left:0;top:0;width:100%;transform:none;padding:0;margin-top:.4rem}
  .menu.show .has-mega.open .mega{display:block}
  .menu.show .tiles{flex-wrap:wrap;justify-content:flex-start}
  .nav-icons{margin-left:auto}
}

/* ============================================================= HERO ============================================================= */
.hero{background:linear-gradient(135deg,var(--blue),var(--pink));padding:5rem 1rem;text-align:center}
.hero-content{max-width:900px;margin:auto}
.hero h1{font:700 2.8rem 'Poppins',sans-serif;margin-bottom:.5rem}
.hero .sub{max-width:700px;margin:auto;font-size:1.15rem;color:var(--grey)}
.hero .price{margin:1.1rem 0;font-size:1.3rem}
.hero .price span{font-size:1.8rem;font-weight:700;color:var(--white)}
.postcode-form{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.4rem}
.postcode-form input{padding:.85rem 1rem;min-width:220px;border:none;border-radius:var(--radius);font-size:1rem}
.postcode-form button{padding:.85rem 1.25rem;border:none;border-radius:var(--radius);background:var(--white);color:var(--charcoal);font-weight:600;cursor:pointer}
.postcode-form button:hover{background:var(--pink);color:var(--white)}

/* ============================================================= PRODUCT CARDS ============================================================= */
.section-title{text-align:center;margin:3rem 0 1.2rem;font:600 1.9rem 'Poppins',sans-serif}
.card-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.card{background:var(--slate);border:1px solid var(--grey);border-radius:var(--radius);overflow:visible;text-align:center;display:flex;flex-direction:column}
.card img{width:100%;height:160px;object-fit:cover}
.card h3{font:600 1.1rem 'Poppins',sans-serif;margin:1rem 0 .25rem}
.card .price{color:var(--pink);margin-bottom:.8rem}
.card .btn{margin:.5rem auto 1.2rem;background:var(--blue);color:var(--white);padding:.55rem 1.3rem;border-radius:var(--radius);font-weight:500}
.card .btn:hover{background:var(--pink)}
.gauge-wrap{margin:1rem auto 0;width:120px}
.gauge{width:100%;height:auto}
.feat-list{margin:.6rem 0 0;padding:0;list-style:none;font-size:1.1rem;color:var(--grey)}
.feat-list li+li{margin-top:.25rem}

/* ============================================================= FOOTER ============================================================= */
.site-footer{background:var(--slate);margin-top:3rem}
.footer-cols{max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;gap:2rem;padding:2.6rem 1rem}
.footer-cols .col{flex:1 1 120px}
.logo-col,.signup-col{flex:2 1 200px}
.logo-col img{margin-bottom:1rem}
.footer-cols h4,
.footer-cols ul{text-align:center}
.footer-cols h4{font:600 1rem 'Poppins',sans-serif;margin-bottom:.6rem;color:var(--white)}
.footer-cols ul li+li{margin-top:.3rem}
.footer-cols a{color:var(--grey);font-size:.9rem}
.footer-cols a:hover{color:var(--pink)}
.contact{margin:.6rem auto 0;max-width:280px;text-align:center}
.signup-form{display:flex;gap:.6rem;margin-top:.6rem}
.signup-form input{flex:1;padding:.6rem;border:none;border-radius:var(--radius)}
.signup-form button{background:var(--pink);border:none;color:var(--white);padding:.6rem 1rem;border-radius:var(--radius);font-weight:500}
.signup-form button:hover{background:var(--blue)}
.legal-links{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;background:var(--charcoal);padding:.85rem 1rem;font-size:.85rem}
.legal-links a{color:var(--grey)}
.legal-links a:hover{color:var(--pink)}
hr{border:none;border-top:1px solid var(--charcoal)}
.copyright-row{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem;font-size:.85rem}
.social{display:flex;gap:1rem}
.social a{color:var(--grey);font-size:1.25rem}
.social a:hover{color:var(--pink)}

@media(max-width:680px){
  .copyright-row{padding:1rem .6rem}
  .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
  .logo-col{grid-column:1 / -1;text-align:center}
  .logo-col img{height:140px;max-width:280px;margin:0 auto .6rem}
  .conn-col{grid-column:1}.voice-col{grid-column:2}
  .bare-col{grid-column:1}.cloud-col{grid-column:2}
  .signup-col{grid-column:1 / -1}
}

/* ============================================================= CONTACT FORM ============================================================= */
.contact-wrap{max-width:640px;margin:2rem auto;padding:0 1rem;text-align:center}
.contact-wrap h1{font:700 2rem 'Poppins',sans-serif;margin-bottom:.4rem}
.contact-wrap .lead{color:var(--grey);margin-bottom:1.4rem}

.contact-form{display:flex;flex-direction:column;gap:1rem;text-align:left}
.contact-form label{font-size:.9rem;font-weight:500}
.contact-form input:not([type="radio"]),
.contact-form textarea{
  width:100%;padding:.7rem;border:1px solid var(--grey);border-radius:var(--radius);background:var(--slate);color:var(--white)
}
.contact-form input[type="radio"]{width:auto;margin-right:.35rem}
.contact-form textarea{resize:vertical}
.contact-form .field-pair{display:flex;gap:1rem}
.contact-form .field-pair > div{flex:1}

/* radio list */
fieldset.reason{border:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.reason legend{font-size:.9rem;font-weight:500;margin-bottom:.4rem}
.reason div{display:flex;align-items:center;margin:0;flex:0 1 140px} /* inline & wrap cleanly */

.btn.primary{align-self:flex-start;background:var(--pink);color:#fff;border:none;padding:.7rem 1.4rem;border-radius:var(--radius);font-weight:600;cursor:pointer}
.btn.primary:hover{background:var(--blue)}

@media(max-width:480px){
  .contact-form .field-pair{flex-direction:column;gap:1rem}
  .reason div{flex:0 1 48%}                       /* 2 per line on small phones */
}

/* ============================================================= MOBILE CARD TWEAK ≤ 480 ============================================================= */
@media(max-width:480px){
  .gauge-wrap{width:96%;max-width:180px}
  .feat-list,.card h3{max-width:100%;margin-left:auto;margin-right:auto}
}
/* dropdown in contact form */
.contact-form select{
  width:100%;padding:.7rem;border:1px solid var(--grey);border-radius:var(--radius);
  background:var(--slate);color:var(--white)
}
/* =============================================================
   CONTACT FORM – styled dropdown
============================================================= */
.contact-form select{
  width:100%;
  padding:.7rem 2.6rem .7rem .7rem;       /* extra right‑room for arrow */
  font-size:1rem;
  border:1px solid var(--grey);
  border-radius:var(--radius);
  background:var(--slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23DADDE1' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat right .8rem center/12px;
  color:var(--white);
  appearance:none;             /* modern browsers */
  -webkit-appearance:none;     /* Safari / iOS */
  -moz-appearance:none;        /* Firefox */
}
.contact-form select:focus{
  outline:2px solid var(--pink);
  border-color:var(--pink);
}

/* =============================================================
   HELP PILLAR NAV
============================================================= */
.help-wrap{max-width:1400px;margin:2rem auto;padding:0 1rem;text-align:center}
.page-title{font:700 2.2rem 'Poppins',sans-serif;margin-bottom:.4rem}
.lead{color:var(--grey);margin-bottom:2rem}

* 0)  cancel any residual clip‑path from old rules */
.pillar, .pillar::before, .pillar::after{clip-path:none !important}

/* 1)  wrapper unchanged */
.pillar-nav{display:flex;gap:2rem;overflow-x:auto;padding-bottom:2rem;scroll-behavior:smooth}

/* 2)  base pillar (perfect rectangle) */
.pillar{
  position:relative;background:var(--slate);
  display:flex;flex-direction:column;
  flex:0 0 88px;               /* collapsed */
  margin:0 12px;               /* small gap */
  overflow:visible;            /* show side bars */
  transition:flex .45s cubic-bezier(.4,0,.2,1);
}

/* 3)  toggle & body (unchanged from previous) */
.pillar .toggle{
  background:none;border:none;width:100%;cursor:pointer;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 .95rem/1.3 'Poppins',sans-serif;color:#fff;padding:2rem 0;
}
.pillar .body{display:none;opacity:0;transition:opacity .25s .15s;text-align:left;padding:0 2rem 2rem}
.pillar .body h2{font:600 1.6rem 'Poppins',sans-serif;margin:2rem 0 .8rem;color:#fff}
.pillar .body p{color:var(--grey);max-width:48ch;margin-bottom:1.6rem}
.pillar .cta{color:#fff;font-weight:600}.pillar .cta:hover{color:var(--pink)}

.pillar.open{flex:1 1 500px;min-width:300px}
.pillar.open .toggle{writing-mode:horizontal-tb;transform:none;font-size:1.3rem;padding:2rem 2rem .5rem;text-align:left}
.pillar.open .body{display:block;opacity:1}

/* 4)  side bars: 18 px wide pseudo‑elements OUTSIDE pillar   */
/*     each bar is skewed 45° to create a tooth or recess     */
.pillar::before,
.pillar::after{
  content:"";position:absolute;width:18px;pointer-events:none;
  background:var(--slate);     /* recess by default */
}

/* PILLAR 1  – recess LT‑top‑¾ , blue RT‑btm‑¼ */
.pillar:nth-child(1)::before{left:-18px;top:0;height:75%;transform-origin:bottom left;transform:skewY(-45deg)}
.pillar:nth-child(1)::after {right:-18px;bottom:0;height:25%;background:var(--blue);transform-origin:top right;transform:skewY(-45deg)}

/* PILLAR 2  – recess LT‑top‑¾ , blue RT‑top‑¼ */
.pillar:nth-child(2)::before{left:-18px;top:0;height:75%;transform-origin:bottom left;transform:skewY(-45deg)}
.pillar:nth-child(2)::after {right:-18px;top:0;height:25%;background:var(--blue);transform-origin:bottom right;transform:skewY(45deg)}

/* PILLAR 3  – recess LT‑btm‑¾ , blue RT‑btm‑¼ */
.pillar:nth-child(3)::before{left:-18px;bottom:0;height:75%;transform-origin:top left;transform:skewY(45deg)}
.pillar:nth-child(3)::after {right:-18px;bottom:0;height:25%;background:var(--blue);transform-origin:top right;transform:skewY(-45deg)}

/* PILLAR 4  – recess LT‑btm‑¾ , blue RT‑top‑¼ */
.pillar:nth-child(4)::before{left:-18px;bottom:0;height:75%;transform-origin:top left;transform:skewY(45deg)}
.pillar:nth-child(4)::after {right:-18px;top:0;height:25%;background:var(--blue);transform-origin:bottom right;transform:skewY(45deg)}

/* PILLAR 5  – pattern repeats (copy of pillar 1) */
.pillar:nth-child(5)::before{left:-18px;top:0;height:75%;transform-origin:bottom left;transform:skewY(-45deg)}


/* add more pillars by continuing pattern … */

/* 5)  small‑screen tweak */
@media(max-width:600px){
  .pillar-nav{gap:1rem}
  .pillar{flex:0 0 70px}
  .pillar.open{min-width:260px}
}
/* =============================================================
   INTEL PAGE – hero
============================================================= */
.intel-hero{text-align:center;margin-bottom:3rem}
.intel-hero h1{font:700 2.3rem 'Poppins',sans-serif;margin-bottom:.3rem}
.badge-new{display:inline-block;font-size:.7rem;font-weight:600;background:var(--blue);color:#fff;padding:.2rem .5rem;border-radius:var(--radius);margin-left:.4rem}
.intel-hero .strap{font:600 1.2rem;margin-bottom:.6rem}
.intel-hero .tagline{color:var(--grey);margin-bottom:1.4rem}
.spec-list{display:flex;justify-content:center;gap:1.5rem;font-size:.95rem;color:var(--white)}
.spec-list li i{margin-right:.35rem}

/* =============================================================
   SERVER PRICE CARDS
============================================================= */
.srv-section{max-width:1200px;margin:0 auto 4rem;padding:0 1rem;text-align:center}
.srv-section h2{font:600 1.8rem 'Poppins',sans-serif;margin-bottom:1.2rem}

.srv-card{
  position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  align-items:center;background:none;border:1px solid var(--grey);
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1rem;
  max-width:80%;margin-left:auto;margin-right:auto;   /* 80 % wire‑frame */
}
.srv-card .col{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;font-size:.9rem}
.srv-card .col i{font-size:1rem;color:var(--grey)}

.srv-card .price{align-items:center}
.srv-card .price strong{font-size:1.1rem;margin-bottom:.35rem}
.btn.sm{padding:.5rem 1rem;font-size:.85rem}

.srv-card.intel::before{      /* blue inner bar on left */
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--blue);border-radius:var(--radius) 0 0 var(--radius)
}
.srv-card.amd::before{background:var(--pink)}          /* for future AMD list */

/* low‑stock badge */
.badge.low-stock{
  position:absolute;top:-10px;right:-10px;padding:.3rem .55rem;
  background:var(--pink);color:#fff;font-size:.7rem;font-weight:600;
  border-radius:50%;box-shadow:0 0 0 4px var(--charcoal)
}

/* wire‑frame hover effect */
.srv-card:hover{border-color:var(--blue)}

/* icons / text alignment for small screens */
@media(max-width:920px){
  .srv-card{grid-template-columns:1fr 1fr}
  .srv-card .col{margin-bottom:.6rem}
  .srv-card .price{grid-column:1 / -1;flex-direction:row;justify-content:space-between}
}

/* =============================================================
   WHY SECTIONS
============================================================= */
.why-intel{background:var(--slate);padding:3rem 1rem;margin-bottom:3rem}
.why-intel h2,.why-unix h2{text-align:center;margin-bottom:2rem;font:600 1.9rem 'Poppins',sans-serif}
.intel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;max-width:1200px;margin:auto}
.intel-grid article h3{font:600 1.1rem 'Poppins',sans-serif;margin-bottom:.4rem}
.intel-grid article p{color:var(--grey)}

.why-unix{max-width:900px;margin:0 auto 3rem;padding:0 1rem}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;text-align:left}
.features li i{margin-right:.5rem;color:var(--blue)}
/* =============================================================
   PATCH – Intel/AMD price‑card layout
   -------------------------------------------------------------
   • columns 1‑3 narrower
   • icon + text centred in all columns
============================================================= */

/* desktop grid widths (repeat 6 columns) */
.srv-card{grid-template-columns:.7fr .7fr .8fr 1.2fr 2fr 1fr}

/* centre content in each column */
.srv-card .col{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center; /* NEW */
  text-align:center;                         /* label centred */
}

/* slight spacing tweak so icon/text don’t collide */
.srv-card .col i{margin-bottom:.25rem}

/* keep mobile stacking exactly as before */
@media(max-width:920px){
  .srv-card{grid-template-columns:1fr 1fr}   /* unchanged */
}
/* =============================================================
   AMD card tweaks – blue accent + centred columns
============================================================= */

/* blue accent bar instead of pink */
.srv-card.amd::before{
  content:"";                     /* ensure element is rendered           */
  position:absolute;
  left:0;top:0;bottom:0;          /* full height against the left edge    */
  width:6px;                      /* identical thickness to Intel bar     */
  background:var(--pink);         /* AMD accent colour                    */
  border-radius:var(--radius) 0 0 var(--radius);
}

/*  same narrower column layout & centring as Intel patch */
.srv-card.amd{grid-template-columns:.7fr .7fr .8fr 1.2fr 2fr 1fr}
.srv-card.amd .col{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center
}
.srv-card.amd .col i{margin-bottom:.25rem}
/* =============================================================
   PACKAGES PAGE  (added 2025-07-02)
============================================================= */
.packages-header{padding:1rem 1.5rem;display:flex;align-items:center}
.packages-header .logo img{height:48px}
.page-title{text-align:center;font:600 2rem 'Poppins',sans-serif;margin:2rem 0 .5rem}

.card-grid{max-width:1200px;margin:0 auto 3rem;display:grid;gap:1.8rem;
           grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--slate);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 6px 18px #0008;padding:1.6rem 1.4rem;text-align:center;
}
.card h2{font:600 1.2rem 'Poppins',sans-serif;margin:.4rem 0}
.card .gauge{width:120px;height:120px;margin:.6rem 0}
.card .speed{font-size:.9rem;color:var(--grey);margin-bottom:.3rem}
.card .features{list-style:none;font-size:.88rem;color:var(--grey);margin-bottom:.9rem}
.card .features li+li{margin-top:.25rem}
.card .price{font-size:2rem;font-weight:700;color:var(--pink);margin-bottom:.25rem}
.card .setup{font-size:.85rem;color:var(--grey);margin-bottom:1rem}
.card .btn{background:var(--blue);color:#fff;padding:.55rem 1.6rem;border-radius:30px;font-weight:600}
.card .btn:hover{background:var(--pink)}

.no-result{
  color:var(--grey);text-align:center;font-size:1.3rem;margin:6rem 0 4rem;
}
.modal{position:fixed;inset:0;background:#0008;display:none;…}
.modal.show{display:flex}
.addr-btn{…}

.spinner{
  display:inline-block;width:18px;height:18px;border:2px solid #DADDE1;
  border-right-color:transparent;border-radius:50%;vertical-align:middle;
  animation:spin 0.65s linear infinite;margin-left:.35rem
}
@keyframes spin{to{transform:rotate(360deg)}}
/* styled address selector ------------------------------------------------- */
.addr-select{
  width:100%;
  max-width:460px;
  padding:.75rem 2.4rem .75rem .9rem;
  font-size:1rem;
  border-radius:4px;
  border:1px solid var(--grey);
  background:var(--slate)
             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23DADDE1'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")
             no-repeat right .8rem center/12px;
  color:var(--white);
  appearance:none;
}
.addr-select:focus{
  outline:2px solid var(--pink);
  border-color:var(--pink);
}
@media(max-width:480px){
  .addr-select{font-size:.95rem}
}