/* ==========================================================================
   Datovna — styly webu (převzatý vzhled; sdílí úvodní stránka, EN, katalog,
   košík, přihlášení a AI poradce). Doplňky ukázky jsou v app/datovna.css.
   ========================================================================== */
  /* ===== TOKENS — měkká neutrální paleta (warm cream + warm charcoal + sage) ===== */
  :root{
    --bg: #FAF9F5;
    --bg-alt: #FFFFFF;
    --bg-soft: #F2EFE7;
    --bg-tint: #EDE9DD;

    --text: #2A2D32;
    --text-mute: #5A5F66;
    --text-light: #8B8F95;
    --border: #E5E1D5;
    --border-soft: #EFEBE0;

    /* Dark cards — warm charcoal (NE navy) */
    --card-bg: #2D3138;
    --card-bg-2: #1F2226;
    --card-text: #F5F2EB;
    --card-mute: #A8A89F;
    --card-border: rgba(148,181,168,0.10);

    /* Sage accent — calming, neutrální, hosting/server feel */
    --sage: #94B5A8;
    --sage-deep: #6E9385;
    --sage-soft: rgba(148,181,168,0.14);
    --sage-glow: rgba(148,181,168,0.30);

    /* Warm sand — secondary accent, occasional */
    --sand: #C9A988;
    --sand-soft: rgba(201,169,136,0.14);

    --btn-bg: #2A2D32;
    --btn-bg-hover: #1F2226;
    --btn-text: #F5F2EB;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(74,68,52,0.05);
    --shadow: 0 4px 16px rgba(74,68,52,0.06);
    --shadow-lg: 0 14px 44px rgba(74,68,52,0.10);
    --shadow-warm: 0 18px 50px rgba(110,147,133,0.18);
  }

  /* ===== BASE ===== */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter','Segoe UI',-apple-system,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.55;
    font-size:16px;
    letter-spacing:-0.011em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* Subtle grain overlay přes celou stránku */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:0.4;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.18  0 0 0 0 0.20  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:multiply;
  }

  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

  /* ===== NAV ===== */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(250,249,245,0.85);
    backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid var(--border);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:70px;
  }
  .logo{
    font-size:22px;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--text);
  }
  .logo span{color:var(--sage-deep)}
  .nav-center{display:flex;gap:4px;align-items:center}
  .nav-center a{
    padding:8px 14px;
    border-radius:99px;
    color:var(--text-mute);
    font-size:14px;
    font-weight:500;
    transition:all .15s;
  }
  .nav-center a:hover{color:var(--text);background:var(--bg-soft)}
  .nav-right{display:flex;gap:10px;align-items:center}
  .icon-btn{
    position:relative;
    width:38px;height:38px;
    border-radius:50%;
    background:var(--bg-soft);
    border:1px solid var(--border);
    color:var(--text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .15s;
  }
  .icon-btn:hover{background:var(--bg-alt);transform:translateY(-1px);box-shadow:var(--shadow)}
  .icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .icon-btn .badge{
    position:absolute;
    top:-3px;right:-3px;
    background:var(--sage-deep);
    color:#fff;
    font-size:11px;
    font-weight:700;
    min-width:18px;
    height:18px;
    border-radius:99px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--bg);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 18px;
    border:1px solid transparent;
    border-radius:99px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all .18s;
    white-space:nowrap;
    text-decoration:none;
  }
  .btn-primary{
    background:var(--btn-bg);
    color:var(--btn-text);
    border-color:var(--btn-bg);
  }
  .btn-primary:hover{
    background:var(--btn-bg-hover);
    transform:translateY(-1px);
    box-shadow:var(--shadow-lg);
  }
  .btn-ghost{
    background:transparent;
    color:var(--text);
    border-color:var(--border);
  }
  .btn-ghost:hover{background:var(--bg-soft);border-color:var(--text-light)}
  .btn-sage{
    background:var(--sage-deep);
    color:#fff;
    border-color:var(--sage-deep);
  }
  .btn-sage:hover{
    background:#5d7d70;
    box-shadow:0 0 0 6px var(--sage-soft);
    transform:translateY(-1px);
  }
  .btn-lg{padding:14px 26px;font-size:15px}
  .btn-sm{padding:8px 14px;font-size:13px}

  /* ===== HERO — gradient mesh background ===== */
  .hero{
    position:relative;
    padding:90px 0 90px;
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute;
    inset:-100px;
    background:
      radial-gradient(ellipse 60% 50% at 18% 22%, rgba(148,181,168,0.30) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 82% 30%, rgba(201,169,136,0.25) 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 50% 90%, rgba(148,181,168,0.18) 0%, transparent 60%);
    filter:blur(40px);
    pointer-events:none;
    z-index:0;
  }
  .hero .wrap{position:relative;z-index:2}
  .hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:var(--text-mute);
    margin-bottom:24px;
    padding:6px 14px;
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(8px);
    border:1px solid var(--border);
    border-radius:99px;
  }
  .hero-eyebrow::before{
    content:'';
    width:8px;height:8px;
    border-radius:50%;
    background:var(--sage-deep);
    box-shadow:0 0 0 4px var(--sage-soft);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{box-shadow:0 0 0 4px var(--sage-soft)}
    50%{box-shadow:0 0 0 8px var(--sage-soft)}
  }
  .hero h1{
    font-size:clamp(36px,5.5vw,68px);
    line-height:1.04;
    font-weight:800;
    letter-spacing:-0.035em;
    margin-bottom:24px;
    max-width:920px;
    color:var(--text);
  }
  .hero h1 em{
    font-style:normal;
    color:var(--sage-deep);
    position:relative;
  }
  .hero h1 em::after{
    content:'';
    position:absolute;
    left:-2px;right:-2px;bottom:6px;
    height:14px;
    background:var(--sage-soft);
    border-radius:4px;
    z-index:-1;
  }
  .hero-sub{
    font-size:clamp(17px,1.55vw,20px);
    line-height:1.55;
    color:var(--text-mute);
    max-width:680px;
    margin-bottom:38px;
  }
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
  .hero-trust{
    margin-top:46px;
    display:flex;
    gap:32px;
    flex-wrap:wrap;
    color:var(--text-mute);
    font-size:13px;
  }
  .hero-trust-item{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .hero-trust-item svg{
    width:16px;height:16px;
    stroke:var(--sage-deep);
    fill:none;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* ===== SECTIONS BASE ===== */
  section{padding:80px 0;position:relative}
  .section-head{margin-bottom:48px;max-width:780px}
  .section-eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--sage-deep);
    margin-bottom:14px;
  }
  .section-head h2{
    font-size:clamp(28px,3.6vw,42px);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-0.025em;
    color:var(--text);
  }
  .section-head p{
    font-size:17px;
    color:var(--text-mute);
    margin-top:14px;
    line-height:1.55;
  }

  /* ===== SERVICES (4 dark cards) ===== */
  .services{padding:30px 0 70px}
  .services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  .service{
    background:var(--card-bg);
    background-image:
      radial-gradient(circle at 100% 0%,rgba(148,181,168,0.10) 0,transparent 55%),
      linear-gradient(180deg,var(--card-bg) 0%,var(--card-bg-2) 100%);
    color:var(--card-text);
    border:1px solid var(--card-border);
    border-radius:var(--radius-xl);
    padding:42px 38px 36px;
    cursor:pointer;
    transition:all .3s cubic-bezier(.2,.7,.2,1);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:340px;
  }
  .service::before{
    content:'';
    position:absolute;
    top:-1px;left:-1px;right:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent 0%,var(--sage) 50%,transparent 100%);
    opacity:.5;
  }
  .service::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(450px circle at var(--mx,50%) var(--my,50%),rgba(148,181,168,0.10) 0%,transparent 50%);
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
  }
  .service:hover{
    transform:translateY(-4px);
    border-color:rgba(148,181,168,0.30);
    box-shadow:var(--shadow-warm),0 0 0 1px rgba(148,181,168,0.18);
  }
  .service:hover::after{opacity:1}
  .service-num{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.18em;
    color:var(--sage);
    margin-bottom:24px;
  }
  .service-icon{
    width:50px;height:50px;
    margin-bottom:26px;
    color:var(--sage);
  }
  .service-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .service h3{
    font-size:28px;
    font-weight:800;
    letter-spacing:-0.025em;
    margin-bottom:14px;
    color:var(--card-text);
    line-height:1.18;
  }
  .service-desc{
    font-size:14.5px;
    color:var(--card-mute);
    line-height:1.55;
    margin-bottom:auto;
    padding-bottom:28px;
  }
  .service-link{
    color:var(--sage);
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:gap .18s;
    align-self:flex-start;
  }
  .service:hover .service-link{gap:10px}

  /* ===== DEDICATED SERVERS SECTION ===== */
  .dedicated{padding:80px 0;background:var(--bg-alt);border-top:1px solid var(--border)}
  .ded-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .ded-card{
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:0;
    overflow:hidden;
    transition:all .25s;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .ded-card.featured{
    border-color:var(--sage-deep);
    box-shadow:0 0 0 3px var(--sage-soft);
  }
  .ded-card.featured::before{
    content:'Doporučeno';
    position:absolute;
    top:14px;right:14px;
    background:var(--sage-deep);
    color:#fff;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:4px 10px;
    border-radius:99px;
    z-index:2;
  }
  .ded-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
  }
  .ded-head{
    padding:28px 28px 20px;
    border-bottom:1px solid var(--border-soft);
  }
  .ded-name{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:8px;
  }
  .ded-title{
    font-size:24px;
    font-weight:800;
    letter-spacing:-0.025em;
    color:var(--text);
    line-height:1.2;
  }
  .ded-tagline{
    font-size:14px;
    color:var(--text-mute);
    margin-top:6px;
  }
  .ded-specs{
    padding:24px 28px;
    flex:1;
  }
  .ded-spec{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    font-size:14px;
    border-bottom:1px solid var(--border-soft);
  }
  .ded-spec:last-child{border-bottom:none}
  .ded-spec-label{color:var(--text-mute)}
  .ded-spec-val{font-weight:600;color:var(--text)}
  .ded-foot{
    padding:24px 28px;
    background:var(--bg-soft);
    border-top:1px solid var(--border);
  }
  .ded-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:14px;
  }
  .ded-price strong{
    font-size:32px;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--text);
  }
  .ded-price small{
    font-size:14px;
    color:var(--text-mute);
  }
  .ded-cta{width:100%}

  /* ===== VPS CALCULATOR ===== */
  .calc{
    padding:90px 0;
    background:var(--bg-soft);
    background-image:
      radial-gradient(ellipse 60% 60% at 80% 20%, rgba(148,181,168,0.20) 0%, transparent 50%),
      radial-gradient(ellipse 50% 50% at 10% 90%, rgba(201,169,136,0.15) 0%, transparent 50%);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .calc-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:40px;
    align-items:start;
  }
  .calc-builder{
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:36px;
    box-shadow:var(--shadow);
  }
  .calc-section{margin-bottom:28px}
  .calc-section:last-child{margin-bottom:0}
  .calc-label{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:14px;
  }
  .calc-label-text{
    font-size:14px;
    font-weight:600;
    color:var(--text);
  }
  .calc-label-val{
    font-size:18px;
    font-weight:800;
    color:var(--sage-deep);
    letter-spacing:-0.02em;
  }
  .calc-label-val small{
    font-size:13px;
    color:var(--text-mute);
    font-weight:500;
    margin-left:4px;
  }
  /* Custom range slider */
  .calc-slider{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:8px;
    border-radius:99px;
    background:var(--bg-tint);
    outline:none;
    cursor:pointer;
  }
  .calc-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:24px;height:24px;
    border-radius:50%;
    background:var(--sage-deep);
    cursor:pointer;
    border:4px solid var(--bg-alt);
    box-shadow:0 2px 8px rgba(110,147,133,0.3),0 0 0 1px var(--border);
    transition:transform .15s;
  }
  .calc-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
  .calc-slider::-moz-range-thumb{
    width:24px;height:24px;
    border-radius:50%;
    background:var(--sage-deep);
    cursor:pointer;
    border:4px solid var(--bg-alt);
    box-shadow:0 2px 8px rgba(110,147,133,0.3);
  }
  .calc-slider-marks{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:11px;
    color:var(--text-light);
  }
  /* Toggle row pro OS / region */
  .calc-options{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .calc-option{
    flex:1;
    min-width:80px;
    padding:12px 16px;
    background:var(--bg);
    border:1.5px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    transition:all .18s;
    text-align:center;
    font-size:14px;
    font-weight:500;
  }
  .calc-option:hover{border-color:var(--text-light)}
  .calc-option.active{
    background:var(--card-bg);
    border-color:var(--card-bg);
    color:var(--card-text);
    font-weight:600;
  }
  .calc-checkbox-row{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .calc-check{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    background:var(--bg);
    border:1.5px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    transition:all .15s;
  }
  .calc-check:hover{border-color:var(--text-light)}
  .calc-check input{
    width:18px;height:18px;
    accent-color:var(--sage-deep);
    cursor:pointer;
  }
  .calc-check-text{
    flex:1;
    font-size:14px;
    color:var(--text);
  }
  .calc-check-text small{
    display:block;
    color:var(--text-mute);
    font-size:12px;
    margin-top:2px;
  }
  .calc-check-price{
    font-size:13px;
    font-weight:600;
    color:var(--sage-deep);
  }
  .calc-check.checked{
    background:var(--sage-soft);
    border-color:var(--sage);
  }

  /* Summary card */
  .calc-summary{
    background:var(--card-bg);
    background-image:linear-gradient(180deg,var(--card-bg) 0%,var(--card-bg-2) 100%);
    color:var(--card-text);
    border-radius:var(--radius-lg);
    padding:32px;
    border:1px solid var(--card-border);
    position:sticky;
    top:90px;
  }
  .calc-summary-title{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--sage);
    margin-bottom:20px;
  }
  .calc-summary-list{
    list-style:none;
    margin-bottom:24px;
  }
  .calc-summary-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .calc-summary-list li:last-child{border-bottom:none}
  .calc-summary-list .label{color:var(--card-mute)}
  .calc-summary-list .val{color:var(--card-text);font-weight:600}
  .calc-total{
    padding:20px 0;
    border-top:2px solid rgba(255,255,255,0.08);
    margin-top:8px;
  }
  .calc-total-label{
    font-size:13px;
    color:var(--card-mute);
    margin-bottom:6px;
  }
  .calc-total-amount{
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .calc-total-amount strong{
    font-size:42px;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--card-text);
  }
  .calc-total-amount span{font-size:18px;color:var(--sage)}
  .calc-total-amount small{font-size:13px;color:var(--card-mute);margin-left:4px}
  .calc-summary .btn{margin-top:16px;width:100%}

  /* ===== HOW IT WORKS ===== */
  .how{padding:90px 0;background:var(--bg-alt)}
  .how-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:40px;
  }
  .step{position:relative;padding-top:8px}
  .step::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:36px;height:2px;
    background:var(--sage-deep);
    border-radius:2px;
  }
  .step-num{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.18em;
    color:var(--text-light);
    margin-bottom:14px;
  }
  .step-num strong{color:var(--text);font-weight:800}
  .step h3{
    font-size:22px;
    font-weight:700;
    letter-spacing:-0.02em;
    margin-bottom:10px;
  }
  .step p{
    font-size:15px;
    color:var(--text-mute);
    line-height:1.55;
  }

  /* ===== CONTACT FORM ===== */
  .contact{padding:90px 0}
  .contact-inner{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:50px;
    align-items:start;
  }
  .contact-text h2{
    font-size:clamp(28px,3.6vw,40px);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-0.025em;
    margin-bottom:18px;
  }
  .contact-text > p{
    font-size:17px;
    color:var(--text-mute);
    margin-bottom:30px;
    max-width:480px;
  }
  .contact-info{
    background:var(--card-bg);
    background-image:linear-gradient(180deg,var(--card-bg) 0%,var(--card-bg-2) 100%);
    color:var(--card-text);
    border-radius:var(--radius-lg);
    padding:28px;
    border:1px solid var(--card-border);
  }
  .contact-info-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .contact-info-item:last-child{border-bottom:none;padding-bottom:0}
  .contact-info-item:first-child{padding-top:0}
  .contact-info-icon{
    width:36px;height:36px;
    background:var(--sage-soft);
    border-radius:8px;
    color:var(--sage);
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .contact-info-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .contact-info-label{
    font-size:11px;
    color:var(--card-mute);
    text-transform:uppercase;
    letter-spacing:0.10em;
    margin-bottom:3px;
    font-weight:600;
  }
  .contact-info-value{font-size:15px;color:var(--card-text);font-weight:600}
  .contact-info-value a{color:var(--sage)}
  .form{
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:var(--shadow);
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:13px;font-weight:600}
  .field label small{color:var(--text-light);font-weight:400;margin-left:4px}
  .field input,.field select,.field textarea{
    width:100%;
    padding:12px 14px;
    border:1.5px solid var(--border);
    border-radius:10px;
    background:var(--bg-alt);
    transition:border-color .15s,box-shadow .15s;
    font-size:15px;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;
    border-color:var(--sage-deep);
    box-shadow:0 0 0 3px var(--sage-soft);
  }
  .field textarea{resize:vertical;min-height:90px;font-family:inherit}
  .form-submit{margin-top:18px;width:100%;padding:14px;font-size:15px}
  .form-note{font-size:13px;color:var(--text-light);text-align:center;margin-top:14px}
  .form-success{display:none;text-align:center;padding:40px 20px}
  .form-success.show{display:block}
  .form-success-icon{
    width:64px;height:64px;
    margin:0 auto 18px;
    background:var(--sage-soft);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--sage-deep);
  }
  .form-success-icon svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .form-success h3{font-size:22px;font-weight:800;margin-bottom:8px}
  .form-success p{color:var(--text-mute);font-size:15px}

  /* ===== FOOTER ===== */
  .footer{
    background:var(--card-bg);
    background-image:linear-gradient(180deg,var(--card-bg) 0%,var(--card-bg-2) 100%);
    color:var(--card-mute);
    padding:60px 0 30px;
    margin-top:0;
    position:relative;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .footer-brand .logo{
    font-size:24px;
    color:var(--card-text);
    margin-bottom:14px;
    display:inline-block;
  }
  .footer-brand p{
    font-size:14px;
    line-height:1.55;
    color:var(--card-mute);
    margin-bottom:16px;
  }
  .footer-meta{font-size:13px;line-height:1.7;color:var(--card-mute)}
  .footer-meta a{color:var(--card-mute)}
  .footer-meta a:hover{color:var(--sage)}
  .footer-col h4{
    color:var(--card-text);
    font-size:14px;
    font-weight:700;
    margin-bottom:14px;
  }
  .footer-col ul{list-style:none}
  .footer-col li{margin-bottom:8px}
  .footer-col a{font-size:14px;color:var(--card-mute);transition:color .15s}
  .footer-col a:hover{color:var(--sage)}
  .footer-bottom{
    margin-top:24px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    font-size:13px;
    color:rgba(255,255,255,0.4);
  }

  /* ===== FADE-IN OBSERVER ===== */
  .fade-in{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s ease,transform .6s ease;
  }
  .fade-in.shown{opacity:1;transform:none}

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px){
    .nav-center{display:none}
    .services-grid{grid-template-columns:1fr;gap:14px}
    .ded-grid{grid-template-columns:1fr}
    .calc-grid{grid-template-columns:1fr}
    .calc-summary{position:static}
    .how-grid{grid-template-columns:1fr;gap:32px}
    .contact-inner{grid-template-columns:1fr;gap:32px}
    .form-row{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
    .hero{padding:60px 0}
    section{padding:60px 0}
  }
  @media (max-width: 520px){
    .nav-right{gap:6px}
    .nav-right .btn:not(.btn-sage){display:none}
    .footer-grid{grid-template-columns:1fr}
  }
/* per-web colors */

/* App layout shell (used in dashboard/admin) */
.app-shell{
  display:flex;
  flex:1;
  min-width:0;
}
@keyframes demoFloatPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,229,160,0.30)}
  50%{box-shadow:0 0 0 6px rgba(255,229,160,0.55)}
}

/* ===== CREATOR CREDIT (2Marsa) ===== */
.creator-credit{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(128,128,128,0.18);
  font-size:11.5px;
  line-height:1.7;
  text-align:center;
  opacity:0.78;
}
.creator-credit a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:currentColor;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:opacity .15s;
}
.creator-credit a:hover{opacity:1;text-decoration-thickness:2px}
.creator-credit-line2{margin-top:2px}

/* App pages (dashboard/admin): smaller credit in sidebar foot */
.creator-credit-app{
  margin:8px 4px 0;
  padding:10px 6px 4px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:10.5px;
  line-height:1.55;
  text-align:center;
  color:rgba(168,168,159,0.55);
}
.creator-credit-app a{
  color:rgba(168,168,159,0.75);
  text-decoration:underline;
  text-decoration-color:rgba(168,168,159,0.30);
  text-underline-offset:2px;
}
.creator-credit-app a:hover{color:#F5F2EB;text-decoration-color:currentColor}