:root {

    --bg: #05080c;
    --bg2: #0a111c;
    --panel: #101923;
    --panel2: #162231;
    --line: rgba(255,255,255,.12);

    --text: #f5f7fb;
    --muted: #a6b3c2;

    --green: #48ff72;
    --cyan: #28d7ff;
    --blue: #3478ff;
    --danger: #ff4d67;

}

* {
    box-sizing: border-box;
}

body {

    background: #f4f7fb;
    color: #142033;

    font-family:Segoe UI,Roboto,Arial,sans-serif !important;
    font-weight:400;
    letter-spacing:.01em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    max-width: 100%;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5{
    font-family:'Catamaran',sans-serif;
    font-weight:800;
    letter-spacing:-0.04em;
    line-height:1.05;
}
P {
  font-size: 1em !important;
}
/* =========================
   NAVBAR
========================= */

.fcom-navbar {

    background: rgba(5,8,12,.94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.08);

}

.navbar-brand span {

    font-weight: 900;
    letter-spacing: .2px;

}

/* =========================
   BOTONES
========================= */

.btn {

    border-radius: 999px;
    font-weight: 800;
    padding: .75rem 1.15rem;

}

.btn-sm {
    padding: .45rem .8rem;
}

.btn-primary {

    background: linear-gradient(
        90deg,
        var(--blue),
        #13b8d6
    );

    border: 0;
    color: #fff;

}

.btn-fcom {

    background: linear-gradient(
        90deg,
        var(--green),
        var(--cyan)
    );

    border: 0;
    color: #031018;

}

.btn-outline-light,
.btn-outline-secondary {

    border-color: rgba(255,255,255,.22);

}

/* =========================
   HERO
========================= */

.hero {

    /* min-height: 82vh; */

    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(72,255,114,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 40%,
            rgba(40,215,255,.18),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #03060a,
            #0b1320 58%,
            #05080c
        );

    color: #fff;

    display: flex;
    align-items: center;
    overflow: hidden;

}

.eyebrow {

    color: var(--green);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .78rem;

}

.hero h1,
.page-hero h1 {

    font-size: clamp(1rem, 0.5vw, 0.5rem);
    font-weight: 950;
    line-height: .9;
    letter-spacing: -.05em;

}

.hero p,
.page-hero p {

    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    color: #c8d3df;

}

/* =========================
   GLASS EFFECT
========================= */

.glass {

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.025)
    );

    border: 1px solid var(--line);

    box-shadow:
        0 40px 120px rgba(0,0,0,.42);

    backdrop-filter: blur(12px);

    border-radius: 34px;

}

/* =========================
   CONSOLA
========================= */

.console-shot {

    position: relative;
    padding: 28px;

}

.console-screen {

    height: 330px;

    border-radius: 24px;

    background: linear-gradient(
        160deg,
        #101923,
        #05080c
    );

    border: 1px solid rgba(255,255,255,.12);

    padding: 18px;

}

.scene-grid {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;

}

.scene {

    height: 54px;

    border-radius: 14px;

    background: #1f2a38;

    border: 1px solid rgba(255,255,255,.1);

}

.scene.on {

    background: linear-gradient(
        135deg,
        var(--green),
        #118d50
    );

}

.meter {

    height: 10px;

    border-radius: 99px;

    background: rgba(255,255,255,.12);

    overflow: hidden;

}

.meter span {

    display: block;
    height: 100%;

    background: linear-gradient(
        90deg,
        var(--cyan),
        var(--green)
    );

}

/* =========================
   SECCIONES
========================= */

.section-dark {

    background: var(--bg);
    color: #fff;

}

.section-soft {

    background: #eef3f8;

}

.page-hero {

    background: linear-gradient(
        135deg,
        #05080c,
        #101923
    );

    color: #fff;
    padding: 92px 0;

}

