:root{
    --bg: #060606;
    --bg-soft: #0d0d0d;
    --surface: #0c0c0c;
    --border: #242424;
    --text: #f7f6f2;
    --text-dim: #b6b4aa;
    --text-dim2: #837f72;
    --accent: #4bc999;
    --accent-dark: #34ca91;
    --accent-soft: rgba(75, 201, 153, 0.12);
    --ok: #34d399;
    --radius: 16px;
    --maxw: 1160px;
  }
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Noto Sans Georgian', -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color: inherit; }
  .container{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
  section{ padding: 88px 0; }
  .section-soft{ background: var(--bg-soft); }

  h1,h2,h3{ font-family: 'Unbounded', 'Noto Sans Georgian', sans-serif; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 16px;
    max-width: 100%; flex-wrap: wrap; min-width: 0;
  }
  .eyebrow::before{ content:""; width:18px; height:2px; background: var(--accent); border-radius: 2px; }

  .btn{
    display: inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 600; font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
  }
  .btn-primary{
    background: var(--accent); color: #0a0a0a;
    box-shadow: 0 10px 24px -8px rgba(75, 201, 153, 0.35);
  }
  .btn-primary:hover{ background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(75,201,153,0.45); }
  .btn-ghost{
    background: transparent; color: var(--text); border-color: var(--border);
  }
  .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

  :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ---------- nav ---------- */
  .nav{
    position: sticky; top:0; z-index: 65;
    background: rgba(6,6,6,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease;
  }
  .nav.scrolled{
    background: rgba(6,6,6,0.88);
    border-color: var(--border);
    box-shadow: 0 10px 30px -14px rgba(0,0,0,0.6);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between; gap: 16px; padding: 18px 0;
    transition: padding 280ms cubic-bezier(.4,0,.2,1);
  }
  .nav.scrolled .nav-inner{ padding: 12px 0; }
  .logo{ display:flex; align-items:center; gap:10px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 18px; text-decoration:none; color: var(--text); }
  .logo .mark{
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), #1f6b52);
    color:#0a0a0a; display:flex; align-items:center; justify-content:center;
    font-size: 15px; font-weight: 800;
  }
  .logo .sub{ font-weight: 400; color: var(--text-dim); }
  .nav-links{ display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0; }
  .nav-links a{ text-decoration:none; font-size:14.5px; font-weight:500; color: var(--text-dim); transition: color 160ms ease; }
  .nav-links a:hover{ color: var(--accent); }
  .nav-right{ display:flex; align-items:center; gap: 14px; }
  .lang-toggle{
    appearance:none; background: var(--surface); border:1px solid var(--border);
    width: 26px; height: 26px; border-radius: 50%; padding: 0; overflow: hidden;
    cursor:pointer; flex-shrink:0;
    transition: border-color 160ms ease, transform 160ms ease;
  }
  .lang-toggle:hover{ border-color: var(--accent); transform: translateY(-1px); }
  .lang-toggle img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------- burger + mobile panel ---------- */
  .burger{
    display:none;
    position:relative;
    width:34px; height:34px;
    background:transparent; border:1px solid var(--border); border-radius:9px;
    cursor:pointer; padding:0; flex-shrink:0;
  }
  .burger span{
    position:absolute; left:9px; right:9px; height:2px; background:var(--text);
    border-radius:2px;
    transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 180ms ease, top 320ms cubic-bezier(.4,0,.2,1);
  }
  .burger span:nth-child(1){ top:12px; }
  .burger span:nth-child(2){ top:16px; }
  .burger span:nth-child(3){ top:20px; }
  .burger.open span:nth-child(1){ top:16px; transform: rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; transform: scaleX(0); }
  .burger.open span:nth-child(3){ top:16px; transform: rotate(-45deg); }

  .mobile-panel{ display:none; }
  .mobile-overlay{ display:none; }
  .mobile-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  .mobile-links a{
    display:block; padding:14px 16px; border-radius:10px;
    color:var(--text); text-decoration:none; font-size:16px; font-weight:500;
    transition: background 140ms ease;
  }
  .mobile-links a:hover, .mobile-links a:active{ background:var(--bg-soft); }
  .mobile-panel-foot{
    display:flex; align-items:center; justify-content:flex-end; gap:12px;
    padding: 14px 16px 8px; margin-top:6px; border-top:1px solid var(--border);
  }
  .socials a.social-phone{ color: var(--accent); border-color: var(--accent); }
  .socials a.social-phone:hover{ background: var(--accent-soft); }

  /* ---------- hero ---------- */
  .hero{
    min-height: 100vh; min-height: 100dvh;
    padding: 84px 0 60px; position: relative; overflow: hidden;
  }
  .hero-glow{
    position:absolute; top:-220px; right:-160px; width:640px; height:640px;
    background: radial-gradient(circle, rgba(75,201,153,0.14), transparent 65%);
    pointer-events:none;
  }
  .hero-inner{ position:relative; max-width: 760px; }
  .hero h1{ font-size: clamp(2.2rem, 5.4vw, 3.5rem); line-height:1.12; margin-bottom: 22px; }
  .hero h1 .accent{ color: var(--accent); }
  @supports (-webkit-text-stroke: 1px black){
    .hero h1 .accent{
      color: var(--bg);
      -webkit-text-stroke: 1.5px var(--accent);
      paint-order: stroke fill;
    }
  }
  .hero p{ font-size: 18px; color: var(--text-dim); max-width: 54ch; margin: 0 0 34px; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .hero-stats{ display:flex; gap: 40px; margin-top: 64px; flex-wrap:wrap; }
  .stat b{ display:block; font-size: 26px; font-weight:700; }
  .stat span{ font-size: 13px; color: var(--text-dim2); }

  /* ---------- services ---------- */
  .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .card{
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6); border-color: #1e4a3d; }
  .card .stage{
    background: linear-gradient(160deg, #4bc999, #e9e4d6);
    padding: 26px 24px 10px;
    display:flex; align-items:center; justify-content:center;
    height: 168px; min-height: 168px; overflow: hidden;
  }
  .card .stage img{ max-height: 100%; max-width: 100%; width:auto; height:auto; }
  .card .body{ padding: 24px 24px 30px; }
  .card h3{ font-size: 19px; margin-bottom: 10px; }
  .card p{ font-size: 14.5px; color: var(--text-dim); margin:0; line-height:1.6; }

  .section-head{ max-width: 620px; }
  .section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; }
  .section-head p{ color: var(--text-dim); font-size: 16px; margin:0; }

  /* ---------- pricing ---------- */
  .pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .price-card{
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    padding: 34px 24px; display:flex; flex-direction:column; position:relative;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .price-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6); }
  .price-card.featured{ border-color: var(--accent); box-shadow: 0 20px 44px -20px rgba(75,201,153,0.3); }
  .price-badge{
    position:absolute; top:-13px; left:28px;
    background: var(--accent); color:#0a0a0a; font-size:11.5px; font-weight:700;
    padding: 5px 12px; border-radius: 999px; letter-spacing:0.03em;
  }
  .price-card h3{ font-size: 17px; color: var(--text-dim); font-weight:600; margin-bottom: 6px; }
  .price-amount{ font-size: 38px; font-weight: 700; margin: 6px 0 4px; }
  .price-amount sup{ font-size: 16px; font-weight:600; margin-right:2px; }
  .price-amount small{ font-size: 14px; font-weight:500; color: var(--text-dim2); }
  .price-note{ font-size: 13px; color: var(--text-dim2); margin-bottom: 22px; }
  .price-feats{ list-style:none; padding:0; margin: 0 0 28px; display:flex; flex-direction:column; gap:11px; flex:1; }
  .price-feats li{ display:flex; gap:10px; align-items:flex-start; font-size: 14px; color: var(--text-dim); }
  .price-feats svg{ flex-shrink:0; margin-top:2px; color: var(--ok); }

  .hosting-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
  .hosting-card{
    border:1px solid var(--border); border-radius: 14px; padding: 22px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background: var(--surface);
  }
  .hosting-card .name{ font-weight:600; font-size: 14.5px; }
  .hosting-card .desc{ font-size: 12.5px; color: var(--text-dim2); margin-top:3px; }
  .hosting-card .price{ font-weight:700; font-size: 17px; white-space:nowrap; }

  /* ---------- portfolio ---------- */
  .portfolio-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .p-card{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); background: var(--surface); }
  .p-thumb{
    height: 160px;
    background: radial-gradient(circle at 28% 24%, rgba(75,201,153,0.22), transparent 55%), linear-gradient(135deg, #141414, #0a0a0a);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    padding: 22px;
  }
  .p-thumb::after{
    content:""; position:absolute; inset:0;
    box-shadow: inset 0 -40px 50px -30px rgba(0,0,0,0.6);
  }
  .p-mock{ position:relative; z-index:1; width:100%; height:100%; }
  .p-mock svg{ width:100%; height:100%; display:block; overflow:visible; }
  .p-body{ padding: 22px 24px 26px; }
  .p-tag{ font-size: 11.5px; font-weight:700; color: var(--accent); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
  .p-body h3{ font-size: 16.5px; margin-bottom: 8px; }
  .p-body p{ font-size: 13.5px; color: var(--text-dim); margin:0; line-height:1.55; }
  .p-card.has-link{ cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
  .p-card.has-link:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6); border-color: #1e4a3d; }
  .p-link{
    display: inline-flex; align-items:center; gap:7px; margin-top:16px;
    background: var(--accent); color:#0a0a0a; text-decoration:none;
    font-size: 13px; font-weight:700; padding: 9px 16px; border-radius: 9px;
    transition: background 160ms ease, transform 160ms ease, gap 160ms ease;
    position: relative; z-index: 1;
  }
  .p-link:hover{ background: var(--accent-dark); gap:11px; transform: translateY(-1px); }

  /* ---------- faq ---------- */
  .faq-list{ max-width: 760px; margin: 44px auto 0; }
  .faq-item{ border-bottom: 1px solid var(--border); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding: 22px 4px; display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:inherit; font-size: 16px; font-weight:600; color: var(--text);
  }
  .faq-q .plus{ flex-shrink:0; width:22px; height:22px; position:relative; }
  .faq-q .plus::before, .faq-q .plus::after{
    content:""; position:absolute; background: var(--accent); border-radius:2px; transition: transform 220ms ease;
  }
  .faq-q .plus::before{ left:0; top:50%; width:100%; height:2px; transform: translateY(-50%); }
  .faq-q .plus::after{ top:0; left:50%; width:2px; height:100%; transform: translateX(-50%); }
  .faq-item.open .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
  .faq-a{ max-height:0; overflow:hidden; transition: max-height 260ms ease; }
  .faq-a p{ margin: 0 4px 22px; font-size:14.5px; color: var(--text-dim); line-height:1.65; max-width: 68ch; }

  /* ---------- contact ---------- */
  .contact-box{
    background: linear-gradient(135deg, #121212, #0a0a0a);
    border: 1px solid var(--accent);
    box-shadow: 0 30px 70px -30px rgba(75,201,153,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
    border-radius: 24px; padding: 56px 48px; color: var(--text);
    display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap:wrap;
  }
  .contact-box h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom:10px; color: var(--text); }
  .contact-box p{ color: var(--text-dim); margin:0; max-width: 46ch; font-size:15px; }
  .contact-note{ font-size:12.5px; color: var(--text-dim2); margin-top:14px; }
  .contact-box .btn-ghost{ background: var(--accent); color:#0a0a0a; border-color: var(--accent); }
  .contact-box .btn-ghost:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(75,201,153,0.35); background: var(--accent-dark); }
  .socials{ display:flex; gap:12px; margin-top:18px; }
  .socials a{
    width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center; text-decoration:none; color: var(--text);
    transition: background 160ms ease, border-color 160ms ease;
  }
  .socials a:hover{ background: var(--accent-soft); border-color: var(--accent); }

  /* ---------- footer ---------- */
  footer{ padding: 40px 0; border-top:1px solid var(--border); }
  .foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color: var(--text-dim2); }
  .foot-links{ display:flex; gap:22px; list-style:none; padding:0; margin:0; }
  .foot-links a{ text-decoration:none; color: var(--text-dim2); }
  .foot-links a:hover{ color: var(--accent); }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.19,1,.22,1), transform 700ms cubic-bezier(.19,1,.22,1); }
  .reveal.in{ opacity:1; transform: translateY(0); }

  @media (max-width: 900px){
    .grid3, .pricing-grid, .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
    .hosting-row{ grid-template-columns: 1fr; }
  }
  @media (max-width: 760px){
    .nav-inner{ padding: 14px 0; position: relative; justify-content: flex-end; }
    .nav-links{ display:none; }
    .nav-cta{ display:none; }
    .nav-right .lang-toggle{ display:none; }
    .logo{
      font-size: 16px; gap:8px;
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    }
    .logo .mark{ width:28px; height:28px; font-size:13px; border-radius:8px; }
    .burger{ display:block; position:relative; z-index:70; margin-right:6px; }
    .mobile-overlay{
      display:block;
      position: fixed; inset:0; z-index: 55;
      background: rgba(0,0,0,0.55);
      opacity:0; pointer-events:none;
      transition: opacity 260ms ease;
    }
    .mobile-overlay.open{ opacity:1; pointer-events:auto; }
    .mobile-panel{
      display:flex; flex-direction:column;
      position: fixed; top:0; right:0; bottom:0; z-index: 60;
      width: min(300px, 82vw);
      background: var(--surface); border-left:1px solid var(--border);
      padding: 84px 10px 20px;
      box-shadow: -20px 0 48px -20px rgba(0,0,0,0.7);
      transform: translateX(100%); transition: transform 280ms cubic-bezier(.4,0,.2,1);
      overflow-x: hidden; overflow-y: auto;
    }
    .mobile-panel.open{ transform: translateX(0); }
    .mobile-panel::before{
      content:"R";
      position:absolute; z-index:0; left:0; right:0; top:0; bottom:0;
      display:flex; align-items:flex-end; justify-content:center;
      font-family:'Unbounded', sans-serif; font-weight:800;
      font-size: 320px; line-height:0.75;
      color: rgba(255,255,255,0.035);
      pointer-events:none; user-select:none;
    }
    .mobile-panel > *{ position:relative; z-index:1; }
    .mobile-panel .lang-toggle{ width:28px; height:28px; }
    .mobile-panel-head{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding: 0 10px 20px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
    }
    .mobile-panel-brand{
      display:block; font-family:'Unbounded', sans-serif; font-weight:700; font-size:17px;
      color: var(--text); text-decoration:none;
    }
    .mobile-panel-brand .sub{ font-weight:400; color: var(--text-dim); }
    .mobile-panel-close{
      appearance:none; background:transparent; border:1px solid var(--border); border-radius:9px;
      width:34px; height:34px; display:flex; align-items:center; justify-content:center;
      color: var(--text); cursor:pointer; padding:0;
      position: fixed; top:14px; right:6px; z-index:75;
      transition: border-color 160ms ease, color 160ms ease;
    }
    .mobile-panel-close:hover{ border-color: var(--accent); color: var(--accent); }
    .nav{ transition: transform 220ms ease, border-color 200ms ease, box-shadow 200ms ease; }
    .nav.nav-hidden{ transform: translateY(-100%); }
    .mobile-links{ flex:1; }
    .mobile-panel-foot{ margin-top:auto; }
    .grid3, .pricing-grid, .portfolio-grid{ grid-template-columns: 1fr; }
    section{ padding: 52px 0; }
    .hero{ padding: 44px 0 40px; }
    .hero h1{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .hero p{ font-size: 16px; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions .btn{ width:100%; }
    .contact-box{ padding:36px 22px; flex-direction:column; align-items:flex-start; }
    .contact-box .btn{ width:100%; }
    .hero-stats{ gap:22px; }
    .foot-inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  }
  @media (max-width: 400px){
    .hero-stats{ gap:16px; }
    .stat b{ font-size:22px; }
  }