:root{
  --bg:#070a12;
  --bg2:#0b101b;
  --paper:#f5f6f8;
  --paper2:#ffffff;
  --text:#f6f7fb;
  --ink:#111722;
  --muted:#a7b0c0;
  --muted-dark:#687384;
  --blue:#2f5fff;
  --blue2:#86a0ff;
  --line:rgba(255,255,255,.11);
  --line-dark:#dde2e9;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 44px));margin:auto}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,10,18,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  min-height:80px;
  display:flex;
  align-items:center;
  gap:30px;
}
.brand img{height:60px;width:auto}
.desktop-nav{
  display:flex;
  gap:30px;
  margin-left:auto;
}
.desktop-nav a{
  position:relative;
  color:#c8d0df;
  font-size:14px;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-7px;
  height:1px;background:var(--blue2);
  transition:right .24s ease;
}
.desktop-nav a:hover::after{right:0}
.header-right{display:flex;align-items:center;gap:16px}
.langs{display:flex;gap:4px}
.langs span{
  color:#69758a;
  font-size:10px;
  padding:4px 3px;
}
.langs span.active{color:#fff;font-weight:700}
.header-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
}
.header-cta span{transition:transform .2s ease}
.header-cta:hover span{transform:translate(2px,-2px)}
.menu-button{
  display:none;
  width:40px;height:40px;
  border:0;background:none;
  align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
}
.menu-button span{width:18px;height:2px;background:#fff}
.mobile-nav{
  display:none;
  background:#080c15;
  border-top:1px solid rgba(255,255,255,.07);
}
.mobile-nav a{
  display:block;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#d9e1ef;
}

/* HERO — restrained motion instead of AI blobs */
.hero{
  position:relative;
  min-height:790px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(19,31,64,.10), transparent 36%),
    var(--bg);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      560px circle at var(--mx,76%) var(--my,30%),
      rgba(47,95,255,.20),
      rgba(47,95,255,.065) 35%,
      transparent 72%
    );
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.grid-layer{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(to bottom, black 0%, rgba(0,0,0,.7) 58%, transparent 100%);
  opacity:.34;
  animation:gridMove 26s linear infinite;
}


.hero-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Ainult üks kerge tähtede kiht.
   Ei kasuta blur'i, filter'eid, mix-blend-mode'i ega transform-animatsioone. */