/* =========================
   CARDS
========================= */
.hand {
  cursor: pointer;
}
.feature-card,
.product-card,
.price-card,
.auth-card,
.dash-card,
.fcom-panel,
.legal-card {
transition: 0.3s all;
    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    box-shadow:
        0 18px 48px rgba(15,23,42,.08);

    padding: 30px;

    height: 100%;

}

.dark-card {

    background: linear-gradient(
        150deg,
        #0f1724,
        #080c12
    );

    color: #fff;

    border-color: rgba(255,255,255,.1);

}

.product-card:hover{
  transition: 0.3s all;
  height: 102%;
  box-shadow:
      0 10px 30px rgba(15,23,42,.15);
}

.feature-card h3,
.product-card h3 {

    font-weight: 900;

}

.feature-icon {

    width: 54px;
    height: 54px;

    border-radius: 18px;

    display: grid;
    place-items: center;

    background: linear-gradient(
        135deg,
        var(--blue),
        var(--cyan)
    );

    color: #fff;
    font-weight: 900;

}

/* =========================
   SPLIT IMAGE
========================= */

.split-img {

    min-height: 360px;

    border-radius: 32px;

    background:

        radial-gradient(
            circle at 70% 20%,
            rgba(72,255,114,.3),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #101923,
            #05080c
        );

    border: 1px solid rgba(255,255,255,.1);

}

/* =========================
   PRECIOS
========================= */

.price-card.featured {

    background: linear-gradient(
        145deg,
        #1456d8,
        #08a9c2
    );

    color: #fff;

    transform: translateY(-8px);

}

.price {

    font-size: 2.8rem;
    font-weight: 950;
    letter-spacing: -.04em;

}

/* =========================
   AUTH
========================= */

.auth-wrap {
    min-height: 70vh;
}

.auth-card {
    max-width: 520px;
}

.form-control,
.form-select {


    border-radius: 16px;
    padding: .85rem 1rem;

}

/* =========================
   PERFIL
========================= */

.profile-photo {

    width: 126px;
    height: 126px;

    object-fit: cover;

    border-radius: 50%;

    background: #e5e7eb;

    border: 6px solid #fff;

    box-shadow:
        0 10px 30px rgba(15,23,42,.15);

}

/* =========================
   DASHBOARD
========================= */

.dash-card span {

    display: block;
    color: #64748b;

}

.dash-card strong {

    display: block;

    font-size: 1.65rem;

    word-break: break-word;

}

/* =========================
   MINI NAV
========================= */

.mini-nav {

    background: #fff;

    border-bottom: 1px solid #e5e7eb;

    position: sticky;

    top: 64px;

    z-index: 50;

}

.mini-nav a {

    display: inline-block;

    padding: 14px 16px;

    color: #334155;

    text-decoration: none;

    font-weight: 800;

}

.mini-nav a:hover {
    color: #0f61ff;
}

/* =========================
   HELP
========================= */

.help-card a {
    text-decoration: none;
}

/* =========================
   LEGALES
========================= */

.legal-doc h2 {

    margin-top: 2rem;
    font-weight: 900;

}

/* =========================
   FOOTER
========================= */

.fcom-footer {

    background: #05080c;
    color: #fff;

}

.fcom-footer a {

    display: block;

    color: rgba(255,255,255,.65);

    text-decoration: none;

}

.fcom-footer a:hover {
    color: #fff;
}

/* =========================
   COOKIES
========================= */

.cookie-banner {

    position: fixed;

    left: 24px;
    right: 24px;
    bottom: 24px;

    background: #0f172a;

    color: #fff;

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 22px;

    padding: 18px;

    display: flex;
    gap: 16px;

    justify-content: space-between;
    align-items: center;

    box-shadow:
        0 20px 70px rgba(0,0,0,.35);

    z-index: 9999;

}

/* =========================
   TABLAS
========================= */

