:root{
  --ink:#0A0E17;
  --ink-2:#111828;
  --paper:#F7F9FC;
  --paper-2:#ECEFF5;
  --blue:#FF3719;
  --blue-2:#FF6A4D;
  --cyan:#FFB020;
  --graphite:#1C2333;
  --slate:#6B7789;
  --bg: var(--ink);
  --bg-soft: var(--ink-2);
  --text: #E8ECF6;
  --text-dim: #8D97AC;
  --card: rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.08);
  --grid-line: rgba(255,55,25,0.14);
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
}
[data-theme="light"]{
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  --text: var(--graphite);
  --text-dim: var(--slate);
  --card: #ffffff;
  --card-border: rgba(28,35,51,0.08);
  --grid-line: rgba(255,55,25,0.10);
  --shadow: 0 20px 50px rgba(28,35,51,0.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  transition:background .4s ease, color .4s ease;
  overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--blue);color:#fff;}

.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 75%);
}

header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 5vw;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--card-border);
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:var(--logo-h,34px);display:block;transition:height .25s ease;}
#logo-fallback{width:var(--logo-h,34px);height:var(--logo-h,34px);}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:1.15rem;letter-spacing:-0.02em;}
.brand-slogan{font-size:0.62rem;color:var(--text-dim);letter-spacing:0.06em;text-transform:uppercase;margin-top:2px;}
nav{display:flex;gap:36px;align-items:center;}
nav a{font-size:0.92rem;color:var(--text-dim);position:relative;transition:color .2s;}
nav a:hover{color:var(--text);}
nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--cyan);transition:width .25s;}
nav a:hover::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:14px;}
.theme-toggle{
  width:44px;height:24px;border-radius:20px;border:1px solid var(--card-border);
  background:var(--card);position:relative;cursor:pointer;
}
.theme-toggle .knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--blue);transition:transform .3s ease;
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
[data-theme="light"] .theme-toggle .knob{transform:translateX(20px);background:#F5A623;}
.cta-btn{
  padding:10px 20px;border-radius:8px;border:1px solid var(--blue);
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;font-size:0.88rem;font-weight:600;cursor:pointer;
  box-shadow:0 8px 24px rgba(255,55,25,0.35);
  transition:transform .2s, box-shadow .2s;
  display:inline-block;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,55,25,0.45);}
.cta-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--card-border);box-shadow:none;}
.cta-btn.ghost:hover{border-color:var(--blue);}

main{position:relative;z-index:1;}
section{padding:110px 5vw;position:relative;}
.eyebrow{
  font-family:'JetBrains Mono';font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--cyan);}
h2.section-title{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-0.02em;margin-bottom:14px;}
.section-sub{color:var(--text-dim);font-size:1.02rem;max-width:560px;line-height:1.6;margin-bottom:56px;}

.hero{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;
  padding-top:80px;min-height:88vh;
}
.hero h1{
  font-family:'Space Grotesk';font-weight:700;font-size:clamp(2.4rem,4.6vw,4.1rem);
  line-height:1.05;letter-spacing:-0.03em;margin-bottom:24px;
}
.hero h1 .accent{color:var(--cyan);}
.hero p.lead{color:var(--text-dim);font-size:1.12rem;max-width:480px;line-height:1.7;margin-bottom:36px;}
.hero-actions{display:flex;gap:16px;margin-bottom:44px;}
.hero-stats{display:flex;gap:40px;}
.hero-stats .stat b{display:block;font-family:'Space Grotesk';font-size:1.6rem;font-weight:700;}
.hero-stats .stat span{font-size:0.78rem;color:var(--text-dim);}

