:root{
    /* Reactive Fullstack Foundry palette */
    --ink-900:#0b0f14;
    --ink-800:#111822;
    --steel-700:#16222e;
    --steel-600:#1d2b3a;
    --steel-500:#233447;
    --steel-400:#2d455c;
    --grid-ink:#0f1a24;
    --text:#e8eef7;
    --muted:#a9b6c7;
    --neon:#23e3a1;
    --signal:#6aa4ff;
    --amber:#ffc46a;
    --card-1:#141d27;
    --card-2:#121a23;
    --card-3:#11161f;
    --shadow: 0 10px 25px rgba(0,0,0,0.35);
    --radius:14px;
    --speed: .38s;
  }

  /* Base */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body{
    margin:0;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--text);
    background:
      linear-gradient(180deg, rgba(20,30,40,.6), rgba(12,16,22,.9)) , 
      radial-gradient(1200px 600px at 10% -10%, rgba(35,227,161,.12), transparent 60%),
      radial-gradient(1000px 600px at 110% 10%, rgba(106,164,255,.10), transparent 50%),
      linear-gradient(0deg, var(--ink-900), var(--ink-900));
    line-height:1.6;
  }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; height:auto; }
  button, a.button{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem;
    padding:.7rem 1rem;
    background: transparent;
    border:1px solid rgba(255,255,255,.2);
    color:var(--text);
    border-radius:12px;
    transition: all var(--speed) ease;
    cursor:pointer;
    text-decoration:none;
  }
  button:hover, a.button:hover{
    border-color: var(--neon);
    box-shadow: 0 0 0 2px rgba(35,227,161,.15), 0 8px 20px rgba(35,227,161,.2);
    transform: translateY(-1px);
  }
  :focus-visible{
    outline:2px dashed var(--neon);
    outline-offset:4px;
  }
  .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding: 0 1.2rem;
  }

  /* Header & Navigation */
  header{
    position: sticky; top:0; z-index: 50;
    background: linear-gradient(180deg, rgba(17,24,34,.86), rgba(17,24,34,.72));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .navwrap{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }
  .brand{
    display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.5px;
  }
  .brand-badge{
    width:34px; height:34px; border-radius:10px;
    background: conic-gradient(from 120deg, var(--neon), var(--signal), var(--neon));
    box-shadow: inset 0 0 20px rgba(255,255,255,.15), 0 6px 12px rgba(0,0,0,.3);
    position:relative; overflow:hidden;
  }
  .brand-badge:after{
    content:"R"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#082017; font-weight:900;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
  }
  nav ul{
    display:flex; gap:1rem; list-style:none; margin:0; padding:0;
  }
  nav a{
    padding:.5rem .6rem; border-radius:10px; color:var(--muted);
    transition: color var(--speed) ease, background var(--speed) ease, transform var(--speed) ease;
  }
  nav a:hover{ color:var(--text); background: rgba(255,255,255,.05); transform: translateY(-1px); }

  .cta-group{ display:flex; gap:.6rem; align-items:center; }

  /* HERO */
  .hero{
    position:relative;
    max-height:600px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:
      linear-gradient(180deg, rgba(35,227,161,.06), transparent 60%),
      linear-gradient(180deg, rgba(106,164,255,.08), transparent 60%),
      linear-gradient(0deg, var(--ink-900), var(--ink-900));
  }
  .hero-inner{
    display:grid; grid-template-columns: 1fr; gap:1rem;
    align-items:stretch;
    padding: 2.2rem 0 1.6rem;
  }
  .hero-copy{
    z-index:3;
    padding: 0 0 .5rem;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.85rem; color:var(--muted);
    letter-spacing:.08em; text-transform:uppercase;
    border:1px solid rgba(255,255,255,.08);
    padding:.25rem .55rem; border-radius:999px;
    background: rgba(255,255,255,.03);
  }
  .hero h1{
    margin:.7rem 0; font-size: clamp(1.6rem, 4.5vw, 3rem); line-height:1.15;
    letter-spacing:.2px;
  }
  .sub{
    color:var(--muted); max-width: 70ch; margin: .6rem 0 1rem;
  }
  .highlight{ color:var(--neon); }

  /* Slider */
  .slider{
    position:relative; border-radius:16px; overflow:hidden;
    height: clamp(320px, 55vh, 520px);
    background: #0d131a;
    box-shadow: var(--shadow);
    border:1px solid rgba(255,255,255,.06);
  }
  .slides{
    display:flex; width:400%; height:100%;
    animation: slide 24s infinite linear;
  }
  .slide{
    width:25%; height:100%; position:relative; overflow:hidden;
  }
  .slide img{
    width:100%; height:100%; object-fit: cover; filter: saturate(1.05) contrast(1.05);
    transform: scale(1.04);
  }
  .slide::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  }
  .slide-caption{
    position:absolute; left:1rem; bottom:1rem; z-index:2;
    background: rgba(7,12,18,.55);
    backdrop-filter: blur(4px);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text);
    padding:.55rem .7rem; border-radius:10px; font-size:.9rem;
  }
  @keyframes slide{
    0% { transform: translateX(0%); }
    23% { transform: translateX(0%); }
    25% { transform: translateX(-25%); }
    48% { transform: translateX(-25%); }
    50% { transform: translateX(-50%); }
    73% { transform: translateX(-50%); }
    75% { transform: translateX(-75%); }
    98% { transform: translateX(-75%); }
    100% { transform: translateX(0%); }
  }

  /* Section base */
  main{ display:block; }
  section{
    padding: 3rem 0 2rem;
    position:relative;
  }
  section .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem;
  }
  .section-head h2{
    margin:0; font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    letter-spacing:.2px;
  }
  .section-head .hint{ color:var(--muted); font-size:.95rem; }

  /* Cards Grid */
  .grid{
    display:grid; gap:1rem;
    grid-template-columns: 1fr;
  }
  .card{
    border-radius: var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    background: var(--card-1);
    transition: transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease, background var(--speed) ease;
  }
  .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(35,227,161,.35); }
  .card figure{ margin:0; position:relative; overflow:hidden; height: 180px; }
  .card figure img{ width:100%; height:100%; object-fit: cover; transition: transform var(--speed) ease; }
  .card:hover figure img{ transform: scale(1.04); }
  .card .badge{
    position:absolute; left:.7rem; top:.7rem;
    font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
    background: rgba(35,227,161,.15);
    border:1px solid rgba(35,227,161,.35);
    color:var(--text); padding:.18rem .45rem; border-radius:999px;
  }
  .card .content{ padding: .9rem .95rem 1rem; }
  .card h3{ margin:.2rem 0 .45rem; font-size:1.05rem; }
  .meta{ color:var(--muted); font-size:.86rem; }
  .excerpt{ color: #d3deed; opacity:.9; margin:.5rem 0 .8rem; font-size:.95rem; }
  .card .action a{ color: var(--neon); font-weight:600; border-bottom:1px dashed rgba(35,227,161,.45); }
  .card .action a:hover{ color:#9affdd; }

  /* Section variations */
  .s1 .card{ background: linear-gradient(180deg, rgba(35,227,161,.06), transparent), var(--card-1); }
  .s2 .card{ background: linear-gradient(180deg, rgba(106,164,255,.07), transparent), var(--card-2); }
  .s2 .card:hover{ border-color: rgba(106,164,255,.4); }
  .s3 .card{ background: linear-gradient(180deg, rgba(255,196,106,.08), transparent), var(--card-3); }
  .s3 .card:hover{ border-color: rgba(255,196,106,.4); }

  /* Blog list */
  .blog-list-wrap{ padding: 2.2rem 0; border-top:1px solid rgba(255,255,255,.06); }
  .blog-list-wrap h3{ margin:0 0 1rem; }
  .blog-list{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns: 1fr; gap:.8rem;
  }
  .blog-list li{
    display:grid; grid-template-columns: 92px 1fr; gap:.9rem; align-items:center;
    padding:.6rem; border-radius:12px; border:1px solid rgba(255,255,255,.06);
    background: linear-gradient(90deg, rgba(255,255,255,.03), transparent), var(--card-2);
    transition: transform var(--speed) ease, border-color var(--speed) ease, background var(--speed) ease;
  }
  .blog-list li:hover{ transform: translateX(4px); border-color: rgba(35,227,161,.32); background: linear-gradient(90deg, rgba(35,227,161,.08), transparent), var(--card-2); }
  .blog-list img{ width:92px; height:64px; object-fit:cover; border-radius:10px; }
  .blog-list a{ color:var(--text); font-weight:600; display:inline-block; }

  /* Center content article */
  .centered-content{ padding: 2.2rem 0; border-top:1px solid rgba(255,255,255,.06); }
  .centered{
    max-width: 780px; margin: 0 auto; text-align:left;
  }
  .centered .media{
    display:flex; justify-content:center; align-items:center; margin: .4rem 0 1rem;
  }
  .centered .media img{
    width:100%; max-width:760px; border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
  }
  .rating{
    display:flex; align-items:center; justify-content:center; gap:.5rem; 
    color:#dff7ee; background: rgba(35,227,161,.08);
    border:1px solid rgba(35,227,161,.35);
    padding:.5rem .8rem; border-radius:999px; margin:.6rem auto 1.2rem; width:max-content;
    font-weight:600;
  }
  .divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); margin: 1.4rem 0; }
  article .byline{ color:var(--muted); font-size:.93rem; margin:.2rem 0 1rem; }
  article .article-body p{ margin: .6rem 0; }

  /* Prev/Next */
  .pager{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    margin: 1.6rem 0;
  }
  .pager a{ color:var(--signal); font-weight:600; border-bottom:1px dashed rgba(106,164,255,.5); }
  .pager a:hover{ color:#aecdff; }

  /* Comments */
  .comments-area{ margin: 1.8rem 0; }
  .comments-area .label{ font-weight:700; letter-spacing:.04em; }
  .comments-placeholder{
    min-height:80px; border:1px dashed rgba(255,255,255,.15);
    border-radius:12px; background: rgba(255,255,255,.02); padding:1rem; color:var(--muted);
    display:flex; align-items:center; justify-content:center; text-align:center; margin:.6rem 0 1.2rem;
  }
  .comment-form{
    display:grid; gap:.8rem; grid-template-columns: 1fr;
  }
  .comment-form input, .comment-form textarea{
    background: var(--ink-800); color:var(--text); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; padding:.7rem .8rem; width:100%; transition:border-color var(--speed) ease, box-shadow var(--speed) ease;
  }
  .comment-form input:focus, .comment-form textarea:focus{
    border-color: var(--signal); box-shadow: 0 0 0 2px rgba(106,164,255,.2);
    outline:none;
  }
  .comment-form textarea{ min-height:120px; resize:vertical; }

  /* Related */
  .related{ padding: 2rem 0; border-top:1px solid rgba(255,255,255,.06); }
  .related-grid{
    display:grid; gap:1rem; grid-template-columns: 1fr;
  }
  .related-card{
    display:grid; grid-template-columns: 110px 1fr; gap:.9rem;
    align-items:center; background: var(--card-1);
    border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.6rem;
    transition: transform var(--speed) ease, border-color var(--speed) ease;
  }
  .related-card:hover{ transform: translateY(-3px); border-color: rgba(255,196,106,.4); }
  .related-card img{ width:110px; height:74px; border-radius:10px; object-fit:cover; }

  /* Contacts */
  .contact-wrap{
    padding: 2.2rem 0; border-top:1px solid rgba(255,255,255,.06);
    display:grid; gap:1.2rem; grid-template-columns: 1fr;
  }
  .contact-form{
    background: var(--card-2); border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:1rem;
  }
  .contact-form h4{ margin:.2rem 0 1rem; }
  .contact-form .grid{
    grid-template-columns: 1fr;
  }
  .contact-form input, .contact-form textarea, .contact-form select{
    background: #0e151d; color:var(--text); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; padding:.7rem .8rem; width:100%; transition:border-color var(--speed) ease, box-shadow var(--speed) ease;
  }
  .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
    border-color: var(--neon); box-shadow: 0 0 0 2px rgba(35,227,161,.2); outline:none;
  }
  .contact-details, .contact-map, .contact-note{
    background: var(--card-1); border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:1rem;
  }
  .contact-map iframe{
    width:100%; height:220px; border:0; border-radius:10px; filter: grayscale(.2) contrast(1.05) saturate(1.1);
  }

  /* Aside promos + Modal */
  aside{
    padding: 2rem 0; border-top:1px solid rgba(255,255,255,.06);
  }
  .promo-links{
    display:grid; grid-template-columns: 1fr; gap:.7rem;
  }
  .promo-links a{
    display:flex; align-items:center; justify-content:space-between;
    padding:.8rem .9rem; border-radius:12px;
    background: linear-gradient(90deg, rgba(255,255,255,.03), transparent), var(--card-3);
    border:1px solid rgba(255,255,255,.06);
  }
  .promo-links a span{ color:var(--muted); font-size:.9rem; }
  .promo-links a strong{ color:var(--text); }

  .modal, .modal2{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding: 1rem;
    background: rgba(4,7,10,.65); backdrop-filter: blur(6px); z-index:999;
  }
  .modal:target, .modal2:target{ display:flex; }
  .dialog{
    width:min(640px, 96%); background: var(--ink-800); border:1px solid rgba(255,255,255,.12);
    border-radius:16px; box-shadow: var(--shadow);
    padding:1rem;
  }
  .dialog header{ position:relative; background:transparent; border:none; padding:0 0 .6rem; }
  .dialog h3{ margin:.2rem 0; }
  .dialog .close{
    position:absolute; right:.2rem; top:.2rem; font-weight:700; padding:.2rem .5rem; border-radius:8px;
  }
  .dialog form{ display:grid; gap:.7rem; }
  .dialog input, .dialog textarea{
    background:#0f1720; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.7rem .8rem;
  }
  .dialog input:focus, .dialog textarea:focus{ border-color:var(--signal); box-shadow: 0 0 0 2px rgba(106,164,255,.2); outline:none; }

  /* Footer */
  footer{
    border-top:1px solid rgba(255,255,255,.08);
    padding: 2rem 0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--ink-900);
  }
  .foot-grid{
    display:grid; gap:1rem; grid-template-columns: 1fr;
  }
  .slogan{ font-size: clamp(1rem, 2vw, 1.2rem); color:#d7e7ff; }
  .about{ color:var(--muted); }
  .social{ display:flex; gap:.8rem; }
  .social a{
    padding:.45rem .6rem; border-radius:10px; border:1px solid rgba(255,255,255,.1); color:var(--muted);
  }
  .social a:hover{ color:var(--text); border-color:var(--neon); box-shadow:0 0 0 2px rgba(35,227,161,.15); }

  /* Responsive */
  @media (min-width: 768px){
    .hero-inner{ grid-template-columns: 1.05fr 1.35fr; gap:1.2rem; align-items:center; }
    .grid{ grid-template-columns: repeat(2, 1fr); }
    .blog-list{ grid-template-columns: repeat(2, 1fr); }
    .related-grid{ grid-template-columns: repeat(2, 1fr); }
    .contact-wrap{ grid-template-columns: 1.2fr .8fr; }
    .promo-links{ grid-template-columns: repeat(2, 1fr); }
    .foot-grid{ grid-template-columns: 1.3fr 1fr .7fr .7fr; }
  }
  @media (min-width: 1200px){
    .grid{ grid-template-columns: repeat(3, 1fr); }
    .blog-list{ grid-template-columns: repeat(3, 1fr); }
    .related-grid{ grid-template-columns: repeat(4, 1fr); }
    .promo-links{ grid-template-columns: repeat(4, 1fr); }
  }