.table td,
.table th {

    vertical-align: middle;

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px) {

    .hero:not(.hero-video) {
        min-height: auto;
        padding: 72px 0;
    }

    .hero-video {
        width: 100%;
        max-width: 100%;
        min-height: 500px;
        padding: 0;
        align-items: flex-end;
    }

    .hero-video .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 36px !important;
    }

    .hero-video h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: .95;
    }

    .hero-video-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .console-screen {
        height: 250px;
    }

    .cookie-banner {
        display: block;
    }

    .price-card.featured {
        transform: none;
    }
}
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.hero-video {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 500px;
    overflow: hidden;
    background: #03060a;
    padding: 0 !important;
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(3,6,10,1) 0%,
        rgba(3,6,10,.20) 48%,
        rgba(3,6,10,.65) 100%
    );
}

@media (max-width:768px) {

    .hero:not(.hero-video) {
        min-height: auto;
        padding: 72px 0;
    }

    .hero-video {
        min-height: 500px;
        align-items: flex-end !important;
    }

    .hero-video .container {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 42px !important;
    }

    .hero-video h1 {
        font-size: clamp(2.2rem, 10vw, 3rem);
        line-height: .95;
    }

    .home-products .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =========================================================
   FCom visual refresh - TRAMIGES inspired aesthetic
   Solo estilos visuales. No modifica lógica ni funcionalidad.
   ========================================================= */
:root{
    --bg:#f6f3ee;
    --paper:#fffaf2;
    --ink:#151515;
    --muted:#6e6a63;
    --line:rgba(20,20,20,.14);
    --gold:#a77b36;
    --gold-soft:#d8bf8f;
    --blue:#17334f;
    --blue-soft:#e7edf3;
    --dark:#080b10;
    --dark-2:#111821;
    --white:#ffffff;
    --shadow:0 24px 70px rgba(0,0,0,.13);
    --shadow2:rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    --radius:26px;
    --green:#2fbf73;
    --cyan:#2098bc;
    --danger:#c94a54;
}

html{scroll-behavior:smooth;min-height:100%;}
body{
    min-height:100vh;
    background:var(--bg) !important;
    color:var(--ink) !important;
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 78% 10%,rgba(167,123,54,.13),transparent 28%),
        radial-gradient(circle at 12% 65%,rgba(23,51,79,.10),transparent 30%),
        linear-gradient(180deg,#f8f4ec 0%,#f0ece5 100%);
}
a{transition:.22s ease;}

/* Bootstrap container, suavizado al estilo Tramigés */
.container{
    max-width:1180px;
}

/* =========================
   Navbar
========================= */
.fcom-navbar{
    background:rgba(246,243,238,.88) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(0,0,0,.07) !important;
    box-shadow:none;
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand span,
.navbar-dark .navbar-nav .nav-link{
    color:#222 !important;
}
.navbar-brand{
    font-weight:800;
    letter-spacing:.04em;
}
.navbar-brand img{
    background:linear-gradient(145deg,#fff,#ebe2d3);
    border:1px solid var(--line);
    border-radius:14px;
    padding:5px;
    height:44px !important;
}
.navbar-dark .navbar-nav .nav-link{
    font-size:14px;
    position:relative;
    opacity:1;
}
.navbar-dark .navbar-nav .nav-link:after{
    content:"";
    position:absolute;
    left:.5rem;
    right:100%;
    bottom:3px;
    height:1px;
    background:var(--gold);
    transition:.25s;
}
.navbar-dark .navbar-nav .nav-link:hover:after{
    right:.5rem;
}
.navbar-toggler{
    border-color:rgba(0,0,0,.18) !important;
    filter:invert(1);
}

/* =========================
   Botones
========================= */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:999px !important;
    padding:13px 20px !important;
    font-weight:800 !important;
    font-size:14px;
    letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
    transition:.25s;
}
.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 35px rgba(0,0,0,.18);
}
.btn-primary,
.btn-fcom{
    background:var(--dark) !important;
    border:1px solid var(--dark) !important;
    color:#fff !important;
}
.btn-light,
.btn-outline-secondary,
.btn-outline-light{
    background:transparent !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    box-shadow:none;
}
.btn-outline-danger{
    background:transparent !important;
    color:#9f3038 !important;
    border:1px solid rgba(159,48,56,.30) !important;
    box-shadow:none;
}
.fcom-footer .btn-fcom,
.section-dark .btn,
.footer-newsletter .btn-fcom{
    background:#fff !important;
    color:#101010 !important;
    border-color:#fff !important;
}

/* =========================
   Hero principal y page hero
========================= */
.hero,
.page-hero{
    position:relative;
    overflow:hidden;
}
.page-hero{
    padding:140px 0 88px !important;
    background:
        radial-gradient(circle at 75% 25%,rgba(167,123,54,.20),transparent 32%),
        radial-gradient(circle at 20% 70%,rgba(23,51,79,.14),transparent 35%),
        linear-gradient(180deg,#f8f4ec 0%,#f0ece5 100%) !important;
    color:var(--ink) !important;
}
.page-hero:before,
.hero:not(.hero-video):before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(180deg,black,transparent 85%);
    pointer-events:none;
}
.page-hero .container,
.hero .container{
    position:relative;
    z-index:2;
}
.hero-video{
    min-height:calc(100vh - 72px) !important;
    background:#05070a !important;
}
.hero-video-overlay{
    background:
        linear-gradient(90deg,rgba(8,11,16,.92),rgba(23,51,79,.58) 48%,rgba(8,11,16,.86)),
        radial-gradient(circle at 80% 20%,rgba(167,123,54,.20),transparent 35%) !important;
}
.hero-video h1{
    max-width:900px;
    font-size:clamp(46px,7vw,88px) !important;
    line-height:1.01 !important;
    letter-spacing:-.055em !important;
}
.page-hero h1{
    color:var(--ink) !important;
    font-size:clamp(46px,7vw,86px) !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
}
.page-hero p{
    max-width:760px;
    color:#3e3b36 !important;
    font-size:20px !important;
    line-height:1.65 !important;
    margin-top:26px;
}
.eyebrow{
    display:inline-flex !important;
    align-items:center;
    gap:10px;
    color:var(--gold) !important;
    font-weight:900 !important;
    text-transform:uppercase;
    font-size:12px !important;
    letter-spacing:.18em !important;
    margin-bottom:18px;
}
.eyebrow:before{
    content:"";
    width:36px;
    height:1px;
    background:var(--gold);
}

/* =========================
   Tipografía y secciones
========================= */
h1,h2,h3,h4,h5{
    color:inherit;
    letter-spacing:-.045em !important;
    line-height:1.04 !important;
}
h2,.display-5,.display-6{
    font-size:clamp(34px,4.5vw,58px) !important;
    font-weight:900 !important;
}
h3{font-weight:900 !important;}
p,li,.lead,.text-muted{
    line-height:1.7;
}
.text-muted,
.muted{
    color:var(--muted) !important;
}
section.container.py-5,
section.py-5,
section.section-soft,
section.section-dark{
    padding-top:105px !important;
    padding-bottom:105px !important;
}
.section-soft,
section[style*="background:#fff"],
section[style*="background:#eaeaea"]{
    background:var(--paper) !important;
    border-block:1px solid var(--line);
    color:var(--ink) !important;
}
.section-dark{
    background:linear-gradient(135deg,var(--dark),var(--dark-2)) !important;
    color:#fff !important;
}
.section-dark p,
.section-dark .text-white-50{
    color:rgba(255,255,255,.72) !important;
}

/* =========================
   Cards / paneles / dashboard
========================= */
.feature-card,
.product-card,
.price-card,
.auth-card,
.dash-card,
.fcom-panel,
.legal-card,
.modal-content{
    /* background:var(--paper) !important; */
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    box-shadow:0 10px 40px rgba(0,0,0,.06) !important;
    padding:30px;
    transition:.25s ease !important;
}
.feature-card:hover,
.product-card:hover,
.price-card:hover,
.dash-card:hover,
.fcom-panel:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow) !important;
}
.product-card{
    min-height:160px;
    border-radius:var(--radius) !important;
}
.product-card:hover{
    height:100% !important;
}
.product-card:before,
.feature-card:before,
.price-card:before,
.fcom-panel:before,
.dash-card:before{
    content:"";
    display:block;
    width:42px;
    height:42px;
    border-radius:14px;
    background:var(--blue-soft);
    margin-bottom:18px;
    box-shadow:inset 0 0 0 1px rgba(23,51,79,.06);
}
.product-card[style*="background-image"]:before{
    display:none;
}
.feature-card h3,
.product-card h3,
.price-card h3,
.fcom-panel h3{
    color:var(--ink);
}
.product-card[style*="background-image"] h3{
    color:#fff !important;
}
.dark-card,
.price-card.featured{
    background:linear-gradient(135deg,var(--dark),var(--dark-2)) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.12) !important;
}
.dark-card h3,
.price-card.featured h3,
.price-card.featured .price{
    color:#fff !important;
}
.dark-card p,
.price-card.featured p,
.price-card.featured li{
    color:rgba(255,255,255,.72) !important;
}
.price{
    color:var(--blue);
    font-size:clamp(36px,4vw,52px) !important;
}
.feature-icon{
    background:var(--blue-soft) !important;
    color:var(--blue) !important;
    border-radius:14px !important;
}
.split-img{
    border-radius:32px !important;
    background:
        linear-gradient(135deg,rgba(8,11,16,.87),rgba(23,51,79,.82)),
        repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 20px) !important;
    box-shadow:var(--shadow);
}
img.img-fluid,
.profile-photo{
    border-radius:28px;
    box-shadow:var(--shadow);
    object-fit:cover;
}
.profile-photo{
    border-radius:50% !important;
}
img[src="/images/innovacion.jpg"]{
    width:100% !important;
    height:680px !important;
    object-fit:cover;
    border-radius:32px;
}
img.img-fluidCuadrado{
  border-radius:6px;
  box-shadow:var(--shadow2);
  object-fit:cover;
}
/* =========================
   Mini nav / formularios / tablas
========================= */
.mini-nav{
    background:rgba(255,250,242,.86) !important;
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line) !important;
}
.mini-nav a{
    color:var(--ink) !important;
}
.mini-nav a:hover{
    color:var(--gold) !important;
}
.auth-wrap{
    min-height:calc(100vh - 220px);
    display:flex;
    align-items:center;
}
.auth-card{
    max-width:560px;
}
.form-control,
.form-select{
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    color:var(--ink) !important;
    padding:.9rem 1rem !important;
}
.form-control:focus,
.form-select:focus{
    border-color:var(--gold) !important;
    box-shadow:0 0 0 .2rem rgba(167,123,54,.12) !important;
}
.modal-content{
    color:var(--ink);
}
.table{
    color:var(--ink);
}
.table thead th{
    background:var(--blue-soft);
    color:var(--blue);
    border-bottom:1px solid var(--line);
}
code{
    color:var(--blue);
    background:var(--blue-soft);
    border-radius:8px;
    padding:2px 6px;
}