.stars-a{
  opacity:.18;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 31%, rgba(169,193,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 29% 13%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 25%, rgba(149,176,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 49% 15%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 11%, rgba(163,187,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.82) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 16%, rgba(154,181,255,.82) 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 29%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14% 55%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 48%, rgba(159,184,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 57% 58%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 50%, rgba(164,190,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 89% 61%, rgba(255,255,255,.76) 0 1px, transparent 1.5px),
    radial-gradient(circle at 21% 77%, rgba(158,183,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47% 74%, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 82%, rgba(160,186,255,.68) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 73%, rgba(255,255,255,.7) 0 1px, transparent 1.5px);
  animation:lightStarFade 8s ease-in-out infinite;
}

/* Ülejäänud kihid jäävad HTML-is alles, aga ei renderdu. */
.stars-b,
.stars-c{
  display:none;
}

@keyframes lightStarFade{
  0%,100%{opacity:.06}
  35%{opacity:.24}
  55%{opacity:.11}
  78%{opacity:.20}
}

@media(max-width:700px){
  .stars-a{
    opacity:.12;
    animation-duration:10s;
  }
}

@media(prefers-reduced-motion:reduce){
  .stars-a{
    animation:none;
    opacity:.12;
  }
}

/* remove the overdesigned decoration from V17 */
.glow,.beam,.float-card,.float-dot{display:none}

.hero-grid{
  position:relative;
  z-index:2;
  min-height:790px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:88px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  margin-bottom:18px;
  color:#9fb4ff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-title{
  margin:0;
  font-family:"Manrope",sans-serif;
  font-size:clamp(64px,7.9vw,106px);
  line-height:.91;
  letter-spacing:-.06em;
}
.hero-title .blue{color:#8aa6ff}
.line{display:block;overflow:hidden}
.line>span{
  display:block;
  transform:translateY(115%);
  animation:titleIn .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.line:nth-child(2)>span{animation-delay:.12s}
.line:nth-child(3)>span{animation-delay:.24s}
@keyframes titleIn{to{transform:translateY(0)}}
.hero-lead{
  max-width:590px;
  margin:28px 0 0;
  color:#c0c8d6;
  font-size:18px;
  line-height:1.82;
}
.hero-actions{
  display:flex;gap:20px;align-items:center;
  margin-top:34px;flex-wrap:wrap;
}
.button-primary{
  min-height:50px;
  padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);
  color:#fff;
  font-size:14px;font-weight:700;
  transition:transform .2s ease,background .2s ease;
}
.button-primary:hover{background:#3c69ff;transform:translateY(-2px)}
.button-secondary{
  min-height:50px;
  display:inline-flex;align-items:center;
  color:#d0d7e6;
  font-size:14px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.32);
  padding:0 2px;
}
.hero-tags{display:none}

.hero-panel{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.panel-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:16px 0;
  color:#818da3;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.panel-big{
  margin:0;
  padding:38px 0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.panel-big strong{
  display:block;
  max-width:400px;
  font-family:"Manrope";
  font-size:30px;
  line-height:1.27;
  letter-spacing:-.03em;
}
.panel-big p{
  margin:14px 0 0;
  max-width:420px;
  color:#b7c0d0;
  line-height:1.7;
}
.panel-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0;
  gap:0;
}
.panel-stats>div{padding:18px 0}
.panel-stats>div+div{
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.10);
}
.panel-stats span{
  display:block;
  margin-bottom:5px;
  color:#7f8a9e;
  font-size:10px;
  text-transform:uppercase;
}
.panel-stats strong{font-size:15px}

/* TICKER */
.marquee-strip{
  width:100%;
  overflow:hidden;
  background:#05070c;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.marquee-track{
  display:flex;
  width:max-content;
  padding:15px 0;
  color:#7482a4;
  font-size:11px;
  letter-spacing:.1em;
  white-space:nowrap;
  animation:marqueeMove 38s linear infinite;
  will-change:transform;
}

.marquee-group{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:18px;
  padding-right:18px;
}

/* Kaks identset gruppi = täiesti sujuv lõputu liikumine.
   Kuna üks grupp on ekraanist laiem, tuleb tekst nähtavale ka paremast servast. */
@keyframes marqueeMove{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:80s}
}

/* COMMON SECTIONS */
.section{padding:112px 0}
.dark-section{background:#0a0e18;color:#fff}
.light-section{background:#f5f6f8;color:var(--ink)}
.section-heading{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  margin-bottom:54px;
}
.section-label{
  color:#9fb4ff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.section-heading h2{
  margin:0;
  max-width:820px;
  font-family:"Manrope";
  font-size:clamp(42px,5.2vw,64px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.section-heading p{
  margin:14px 0 0;
  color:#aab3c4;
  line-height:1.75;
}
.light-section .section-label{color:var(--blue)}
.light-section .section-heading p{color:#657080}

/* SERVICES — rows instead of SaaS cards */
.services-grid{
  display:block;
  border-top:1px solid rgba(255,255,255,.24);
}
.service-card,
.service-card.featured{
  display:grid;
  grid-template-columns:250px 1fr 160px;
  gap:24px;
  align-items:center;
  min-height:0;
  padding:29px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:padding .25s ease,background .25s ease;
}
.service-card:hover,
.service-card.featured:hover{
  transform:none;
  padding-left:14px;
  padding-right:14px;
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
}
.service-head{
  display:block;
}
.service-card h3{
  margin:0;
  font-size:24px;
}
.service-card p{
  margin:0;
  color:#b5bece;
  line-height:1.7;
}
.service-card a{
  justify-self:end;
  display:inline-flex;
  gap:8px;
  color:#aabfff;
  font-size:13px;
  font-weight:700;
}
.service-card a span{transition:transform .2s ease}
.service-card a:hover span{transform:translate(3px,-3px)}

/* PROJECT */
.project-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:50px;
  align-items:start;
}
.project-visual{
  background:#fff;
  border:1px solid #d9dee6;
  box-shadow:0 26px 65px rgba(28,38,63,.08);
  overflow:hidden;
}
.project-screen{overflow:hidden}
.project-screen img{
  width:100%;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.project-visual:hover img{transform:scale(1.025)}
.project-meta-bar{
  min-height:52px;
  padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid #e1e5ec;
  color:#687280;
  font-size:12px;
}
.project-tag{
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.project-copy h3{
  margin:18px 0 16px;
  font-family:"Manrope";
  font-size:46px;
  line-height:1.02;
  letter-spacing:-.04em;
}
.project-copy p{
  margin:0;
  color:#657080;
  line-height:1.8;
}
.project-copy dl{margin:32px 0 0}
.project-copy dl div{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;
  border-top:1px solid #dbe0e8;
}
.project-copy dt{color:#8b94a1;font-size:12px}
.project-copy dd{margin:0;font-size:12px;font-weight:600}



.portfolio-projects{
  display:grid;
  gap:72px;
}
.portfolio-project + .portfolio-project{
  padding-top:72px;
  border-top:1px solid #dbe0e8;
}
.project-layout.is-reverse{
  grid-template-columns:.8fr 1.2fr;
}
.project-layout.is-reverse .project-visual{
  grid-column:2;
  grid-row:1;
}
.project-layout.is-reverse .project-copy{
  grid-column:1;
  grid-row:1;
}
.portfolio-public-empty{
  margin:0;
  padding:30px 0;
  color:#7d8794;
  border-top:1px solid #dbe0e8;
}
@media(max-width:900px){
  .portfolio-projects{gap:48px}
  .portfolio-project + .portfolio-project{padding-top:48px}
  .project-layout.is-reverse{grid-template-columns:1fr}
  .project-layout.is-reverse .project-visual,
  .project-layout.is-reverse .project-copy{
    grid-column:auto;
    grid-row:auto;
  }
}

/* PRICING — clean comparison matrix */
.pricing-section{border-top:1px solid rgba(255,255,255,.05)}
.pricing-title-block{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  margin-bottom:52px;
}
.pricing-title-block h2{
  margin:0;
  max-width:760px;
  font-family:"Manrope";
  font-size:clamp(42px,5vw,62px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.pricing-title-block p{
  margin:14px 0 0;
  max-width:720px;
  color:#aab3c4;
  line-height:1.75;
}
.price-matrix{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.matrix-plan{
  position:relative;
  min-width:0;
  padding:30px 26px 28px;
  display:flex;
  flex-direction:column;
}
.matrix-plan + .matrix-plan{
  border-left:1px solid rgba(255,255,255,.11);
}
.matrix-plan.recommended{
  background:linear-gradient(180deg,rgba(47,95,255,.09),rgba(47,95,255,.025));
}
.matrix-recommended{
  position:absolute;
  top:-10px;
  left:26px;
  color:#9db3ff;
  background:#0a0e18;
  padding:0 7px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.matrix-top{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.matrix-name{
  font-size:21px;
  font-weight:700;
}
.matrix-price{
  display:flex;
  align-items:flex-end;
  gap:7px;
  color:#e1e8ff;
  font-family:"Manrope";
  font-size:42px;
  font-weight:700;
  line-height:.95;
  letter-spacing:-.045em;
}
.matrix-price small{
  margin-bottom:5px;
  color:#77839b;
  font-family:"Inter";
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.matrix-desc{
  min-height:74px;
  margin:22px 0 22px;
  color:#aeb7c7;
  font-size:13px;
  line-height:1.65;
}
.matrix-plan ul{
  list-style:none;
  padding:0;
  margin:0 0 28px;
}
.matrix-plan li{
  position:relative;
  padding:8px 0 8px 14px;
  color:#cbd3e1;
  font-size:12px;
  line-height:1.45;
}
.matrix-plan li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7898ff;
}
.matrix-plan a{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  color:#b8c8ff;
  font-size:12px;
  font-weight:700;
}
.matrix-plan a span{transition:transform .2s ease}
.matrix-plan a:hover span{transform:translate(3px,-3px)}
.hosting-matrix{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:28px;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hosting-matrix>div:first-child strong{
  display:block;
  font-size:18px;
}
.hosting-matrix>div:first-child span{
  display:block;
  margin-top:6px;
  color:#8994a8;
  font-size:12px;
}
.hosting-price{
  color:#dce5ff;
  font-family:"Manrope";
  font-size:30px;
  font-weight:700;
  white-space:nowrap;
}
.hosting-price small{
  margin-right:7px;
  color:#748199;
  font-family:"Inter";
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hosting-price em{
  color:#8290a8;
  font-family:"Inter";
  font-size:11px;
  font-style:normal;
}
.hosting-matrix>a{
  display:inline-flex;
  gap:8px;
  color:#b8c8ff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.hosting-matrix>a span{transition:transform .2s ease}
.hosting-matrix>a:hover span{transform:translate(3px,-3px)}
@media(max-width:1050px){
  .price-matrix{grid-template-columns:repeat(2,1fr)}
  .matrix-plan:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.11)}
  .matrix-plan:nth-child(4){border-top:1px solid rgba(255,255,255,.11)}
}
@media(max-width:760px){
  .pricing-title-block{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:32px;
  }

  /* Telefonis 4 põhipaketti 2 × 2 ruudustikus */
  .price-matrix{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .matrix-plan{
    padding:22px 14px 20px;
  }

  /* 2 × 2 kaartide piirjooned */
  .matrix-plan + .matrix-plan{
    border-left:1px solid rgba(255,255,255,.11);
  }

  .matrix-plan:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(255,255,255,.11);
  }

  .matrix-plan:nth-child(4){
    border-top:1px solid rgba(255,255,255,.11);
  }

  .matrix-name{
    font-size:16px;
  }

  .matrix-top{
    gap:12px;
  }

  .matrix-price{
    gap:4px;
    font-size:30px;
  }

  .matrix-price small{
    margin-bottom:3px;
    font-size:7px;
  }

  .matrix-desc{
    min-height:62px;
    margin:16px 0 14px;
    font-size:11px;
    line-height:1.5;
  }

  .matrix-plan ul{
    margin-bottom:18px;
  }

  .matrix-plan li{
    padding:6px 0 6px 11px;
    font-size:10px;
    line-height:1.35;
  }

  .matrix-plan li::before{
    top:10px;
    width:4px;
    height:4px;
  }

  .matrix-plan a{
    gap:5px;
    font-size:10px;
  }

  .matrix-recommended{
    left:14px;
    top:-9px;
    font-size:7px;
    padding:0 5px;
  }

  .hosting-matrix{
    grid-template-columns:1fr;
  }
}

@media(max-width:390px){
  .matrix-plan{
    padding-left:11px;
    padding-right:11px;
  }

  .matrix-name{
    font-size:14px;
  }

  .matrix-price{
    font-size:26px;
  }

  .matrix-desc{
    font-size:10px;
  }

  .matrix-plan li{
    font-size:9px;
  }
}


/* CONTACT */
.contact-section{
  background:#f5f6f8;
  color:var(--ink);
}
.contact-section .section-label{color:var(--blue)}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
}
.contact-copy h2{
  margin:18px 0;
  font-family:"Manrope";
  font-size:clamp(46px,6vw,72px);
  line-height:.98;
  letter-spacing:-.045em;
}
.contact-copy p{
  max-width:520px;
  color:#667080;
  line-height:1.8;
}
.contact-copy>a{
  display:inline-block;
  margin-top:22px;
  padding-bottom:4px;
  border-bottom:1px solid #a9b2c0;
  font-weight:600;
}
form{
  padding:28px;
  background:#fff;
  box-shadow:0 25px 55px rgba(26,35,58,.07);
}
form label{display:block;margin-bottom:18px}
form label span{
  display:block;
  margin-bottom:7px;
  color:#5e6878;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
form input,form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid #d0d5de;
  padding:10px 0;
  outline:none;
  background:transparent;
}
form input:focus,form textarea:focus{border-color:var(--blue)}
form button{
  border:0;
  min-height:46px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
form button span{transition:transform .2s ease}
form button:hover span{transform:translate(3px,-3px)}

footer{
  padding:24px 0;
  background:#05070d;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-inner{
  display:flex;align-items:center;gap:28px;
}
.footer-inner img{height:48px;width:auto}
.footer-inner span{color:#8390a8;font-size:12px}
.footer-inner a{margin-left:auto;color:#b9c5da;font-size:12px}

/* MOTION */
.reveal{
  opacity:0;
  transform:translateY(18px);
  animation:fadeUp .7s .12s cubic-bezier(.2,.7,.2,1) forwards;
}
.delay-2{animation-delay:.34s}
.delay-3{animation-delay:.52s}
.delay-4{animation-delay:.66s}
@keyframes fadeUp{to{opacity:1;transform:none}}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal-on-scroll.visible{
  opacity:1;
  transform:none;
}

@media(max-width:980px){
  .desktop-nav,.header-cta,.langs{display:none}
  .menu-button{display:flex;margin-left:auto}
  .hero-grid,
  .section-heading,
  .project-layout,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .hero-grid{gap:48px}
  .service-card,
  .service-card.featured{
    grid-template-columns:1fr;
  }
  .service-card a{justify-self:start}
  .price-card,
  .price-card.featured{
    grid-template-columns:1fr 120px;
  }
  .price-card p,
  .price-card ul{grid-column:1/3}
  .price-card a{grid-column:2}
}

@media(max-width:650px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .header-inner{min-height:70px}
  .brand img{height:52px}
  .hero{min-height:auto}
  .hero-grid{min-height:auto;padding:66px 0}
  .hero-title{font-size:52px}
  .hero-lead{font-size:16px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .panel-stats{grid-template-columns:1fr}
  .panel-stats>div+div{
    padding-left:0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .section{padding:82px 0}
  .section-heading{grid-template-columns:1fr;gap:14px}
  .service-card,
  .service-card.featured{
    grid-template-columns:1fr;
    gap:14px;
  }
  .project-copy h3{font-size:34px}
  .price-card,
  .price-card.featured{
    margin:0;
    padding:20px 0;
    grid-template-columns:1fr;
  }
  .price-card p,
  .price-card ul,
  .price-card a{grid-column:auto}
  .price-card ul{justify-content:flex-start}
  .price-card a{justify-self:start}
  .hosting-bar{grid-template-columns:1fr}
  .contact-section{padding:82px 0}
  form{padding:22px 18px}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-inner a{margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .reveal,.reveal-on-scroll{opacity:1;transform:none}
}


/* Safe login link — isolated from the rest of the page */
.login-link{
  color:#cbd4e6;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:color .2s ease;
}
.login-link:hover{
  color:#fff;
}
@media(max-width:980px){
  .login-link{
    display:none;
  }
}