.blueprint-wrap{position:relative;}
.blueprint-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(255,55,25,0.25));}
.bp-draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.6s ease forwards;}
.bp-draw.d2{animation-delay:.4s;}
.bp-draw.d3{animation-delay:.8s;}
.bp-draw.d4{animation-delay:1.1s;}
.bp-fill{opacity:0;animation:fadein .8s ease forwards;}
.bp-fill.d5{animation-delay:1.6s;}
.bp-fill.d6{animation-delay:1.9s;}
.bp-fill.d7{animation-delay:2.1s;}
.bp-fill.d8{animation-delay:2.3s;}
.bp-cursor{animation:cursormove 2.6s ease forwards, blink 1s step-end infinite 2.6s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadein{to{opacity:1;}}
@keyframes cursormove{
  0%{transform:translate(40px,40px);opacity:1;}
  30%{transform:translate(320px,40px);}
  50%{transform:translate(320px,120px);}
  70%{transform:translate(40px,220px);}
  100%{transform:translate(280px,260px);opacity:1;}
}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .bp-draw,.bp-fill,.bp-cursor{animation:none !important;stroke-dashoffset:0;opacity:1;}
}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.service-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:34px 28px;transition:transform .3s, border-color .3s;
}
.service-card:hover{transform:translateY(-6px);border-color:var(--blue);}
.service-icon{
  width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:20px;
}
.service-card h3{font-family:'Space Grotesk';font-size:1.15rem;margin-bottom:10px;}
.service-card p{color:var(--text-dim);font-size:0.92rem;line-height:1.6;}

.hosting-box{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;}
.hosting-features{display:flex;flex-direction:column;gap:20px;}
.hosting-feature{display:flex;gap:16px;align-items:flex-start;}
.hf-icon{
  width:38px;height:38px;flex:none;border-radius:9px;background:var(--card);border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.hosting-feature b{font-family:'Space Grotesk';font-size:0.98rem;display:block;margin-bottom:4px;}
.hosting-feature p{color:var(--text-dim);font-size:0.86rem;line-height:1.5;}
.server-visual{display:flex;justify-content:center;}
.server-visual svg{width:100%;max-width:320px;filter:drop-shadow(0 30px 50px rgba(255,55,25,0.2));}
.server-led{animation:ledpulse 1.8s ease-in-out infinite;}
.server-led.led-2{animation-delay:.3s;}
.server-led.led-3{animation-delay:.6s;}
.server-pulse{stroke-dasharray:6 6;animation:pulseflow 1.4s linear infinite;}
@keyframes ledpulse{0%,100%{opacity:1;}50%{opacity:0.25;}}
@keyframes pulseflow{to{stroke-dashoffset:-24;}}
@media (prefers-reduced-motion: reduce){
  .server-led,.server-pulse{animation:none !important;}
}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.gallery-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;
  transition:transform .3s, border-color .3s;
}
.gallery-card:hover{transform:translateY(-6px);border-color:var(--blue);}
.gallery-visual{height:200px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.gallery-visual svg{width:100%;height:100%;}
.gallery-card-body{padding:20px 22px;}
.gallery-card-body h4{font-family:'Space Grotesk';font-size:1rem;margin-bottom:6px;}
.gallery-card-body p{color:var(--text-dim);font-size:0.85rem;line-height:1.5;}

/* teaser gazduire pe homepage */
.hosting-teaser{
  background:var(--card);border:1px solid var(--card-border);border-radius:20px;
  padding:44px 46px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}
.hosting-teaser-text h3{font-family:'Space Grotesk';font-size:1.5rem;margin-bottom:10px;}
.hosting-teaser-text p{color:var(--text-dim);max-width:440px;line-height:1.6;}
.hosting-teaser-icon{
  width:70px;height:70px;flex:none;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}

/* pagina dedicata gazduire */
.host-hero{text-align:center;padding-top:70px;padding-bottom:60px;max-width:720px;margin:0 auto;}
.host-hero h1{font-family:'Space Grotesk';font-weight:700;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-0.02em;margin-bottom:20px;}
.host-hero p{color:var(--text-dim);font-size:1.08rem;line-height:1.7;margin-bottom:30px;}
.host-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.host-badge{
  font-family:'JetBrains Mono';font-size:0.75rem;color:var(--text-dim);
  border:1px solid var(--card-border);border-radius:20px;padding:7px 16px;
}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.price-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  padding:36px 30px;position:relative;transition:transform .3s;
}
.price-card:hover{transform:translateY(-6px);}
.price-card.featured{border-color:var(--blue);box-shadow:var(--shadow);}
.price-card.featured::before{
  content:'RECOMANDAT';position:absolute;top:-12px;left:30px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  font-family:'JetBrains Mono';font-size:0.62rem;letter-spacing:0.1em;
  padding:5px 12px;border-radius:6px;
}
.price-card h3{font-family:'Space Grotesk';font-size:1.2rem;margin-bottom:6px;}
.price-card .price-desc{color:var(--text-dim);font-size:0.85rem;margin-bottom:22px;}
.price-value{font-family:'JetBrains Mono';font-size:2.4rem;font-weight:600;margin-bottom:4px;}
.price-value span{font-size:0.95rem;color:var(--text-dim);}
.price-period{color:var(--text-dim);font-size:0.8rem;margin-bottom:26px;display:block;}
.price-features{list-style:none;margin-bottom:28px;}
.price-features li{
  font-size:0.88rem;color:var(--text-dim);padding:9px 0;border-top:1px solid var(--card-border);
  display:flex;gap:10px;align-items:flex-start;
}
.price-features li::before{content:'✓';color:var(--cyan);font-weight:700;}
.price-card .cta-btn{width:100%;text-align:center;display:block;}