/* =========================
   Footer estilo corporativo
========================= */
.fcom-footer{
    margin-top:0 !important;
    background:#05070a !important;
    color:#fff !important;
    padding-top:0;
}
.footer-newsletter{
    background:
        linear-gradient(135deg,rgba(8,11,16,.96),rgba(23,51,79,.92)),
        radial-gradient(circle at 90% 15%,rgba(216,191,143,.25),transparent 24%);
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    padding-top:72px !important;
    padding-bottom:72px !important;
}
.newsletter-icon i{
    color:var(--gold) !important;
}
.newsletter-title{
    color:#fff !important;
    font-size:clamp(34px,4.5vw,58px) !important;
}
.newsletter-text,
.newsletter-legal{
    color:rgba(255,255,255,.66) !important;
}
.newsletter-check input{
    accent-color:var(--gold) !important;
}
.newsletter-form .form-control{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#fff !important;
}
.footer-links{
    padding:64px 0 0 !important;
}
.footer-links h6,
.fcom-footer h6{
    color:#fff;
    font-weight:900;
    margin-bottom:18px;
}
.fcom-footer a{
    color:rgba(255,255,255,.62) !important;
    margin-bottom:10px;
}
.fcom-footer a:hover{
    color:#fff !important;
}
.footer-brand img{
    margin:0 auto;

    border-radius:18px;
    padding:8px;
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.10);
    background:#05070a;
}
.fcom-footer hr{
    border-color:rgba(255,255,255,.12);
    opacity:1;
    margin:0;
}
.cookie-banner{
    border-radius:24px !important;
    background:#080b10 !important;
    border:1px solid rgba(255,255,255,.14) !important;
}

/* =========================
   Responsive
========================= */
@media (max-width:991px){
    .navbar-collapse{
        background:rgba(255,250,242,.98);
        border:1px solid var(--line);
        border-radius:22px;
        padding:16px;
        margin-top:12px;
        box-shadow:var(--shadow);
    }
    .hero-video{
        min-height:680px !important;
    }
    .hero-video h1,
    .page-hero h1{
        font-size:clamp(42px,12vw,64px) !important;
    }
    section.container.py-5,
    section.py-5,
    section.section-soft,
    section.section-dark{
        padding-top:72px !important;
        padding-bottom:72px !important;
    }
    img[src="/images/innovacion.jpg"]{
        height:auto !important;
        max-height:none;
    }
}
@media (max-width:767px){
    .container{
        width:calc(100% - 32px);
        max-width:calc(100% - 32px);
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .page-hero{
        padding:110px 0 68px !important;
    }
    .hero-video{
        min-height:620px !important;
    }
    .hero-video .container{
        padding-bottom:42px !important;
    }
    .input-group{
        display:grid !important;
        gap:12px;
    }
    .input-group>.form-control,
    .input-group>.btn{
        width:100% !important;
        border-radius:18px !important;
    }
    .feature-card,
    .product-card,
    .price-card,
    .auth-card,
    .dash-card,
    .fcom-panel,
    .legal-card{
        padding:24px !important;
    }
    .d-flex.justify-content-between{
        gap:18px;
        align-items:flex-start !important;
        flex-direction:column;
    }
}
.download-list {
    display: grid;
    gap: 12px;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.45);
    color: var(--ink);
    text-decoration: none;
}

.download-item:hover {
    background: #fff;
    color: var(--ink);
    transform: translateY(-2px);
}

.download-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    /* background: var(--dark); */
    color: #000;
    font-size: 13px;
    font-weight: 900;
}

.download-item strong,
.download-item small {
    display: block;
}

.download-item small {
    color: var(--muted);
}
.noexpert-detail {
    animation: noexpertFade .22s ease;
}

.noexpert-diagram {
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.noexpert-step-card {
    height: 100%;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.45);
}

.noexpert-step-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(231,237,243,.55);
    margin-bottom: 18px;
    box-shadow: none;
}

.noexpert-step-card h4 {
    margin-bottom: 8px;
}

.control-note {
    margin-top: 18px;
    padding: 16px;
    border-left: 4px solid var(--gold);
    background: rgba(167,123,54,.08);
    border-radius: 14px;
}

@keyframes noexpertFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.page-hero .container {
    position: relative;
}

.page-hero-back {
    position: absolute;
    top: 0;
    right: 0;
}

@media (max-width: 767px) {
    .page-hero-back {
        position: static;
        margin-top: 24px;
    }
}