.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.port-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;
  transition:transform .3s, border-color .3s;
}
.port-card:hover{transform:translateY(-5px);border-color:var(--cyan);}
.port-thumb{
  height:170px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;position:relative;overflow:hidden;
}
.port-thumb img,.port-thumb svg{width:100%;height:100%;object-fit:cover;}
.port-body{padding:20px 22px;}
.port-tag{font-family:'JetBrains Mono';font-size:0.68rem;color:var(--cyan);text-transform:uppercase;letter-spacing:0.08em;}
.port-body h4{font-family:'Space Grotesk';font-size:1.05rem;margin:8px 0 8px;}
.port-body p{color:var(--text-dim);font-size:0.86rem;line-height:1.5;margin-bottom:14px;}
.port-link{font-size:0.82rem;color:var(--blue-2);font-weight:600;}

.contact-box{
  background:var(--card);border:1px solid var(--card-border);border-radius:20px;
  padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
}
.contact-box h2{font-family:'Space Grotesk';font-size:1.9rem;margin-bottom:14px;}
.contact-box p{color:var(--text-dim);line-height:1.7;margin-bottom:26px;}
.contact-info{display:flex;flex-direction:column;gap:14px;font-size:0.94rem;}
.contact-info div{display:flex;gap:10px;color:var(--text-dim);}
.contact-form{display:flex;flex-direction:column;gap:14px;}
.contact-form input,.contact-form textarea{
  background:var(--bg-soft);border:1px solid var(--card-border);border-radius:8px;
  padding:12px 14px;color:var(--text);font-family:'Inter';font-size:0.92rem;
}
.contact-form textarea{resize:vertical;min-height:90px;}

footer{
  padding:70px 5vw 0;border-top:1px solid var(--card-border);color:var(--text-dim);
}
.footer-grid{display:grid;grid-template-columns:1.4fr 0.8fr 0.8fr 1fr;gap:40px;padding-bottom:50px;}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{font-size:0.88rem;line-height:1.7;max-width:320px;color:var(--text-dim);}
.footer-col h5{font-family:'Space Grotesk';font-size:0.85rem;color:var(--text);margin-bottom:16px;letter-spacing:0.02em;}
.footer-col a{display:block;font-size:0.86rem;color:var(--text-dim);margin-bottom:11px;transition:color .2s;}
.footer-col a:hover{color:var(--cyan);}
.footer-bottom{
  border-top:1px solid var(--card-border);padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;flex-wrap:wrap;gap:10px;
}
.admin-link{color:var(--text-dim);font-size:0.8rem;opacity:0.6;transition:opacity .2s;}
.admin-link:hover{opacity:1;color:var(--cyan);}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .services-grid,.pricing-grid,.portfolio-grid{grid-template-columns:1fr;}
  .hosting-box{grid-template-columns:1fr;}
  .server-visual{order:-1;max-width:220px;margin:0 auto 20px;}
  .contact-box{grid-template-columns:1fr;padding:30px;}
  nav{display:none;}
}