:root{
    --trl-surface-canvas:   #F4F6F8;
    --trl-surface-panel:    #FFFFFF;
    --trl-surface-muted:    #EEF2F6;

    --trl-brand-emerald:      #2BB673;
    --trl-brand-emerald-deep: #1F8A57;

    --trl-ink-graphite: #1F2A37;
    --trl-line-steel:   #D9E1E9;

    --trl-text-primary:   #151B24;
    --trl-text-secondary: #5B667A;
    --trl-text-inverse:   #FFFFFF;
    --trl-text-inverse-dim: rgba(255,255,255,.72);

    --trl-gradient-brand:  linear-gradient(135deg, #33C67F 0%, #1F8A57 100%);
    --trl-gradient-canvas: linear-gradient(160deg, #FFFFFF 0%, #EEF2F6 100%);

    --trl-radius-xl: 28px;
    --trl-radius-lg: 20px;
    --trl-radius-md: 14px;
    --trl-radius-pill: 999px;

    --trl-shadow-soft:  0 20px 45px -20px rgba(21,27,36,.18);
    --trl-shadow-card:  0 12px 30px -14px rgba(21,27,36,.16);
    --trl-shadow-btn:   0 14px 28px -10px rgba(31,138,87,.45);

 /*    --trl-container: 1200px; */
    --trl-container: 1440px;
    --trl-font-display: 'Unbounded', sans-serif;
    --trl-font-body: 'Inter', sans-serif;
    --trl-font-mono: 'JetBrains Mono', monospace;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body.trl-body{
    background:var(--trl-surface-canvas);
    font-family:var(--trl-font-body);
    color:var(--trl-text-primary);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }

  .trl-color-card__media {
    height:180px
  }

  .trl-wrap{
    max-width:var(--trl-container);
    margin:0 auto;
    padding:0 32px;
  }

  a{ text-decoration:none; color:inherit; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }

  /* ============================================================
     HEADER
     ============================================================ */
  .trl-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    padding:20px 0 0;
    transition:padding .3s ease;
  }
  .trl-header.is-scrolled{ padding-top:12px; }
  .trl-header.is-scrolled .trl-header__inner{
    box-shadow:0 18px 40px -16px rgba(6,9,13,.35);
  }
 
  .trl-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-pill);
    padding:12px 14px 12px 22px;
    box-shadow:var(--trl-shadow-card);
    transition:box-shadow .3s ease;
    position:relative;
    z-index:2;
  }
 
  .trl-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:17px;
    letter-spacing:.01em;
    color:var(--trl-ink-graphite);
    white-space:nowrap;
    text-decoration:none;
  }
  .trl-logo__mark{
    width:34px; height:34px;
    border-radius:10px;
    background:var(--trl-gradient-brand);
    position:relative;
    flex-shrink:0;
  }
  .trl-logo__mark::before,
  .trl-logo__mark::after{
    content:"";
    position:absolute;
    left:8px; right:8px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.92);
  }
  .trl-logo__mark::before{ top:11px; }
  .trl-logo__mark::after{ top:19px; background:rgba(255,255,255,.55); }
 
  .trl-nav{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
    margin:0; padding:0;
  }
  .trl-nav a{
    font-size:14.5px;
    font-weight:500;
    color:var(--trl-text-secondary);
    text-decoration:none;
    transition:color .2s ease;
    position:relative;
  }
  .trl-nav a:hover{ color:var(--trl-ink-graphite); }
 
  .trl-header__actions{ display:flex; align-items:center; gap:10px; }
 
  .trl-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:14.5px;
    border-radius:var(--trl-radius-pill);
    padding:13px 24px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
    white-space:nowrap;
  }
  .trl-btn--brand{
    background:var(--trl-gradient-brand);
    color:var(--trl-text-inverse);
    box-shadow:var(--trl-shadow-btn);
  }
  .trl-btn--brand:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(31,138,87,.55); }
 
  .trl-btn--ghost-dark{
    background:rgba(255,255,255,.08);
    color:var(--trl-text-inverse);
    border:1.5px solid rgba(255,255,255,.4);
    backdrop-filter:blur(6px);
  }
  .trl-btn--ghost-dark:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.7); transform:translateY(-2px); }
 
  .trl-burger{
    display:none;
    width:40px; height:40px;
    border-radius:50%;
    background:var(--trl-surface-muted);
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
    flex-shrink:0;
    position:relative;
    padding:0;
  }
  .trl-burger span,
  .trl-burger span::before,
  .trl-burger span::after{
    content:"";
    display:block;
    width:16px; height:2px;
    background:var(--trl-ink-graphite);
    position:relative;
    transition:transform .25s ease, opacity .25s ease, background .25s ease;
  }
  .trl-burger span::before{ position:absolute; top:-5px; }
  .trl-burger span::after{ position:absolute; top:5px; }
 
  .trl-burger[aria-expanded="true"] span{ background:transparent; }
  .trl-burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .trl-burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
 
  .trl-menu-backdrop{
    position:fixed;
    inset:0;
    background:rgba(10,14,12,.45);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
    z-index:40;
  }
  .trl-menu-backdrop.is-open{
    opacity:1;
    visibility:visible;
    transition:opacity .3s ease;
  }
 
  .trl-menu{
    position:fixed;
    top:0; right:0;
    height:100%;
    height:100dvh;
    width:min(86vw, 380px);
    background:var(--trl-surface-panel);
    z-index:41;
    padding:20px 22px calc(24px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:-24px 0 60px -20px rgba(6,9,13,.4);
    overflow-y:auto;
  }
  .trl-menu.is-open{ transform:translateX(0); }
 
  .trl-menu__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px;
  }
  .trl-menu__close{
    width:40px; height:40px;
    border-radius:50%;
    background:var(--trl-surface-muted);
    border:none;
    cursor:pointer;
    position:relative;
    flex-shrink:0;
  }
  .trl-menu__close::before,
  .trl-menu__close::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:16px; height:2px;
    background:var(--trl-ink-graphite);
    transform-origin:center;
  }
  .trl-menu__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .trl-menu__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
 
  .trl-menu__nav{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .trl-menu__nav a{
    display:block;
    padding:15px 4px;
    font-size:18px;
    font-weight:600;
    color:var(--trl-ink-graphite);
    text-decoration:none;
    border-bottom:1px solid rgba(28,37,33,.08);
    transition:color .2s ease, padding-left .2s ease;
  }
  .trl-menu__nav a:active,
  .trl-menu__nav a:hover{
    color:#1f8a57;
    padding-left:8px;
  }
 
  .trl-menu__footer{
    margin-top:auto;
    padding-top:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .trl-menu__footer .trl-btn{
    width:100%;
    padding:15px 24px;
  }
  .trl-menu__contact{
    font-size:13.5px;
    color:var(--trl-text-secondary);
    text-align:center;
  }
  .trl-menu__contact a{ color:var(--trl-ink-graphite); font-weight:600; text-decoration:none; }
 
  body.trl-noscroll{ overflow:hidden; }

  @media (max-width: 980px){
    .trl-nav{ display:none; }
    .trl-burger{ display:flex; }
  }
 
  @media (max-width: 600px){
    .trl-wrap{ padding:0 14px; }
    .trl-header{ padding:12px 0 0; }
    .trl-header.is-scrolled{ padding-top:8px; }
    .trl-header__inner{ padding:8px 8px 8px 14px; gap:12px; }
    .trl-logo{ font-size:15px; gap:8px; }
    .trl-logo__mark{ width:30px; height:30px; border-radius:8px; }
    .trl-header__actions .trl-btn--brand{ display:none !important; }
    .trl-menu{ width:100vw; padding-left:18px; padding-right:18px; }
  }
 
  @media (max-width: 360px){
    .trl-logo{ font-size:13.5px; }
    .trl-burger{ width:36px; height:36px; }
    .trl-menu__nav a{ font-size:16.5px; padding:13px 4px; }
  }
 
  @media (max-height: 480px) and (orientation: landscape){
    .trl-menu__top{ margin-bottom:14px; }
    .trl-menu__nav a{ padding:9px 4px; font-size:16px; }
    .trl-menu__footer{ padding-top:12px; }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* ============================================================
     HERO
     ============================================================ */
  .trl-hero-full{
    position:relative;
    width:100%;
    min-height:720px;
    overflow:hidden;
    isolation:isolate;
    background:#101820;
    display:flex;
    flex-direction:column;
  }

  .trl-hero__inner{
    position:relative;
    z-index:2;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-end; 
    padding-top:130px;        
    padding-bottom:44px;
  }

  .trl-hero__backdrop{
    position:absolute; inset:0;
    background-image:
      linear-gradient(200deg, rgba(16,24,32,.72) 0%, rgba(10,16,23,.6) 55%, rgba(10,16,23,.82) 100%),
      radial-gradient(120% 90% at 78% 8%, rgba(43,182,115,.18) 0%, rgba(43,182,115,0) 55%),
      url("/userfiles/images/hero-bg.jpg");
    background-size:cover;
    background-position:center;
  }
  .trl-hero__grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
  }
  .trl-hero__vignette{
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(6,9,13,.86) 0%, rgba(6,9,13,.35) 42%, rgba(6,9,13,0) 68%),
               linear-gradient(90deg, rgba(6,9,13,.55) 0%, rgba(6,9,13,0) 46%);
  }

  .trl-hero__content{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:36px;
  }

  .trl-hero__left{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:28px;
  }

  .trl-hero__text{
    flex:0 0 auto;
  }

  .trl-hero__photo{
    flex:0 0 auto;
    width:540px;
    border-radius:var(--trl-radius-lg);
    overflow:hidden;
    background-image:url("/userfiles/images/img-right.jpg");
    background-size:cover;
    background-position:center;
    box-shadow:var(--trl-shadow-soft), 0 0 0 1px rgba(255,255,255,.08) inset;
  }

  .trl-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    font-family:var(--trl-font-mono);
    font-size:12.5px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--trl-text-inverse-dim);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    padding:8px 16px 8px 12px;
    border-radius:var(--trl-radius-pill);
    margin-bottom:28px;
    backdrop-filter:blur(4px);
  }
  .trl-eyebrow__dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--trl-brand-emerald);
    box-shadow:0 0 0 4px rgba(43,182,115,.22);
  }

  .trl-hero__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    color:var(--trl-text-inverse);
    font-size:clamp(38px, 4.6vw, 60px);
    line-height:1.06;
    letter-spacing:-0.01em;
    max-width:860px; 
  }
  .trl-hero__title em{
    font-style:normal;
    background:linear-gradient(100deg, #6BE3A6 0%, #2BB673 60%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .trl-hero__desc{
    margin-top:22px;
    max-width:560px; 
    font-size:16.5px;
    line-height:1.6;
    color:var(--trl-text-inverse-dim);
  }

  .trl-hero__actions{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:36px;
    flex-wrap:wrap;
  }

  .trl-btn__arrow{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px;
    transition:transform .25s ease;
  }
  .trl-btn--brand:hover .trl-btn__arrow{ transform:translateX(3px); }

  .trl-hero__stats{
    display:flex;
    gap:14px;
  }
  .trl-stat{
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-lg);
    padding:18px 22px 16px;
    min-width:132px;
    box-shadow:var(--trl-shadow-soft);
    position:relative;
    overflow:hidden;
  }
  .trl-stat::before{
    content:"";
    position:absolute; top:0; left:0; right:0;
    height:4px;
    background:var(--trl-gradient-brand);
  }
  .trl-stat__num{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:26px;
    color:var(--trl-ink-graphite);
    display:block;
  }
  .trl-stat__label{
    font-size:12px;
    color:var(--trl-text-secondary);
    margin-top:4px;
    line-height:1.35;
    display:block;
  }

  @media (max-width: 980px){
    .trl-hero-full{ min-height:auto; }
    .trl-hero__inner{ padding-top:104px; padding-bottom:32px; }
    .trl-hero__stats{ flex-wrap:wrap; }
    .trl-hero__content{
      flex-direction:column;
      align-items:stretch;
      gap:24px;
    }
    .trl-hero__left{
      gap:22px;
    }
    .trl-hero__photo{
      width:100%;
      aspect-ratio:16/9;
      order:-1;
    }
  }

  @media (max-width: 600px){
    .trl-hero__inner{ padding-top:88px; padding-bottom:26px; }
    .trl-hero__content{ gap:20px; }
    .trl-hero__photo{ aspect-ratio:4/3; border-radius:var(--trl-radius-md); }
    .trl-eyebrow{ font-size:11px; padding:7px 14px 7px 10px; margin-bottom:20px; white-space:normal; }
    .trl-hero__desc{ font-size:15px; margin-top:16px; }
    .trl-hero__actions{ margin-top:26px; gap:12px; }
    .trl-btn{ padding:12px 20px; font-size:13.5px; flex:1 1 auto; justify-content:center; }

    .trl-hero__stats{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .trl-stat{
      min-width:0;
      padding:14px 14px 12px;
    }
    .trl-stat:nth-child(3){
      grid-column:1 / -1;
    }
    .trl-stat__num{ font-size:20px; }
    .trl-stat__label{ font-size:11px; }
  }

  @media (max-width: 360px){
    .trl-hero__inner{ padding-top:78px; }
    .trl-hero__title{ font-size:30px; }
    .trl-btn{ padding:11px 16px; font-size:13px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .trl-products{
    padding:100px 0;
    background:var(--trl-surface-canvas);
  }

  .trl-products__head{
    max-width:640px;
    margin:0 auto 52px;
    text-align:center;
  }
  .trl-eyebrow--light{
    background:var(--trl-surface-muted);
    border:1px solid var(--trl-line-steel);
    color:var(--trl-text-secondary);
    margin:0 auto 20px;
  }
  .trl-products__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(30px, 3.4vw, 42px);
    color:var(--trl-text-primary);
    letter-spacing:-0.01em;
    line-height:1.12;
  }
  .trl-products__desc{
    margin-top:16px;
    font-size:16px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  .trl-products__grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
  }

  .trl-product-card{
    display:flex;
    flex-direction:column;
    text-align:left;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-lg);
    overflow:hidden;
    box-shadow:var(--trl-shadow-card);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    position:relative;
  }
  .trl-product-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--trl-shadow-soft);
  }
  .trl-product-card:focus-visible{
    outline:2px solid var(--trl-brand-emerald);
    outline-offset:3px;
  }

  .trl-product-card__tag{
    position:absolute;
    top:14px; left:14px;
    z-index:2;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--trl-ink-graphite);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(4px);
    padding:6px 12px;
    border-radius:var(--trl-radius-pill);
  }

  .trl-product-card__media{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--trl-surface-muted);
  }
  .trl-product-card__media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .trl-product-card:hover .trl-product-card__media img{
    transform:scale(1.06);
  }

  .trl-product-card__body{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:18px 20px 20px;
    flex:1;
  }
  .trl-product-card__title{
    font-size:15.5px;
    font-weight:600;
    line-height:1.35;
    color:var(--trl-text-primary);
  }
  .trl-product-card__more{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:var(--trl-brand-emerald-deep);
  }
  .trl-product-card__arrow{
    transition:transform .25s ease;
  }
  .trl-product-card:hover .trl-product-card__arrow{
    transform:translateX(3px);
  }

  /* ============================================================
     MODAL
     ============================================================ */
  .trl-modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    visibility:hidden;
    opacity:0;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .trl-modal.is-open{
    visibility:visible;
    opacity:1;
  }

  .trl-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(10,16,23,.62);
    backdrop-filter:blur(3px);
  }

  .trl-modal__dialog{
    position:relative;
    z-index:2;
    width:100%;
    max-width:860px;
    max-height:88vh;
    overflow-y:auto;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-xl);
    box-shadow:0 30px 70px -20px rgba(6,9,13,.45);
    display:grid;
    grid-template-columns:340px 1fr;
    transform:translateY(18px) scale(.98);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .trl-modal.is-open .trl-modal__dialog{
    transform:translateY(0) scale(1);
  }

  .trl-modal__close{
    position:absolute;
    top:16px; right:16px;
    z-index:3;
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:var(--trl-ink-graphite);
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--trl-shadow-card);
    transition:background .2s ease, transform .2s ease;
  }
  .trl-modal__close:hover{
    background:#fff;
    transform:rotate(90deg);
  }

  .trl-modal__media{
    background:var(--trl-surface-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
  }
  .trl-modal__media img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .trl-modal__body{
    padding:40px 36px 36px;
    display:flex;
    flex-direction:column;
  }
  .trl-modal__tag{
    align-self:flex-start;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--trl-brand-emerald-deep);
    background:rgba(43,182,115,.12);
    padding:6px 14px;
    border-radius:var(--trl-radius-pill);
    margin-bottom:16px;
  }
  .trl-modal__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:24px;
    line-height:1.25;
    color:var(--trl-text-primary);
  }
  .trl-modal__desc{
    margin-top:14px;
    font-size:14.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  .trl-modal__specs{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--trl-line-steel);
  }
  .trl-modal__specs > div{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid var(--trl-line-steel);
    font-size:13.5px;
  }
  .trl-modal__specs dt{
    color:var(--trl-text-secondary);
  }
  .trl-modal__specs dd{
    color:var(--trl-text-primary);
    font-weight:600;
    text-align:right;
  }

  .trl-modal__actions{
    margin-top:28px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .trl-btn--ghost-light{
    background:var(--trl-surface-muted);
    color:var(--trl-text-primary);
    border:1.5px solid var(--trl-line-steel);
  }
  .trl-btn--ghost-light:hover{
    background:var(--trl-line-steel);
  }

  body.trl-modal-open{
    overflow:hidden;
  }

  @media (max-width: 1080px){
    .trl-products__grid{ grid-template-columns:repeat(3, 1fr); }
  }

  @media (max-width: 900px){
    .trl-modal__dialog{ grid-template-columns:1fr; max-width:520px; }
    .trl-modal__media{ padding:26px; }
  }

  @media (max-width: 720px){
    .trl-products{ padding:72px 0; }
    .trl-products__grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
    .trl-products__head{ margin-bottom:36px; }
  }

  @media (max-width: 600px){
    .trl-product-card__title{ font-size:14.5px; }
    .trl-product-card__body{ padding:14px 16px 16px; gap:12px; }
    .trl-modal{ padding:0; align-items:flex-end; }
    .trl-modal__dialog{
      max-width:100%;
      max-height:92vh;
      border-radius:20px 20px 0 0;
    }
    .trl-modal__body{ padding:30px 22px 28px; }
    .trl-modal__title{ font-size:20px; }
  }

  @media (max-width: 400px){
    .trl-products__grid{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-product-card, .trl-product-card__media img, .trl-modal, .trl-modal__dialog, .trl-modal__close{
      transition:none !important;
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     ADVANTAGES — 3 ряда
     ============================================================ */
  .trl-advantages{
    position:relative;
    padding:80px 0 60px;
    background:
      radial-gradient(120% 140% at 12% 0%, rgba(43,182,115,.16) 0%, rgba(43,182,115,0) 55%),
      linear-gradient(180deg, #E6F6EE 0%, #DDF1E7 100%);
    overflow:hidden;
    isolation:isolate;
  }

  .trl-advantages__texture{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.5;
    background-image:
      linear-gradient(120deg, rgba(31,138,87,.08) 1px, transparent 1px),
      linear-gradient(30deg, rgba(31,138,87,.08) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 75%);
  }

  .trl-advantages__wrap{
    position:relative;
    z-index:1;
  }

  .trl-advantages__head{
    text-align:center;
    max-width:620px;
    margin:0 auto 44px;
  }

  .trl-eyebrow--onmint{
    background:rgba(255,255,255,.7);
    border:1px solid rgba(31,138,87,.18);
    color:var(--trl-brand-emerald-deep);
    margin:0 auto 20px;
  }

  .trl-advantages__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(28px, 3.2vw, 40px);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--trl-text-primary);
  }

  .trl-advantages__layout{
    display:flex;
    flex-direction:column;
    gap:20px;
  }

  .trl-advantages__row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }

  .trl-advantages__media{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:4px 0;
  }
  .trl-advantages__media img{
    width:100%;
    height:auto;
    max-width:460px;
    display:block;
  }

  .trl-tip{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-md);
    padding:22px;
    box-shadow:var(--trl-shadow-card);
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
    opacity:0;
    transform:translateY(18px);
  }
  .trl-tip.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .trl-tip:hover{
    transform:translateY(-4px);
    box-shadow:var(--trl-shadow-soft);
  }

  .trl-tip__icon{
    flex:0 0 auto;
    width:46px; height:46px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(43,182,115,.12);
    color:var(--trl-brand-emerald-deep);
  }
  .trl-tip__icon svg{
    width:22px; height:22px;
  }

  .trl-tip__title{
    font-size:15px;
    font-weight:700;
    line-height:1.35;
    color:var(--trl-text-primary);
  }
  .trl-tip__desc{
    margin-top:6px;
    font-size:13.5px;
    line-height:1.55;
    color:var(--trl-text-secondary);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .trl-advantages__row{
      grid-template-columns:1fr;
    }
    .trl-advantages__media img{
      max-width:320px;
    }
  }

  @media (max-width: 720px){
    .trl-advantages{ padding:64px 0 48px; }
    .trl-advantages__head{ margin-bottom:32px; }
    .trl-tip{ padding:18px; gap:14px; }
    .trl-tip__icon{ width:40px; height:40px; }
    .trl-tip__icon svg{ width:20px; height:20px; }
    .trl-tip__title{ font-size:14px; }
    .trl-tip__desc{ font-size:13px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-tip{ transition:none !important; opacity:1 !important; transform:none !important; }
  }
  
  
  
  
  
  
  
  
  /* ============================================================
     SERVICES
     ============================================================ */
  .trl-services{
    padding:100px 0 40px;
    background:var(--trl-surface-canvas);
  }
  .trl-services__layout{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:56px;
    align-items:start;
  }
  .trl-services__intro{
    position:sticky;
    top:110px;
  }
  .trl-services__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(26px, 3vw, 38px);
    line-height:1.15;
    color:var(--trl-text-primary);
    margin-top:18px;
    letter-spacing:-0.01em;
  }
  .trl-services__lead{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.65;
    color:var(--trl-text-secondary);
  }
  .trl-services__intro .trl-btn{
    margin-top:28px;
  }

  .trl-services__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .trl-service-card{
    position:relative;
    border-radius:var(--trl-radius-lg);
    overflow:hidden;
    min-height:280px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px;
    text-align:left;
    isolation:isolate;
    cursor:pointer;
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .trl-service-card.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .trl-service-card:nth-child(1).is-visible{ transition-delay:0ms; }
  .trl-service-card:nth-child(2).is-visible{ transition-delay:90ms; }
  .trl-service-card:nth-child(3).is-visible{ transition-delay:180ms; }
  .trl-service-card:nth-child(4).is-visible{ transition-delay:270ms; }

  .trl-service-card__bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .trl-service-card:hover .trl-service-card__bg{
    transform:scale(1.08);
  }
  .trl-service-card__overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(16,24,32,0) 0%, rgba(10,16,23,0.78) 55%, rgba(6,9,13,0.92) 100%);
    transition:background .3s ease;
  }
  .trl-service-card:hover .trl-service-card__overlay{
    background:linear-gradient(180deg, rgba(16,24,32,.1) 0%, rgba(10,16,23,.82) 55%, rgba(6,9,13,.95) 100%);
  }
  .trl-service-card__content{
    position:relative; z-index:2;
  }
  .trl-service-card__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:17px;
    line-height:1.3;
    color:#fff;
  }

  /* описание скрыто по умолчанию, появляется при наведении */
  .trl-service-card__desc{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(8px);
    margin-top:0;
    font-size:13px;
    line-height:1.55;
    color:rgba(255,255,255,.72);
    transition:max-height .35s cubic-bezier(.2,.8,.2,1),
               opacity .35s ease,
               transform .35s cubic-bezier(.2,.8,.2,1),
               margin-top .35s ease;
  }
  .trl-service-card:hover .trl-service-card__desc{
    max-height:200px;
    opacity:1;
    transform:translateY(0);
    margin-top:10px;
  }

  /* ============================================================
     PROCESS
     ============================================================ */
  .trl-process{
    padding:40px 0 100px;
    background:linear-gradient(180deg, #FFFFFF 0%, var(--trl-surface-muted) 100%);
  }
  .trl-process__head{
    text-align:center;
    max-width:560px;
    margin:0 auto 52px;
  }
  .trl-process__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(26px, 3vw, 38px);
    line-height:1.15;
    color:var(--trl-text-primary);
    margin-top:18px;
    letter-spacing:-0.01em;
  }

  .trl-process__grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
    position:relative;
  }

  .trl-step{
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-lg);
    padding:32px 24px 28px;
    box-shadow:var(--trl-shadow-card);
    position:relative;
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .trl-step.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .trl-step:nth-child(1).is-visible{ transition-delay:0ms; }
  .trl-step:nth-child(2).is-visible{ transition-delay:100ms; }
  .trl-step:nth-child(3).is-visible{ transition-delay:200ms; }
  .trl-step:nth-child(4).is-visible{ transition-delay:300ms; }

  .trl-step::before{
    content:"";
    position:absolute;
    top:0; left:24px; right:24px;
    height:4px;
    background:var(--trl-gradient-brand);
    border-radius:0 0 3px 3px;
  }
  .trl-step::after{
    content:"";
    position:absolute;
    top:42px;
    right:-24px;
    width:24px;
    height:2px;
    background:var(--trl-line-steel);
  }
  .trl-step:last-child::after{
    display:none;
  }

  .trl-step__num{
    font-family:var(--trl-font-display);
    font-weight:800;
    font-size:42px;
    line-height:1;
    color:var(--trl-brand-emerald);
    opacity:.28;
    margin-bottom:14px;
    display:block;
  }
  .trl-step__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:16px;
    line-height:1.3;
    color:var(--trl-text-primary);
  }
  .trl-step__desc{
    margin-top:10px;
    font-size:14px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1080px){
    .trl-services__layout{
      grid-template-columns:1fr;
      gap:40px;
    }
    .trl-services__intro{
      position:static;
      max-width:640px;
    }
    .trl-services__grid{
      grid-template-columns:1fr 1fr;
    }
    .trl-process__grid{
      grid-template-columns:1fr 1fr;
    }
    .trl-step::after{
      display:none;
    }
    .trl-step:nth-child(1).is-visible{ transition-delay:0ms; }
    .trl-step:nth-child(2).is-visible{ transition-delay:80ms; }
    .trl-step:nth-child(3).is-visible{ transition-delay:160ms; }
    .trl-step:nth-child(4).is-visible{ transition-delay:240ms; }
  }

  @media (max-width: 720px){
    .trl-services{ padding:72px 0 32px; }
    .trl-services__grid{
      grid-template-columns:1fr;
    }
    .trl-process{ padding:32px 0 72px; }
    .trl-process__grid{
      grid-template-columns:1fr;
      gap:16px;
    }
    .trl-step{
      padding:26px 20px 24px;
    }
    .trl-step__num{
      font-size:36px;
    }
  }

  @media (max-width: 480px){
    .trl-service-card{
      min-height:240px;
      padding:18px;
    }
    .trl-service-card__title{
      font-size:15.5px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-service-card, .trl-step{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
    .trl-service-card__desc{
      max-height:none !important;
      opacity:1 !important;
      transform:none !important;
      margin-top:10px !important;
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     COLORS SECTION — тёмный выделенный фон
     ============================================================ */
  .trl-colors{
    position:relative;
    padding:80px 0;
    background:linear-gradient(165deg, #0b141a 0%, #13242f 50%, #0b141a 100%);
    overflow:hidden;
    isolation:isolate;
  }
  .trl-colors__glow{
    position:absolute;
    top:-25%;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:700px;
    background:radial-gradient(ellipse at center, rgba(43,182,115,.12) 0%, transparent 65%);
    pointer-events:none;
    z-index:0;
  }

  .trl-colors__head{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:640px;
    margin:0 auto 44px;
    padding:0 16px;
  }

  .trl-eyebrow--ondark{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.72);
    margin:0 auto 20px;
  }
  .trl-eyebrow--ondark .trl-eyebrow__dot{
    background:var(--trl-brand-emerald);
    box-shadow:0 0 0 4px rgba(43,182,115,.25);
  }

  .trl-colors__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(24px, 5vw, 42px);
    line-height:1.12;
    letter-spacing:-0.01em;
    color:#fff;
  }
  .trl-colors__desc{
    margin-top:12px;
    font-size:clamp(14px, 2vw, 16px);
    line-height:1.6;
    color:rgba(255,255,255,.60);
  }

  /* ============================================================
     SLIDER
     ============================================================ */
  .trl-colors__slider{
    position:relative;
    z-index:1;
    user-select:none;
    -webkit-user-select:none;
  }
  .trl-colors__viewport{
    overflow:hidden;
    margin:0 56px;
    touch-action:pan-y;
  }
  .trl-colors__track{
    display:flex;
    gap:16px;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }

  /* ============================================================
     COLOR CARD
     ============================================================ */
  .trl-color-card{
    flex:0 0 auto;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-lg);
    overflow:hidden;
    box-shadow:var(--trl-shadow-card);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    /* ширина задаётся через JS */
  }
  .trl-color-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--trl-shadow-soft);
  }

  .trl-color-card__media{
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:var(--trl-surface-muted);
  }
  .trl-color-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .trl-color-card:hover .trl-color-card__media img{
    transform:scale(1.06);
  }

  .trl-color-card__body{
    padding:16px;
  }
  .trl-color-card__name{
    font-size:14px;
    font-weight:500;
    line-height:1.3;
    margin-bottom:4px;
  }
  .trl-color-card__code{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(16px, 2vw, 20px);
    line-height:1.2;
    color:var(--trl-text-primary);
    letter-spacing:-0.01em;
  }
  .trl-color-card__note{
    margin-top:6px;
    font-size:11px;
    line-height:1.4;
    color:var(--trl-text-secondary);
    font-style:italic;
  }

  /* ============================================================
     ARROWS
     ============================================================ */
  .trl-colors__arrow{
    position:absolute;
    top:40%;
    transform:translateY(-50%);
    z-index:2;
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.25);
    color:#fff;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .trl-colors__arrow:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.45);
    transform:translateY(-50%) scale(1.05);
  }
  .trl-colors__arrow:active{
    transform:translateY(-50%) scale(0.95);
  }
  .trl-colors__arrow svg{
    width:18px;
    height:18px;
  }
  .trl-colors__arrow--prev{ left:0; }
  .trl-colors__arrow--next{ right:0; }

  /* ============================================================
     DOTS
     ============================================================ */
  .trl-colors__dots{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    row-gap:6px;
    gap:10px;
    margin-top:32px;
    padding:0 16px;
  }
  .trl-colors__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.25);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
    padding:0;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .trl-colors__dot.is-active{
    background:var(--trl-brand-emerald);
    transform:scale(1.3);
  }
  .trl-colors__dot:hover{
    background:rgba(255,255,255,.5);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1080px){
    .trl-colors__viewport{ margin:0 52px; }
  }

  @media (max-width: 720px){
    .trl-colors{ padding:64px 0; }
    .trl-colors__head{ margin-bottom:36px; }
    .trl-colors__viewport{ margin:0 48px; }
    .trl-colors__arrow{
      width:40px;
      height:40px;
    }
    .trl-colors__arrow svg{
      width:16px;
      height:16px;
    }
    .trl-color-card__body{ padding:14px; }
    .trl-color-card__name{ font-size:13px; }
  }

  @media (max-width: 480px){
    .trl-colors{ padding:56px 0; }
    .trl-colors__viewport{
      margin:0 16px;
      overflow:visible;
    }
    .trl-colors__track{ gap:12px; }
    .trl-colors__arrow{ display:none; }
    .trl-colors__dots{
      margin-top:24px;
      gap:6px;
      row-gap:4px;
    }
    .trl-colors__dot{
      width:7px;
      height:7px;
    }
    .trl-color-card__body{ padding:12px; }
    .trl-color-card__code{ font-size:15px; }
  }

  @media (max-width: 360px){
    .trl-colors__viewport{ margin:0 12px; }
    .trl-colors__track{ gap:10px; }
    .trl-color-card__body{ padding:10px; }
    .trl-color-card__name{ font-size:12px; }
    .trl-color-card__code{ font-size:14px; }
    .trl-color-card__note{ font-size:10px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-colors__track{ transition:none !important; }
    .trl-color-card, .trl-color-card__media img{ transition:none !important; }
  }
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     CALCULATOR SECTION
     ============================================================ */
  .trl-calc{
    position:relative;
    padding:100px 0;
    background:var(--trl-surface-canvas);
    overflow:hidden;
    isolation:isolate;
  }
  .trl-calc__glow{
    position:absolute;
    top:-10%;
    right:-6%;
    width:640px;
    height:640px;
    background:radial-gradient(ellipse at center, rgba(43,182,115,.14) 0%, transparent 65%);
    z-index:0;
    pointer-events:none;
  }

  .trl-calc__head{
    position:relative;
    z-index:1;
    max-width:640px;
    margin:0 auto 48px;
    text-align:center;
  }
  .trl-calc__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(28px, 3.4vw, 42px);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--trl-text-primary);
  }
  .trl-calc__desc{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  .trl-calc__card{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 380px;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-xl);
    box-shadow:var(--trl-shadow-soft);
    overflow:hidden;
    opacity:0;
    transform:translateY(24px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .trl-calc__card.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- FORM ---------- */
  .trl-calc__form{
    padding:44px 40px;
    display:flex;
    flex-direction:column;
    gap:26px;
  }

  .trl-calc__row--split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .trl-calc__label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--trl-text-secondary);
    margin-bottom:10px;
  }

  .trl-calc__toggle{
    display:flex;
    gap:4px;
    padding:4px;
    background:var(--trl-surface-muted);
    border-radius:var(--trl-radius-pill);
  }
  .trl-calc__toggle button{
    flex:1;
    padding:12px 16px;
    border-radius:var(--trl-radius-pill);
    font-family:inherit;
    font-weight:600;
    font-size:14px;
    color:var(--trl-text-secondary);
    transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .trl-calc__toggle button.is-active{
    background:var(--trl-surface-panel);
    color:var(--trl-ink-graphite);
    box-shadow:var(--trl-shadow-card);
  }

  .trl-calc__select-wrap{
    position:relative;
  }
  .trl-calc__select-wrap::after{
    content:"";
    position:absolute;
    right:18px; top:50%;
    width:9px; height:9px;
    border-right:2px solid var(--trl-text-secondary);
    border-bottom:2px solid var(--trl-text-secondary);
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
  }

  .trl-calc__select,
  .trl-calc__input{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    font-family:inherit;
    font-size:14.5px;
    font-weight:500;
    color:var(--trl-text-primary);
    background:var(--trl-surface-muted);
    border:1.5px solid var(--trl-line-steel);
    border-radius:var(--trl-radius-md);
    padding:14px 40px 14px 16px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .trl-calc__input{ padding-right:16px; }
  .trl-calc__select:focus,
  .trl-calc__input:focus{
    outline:none;
    border-color:var(--trl-brand-emerald);
    box-shadow:0 0 0 4px rgba(43,182,115,.14);
  }

  .trl-calc__hint{
    font-size:12.5px;
    line-height:1.5;
    color:var(--trl-text-secondary);
    margin-top:-8px;
  }

  /* ---------- RESULT PANEL ---------- */
  .trl-calc__result{
    position:relative;
    padding:44px 36px 36px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(43,182,115,.22) 0%, rgba(43,182,115,0) 55%),
      linear-gradient(165deg, #101820 0%, #16232c 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
  }

  .trl-calc__result-eyebrow{
    font-family:var(--trl-font-mono);
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
  }

  .trl-calc__result-value{
    font-family:var(--trl-font-display);
    font-weight:800;
    font-size:clamp(30px, 3.4vw, 38px);
    line-height:1.15;
    margin-top:10px;
    letter-spacing:-0.01em;
    color:#fff;
  }
  .trl-calc__result-sub{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:rgba(255,255,255,.6);
  }

  .trl-calc__result-list{
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.14);
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .trl-calc__result-list li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px;
  }
  .trl-calc__result-list li:last-child{ border-bottom:none; }
  .trl-calc__result-list span{ color:rgba(255,255,255,.6); }
  .trl-calc__result-list b{ color:#fff; font-weight:600; text-align:right; }

  .trl-calc__cta{
    margin-top:28px;
    width:100%;
  }

  .trl-calc__disclaimer{
    margin-top:16px;
    font-size:11.5px;
    line-height:1.5;
    color:rgba(255,255,255,.45);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .trl-calc__card{ grid-template-columns:1fr; }
    .trl-calc__result{ order:-1; }
  }

  @media (max-width: 720px){
    .trl-calc{ padding:72px 0; }
    .trl-calc__head{ margin-bottom:36px; }
    .trl-calc__form{ padding:32px 26px; gap:22px; }
    .trl-calc__result{ padding:32px 26px 28px; }
    .trl-calc__row--split{ grid-template-columns:1fr; gap:22px; }
  }

  @media (max-width: 480px){
    .trl-calc__toggle button{ padding:10px 12px; font-size:13px; }
    .trl-calc__result-value{ font-size:28px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-calc__card{ opacity:1 !important; transform:none !important; transition:none !important; }
  }
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     PRICING SECTION — фон идентичен .trl-advantages
     ============================================================ */
  .trl-pricing{
    position:relative;
    padding:80px 0 90px;
    background:
      radial-gradient(120% 140% at 12% 0%, rgba(43,182,115,.16) 0%, rgba(43,182,115,0) 55%),
      linear-gradient(180deg, #E6F6EE 0%, #DDF1E7 100%);
    overflow:hidden;
    isolation:isolate;
  }

  .trl-pricing__texture{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.5;
    background-image:
      linear-gradient(120deg, rgba(31,138,87,.08) 1px, transparent 1px),
      linear-gradient(30deg, rgba(31,138,87,.08) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 75%);
  }

  .trl-pricing__wrap{
    position:relative;
    z-index:1;
  }

  .trl-pricing__head{
    text-align:center;
    max-width:620px;
    margin:0 auto 36px;
  }

  .trl-pricing__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(28px, 3.2vw, 40px);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--trl-text-primary);
  }
  .trl-pricing__desc{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  /* ---------- TOGGLE ---------- */
  .trl-pricing__toggle{
    display:flex;
    gap:4px;
    max-width:420px;
    margin:0 auto 32px;
    padding:4px;
    background:rgba(255,255,255,.6);
    border:1px solid rgba(31,138,87,.14);
    border-radius:var(--trl-radius-pill);
  }
  .trl-pricing__toggle button{
    flex:1;
    padding:12px 16px;
    border-radius:var(--trl-radius-pill);
    font-family:inherit;
    font-weight:600;
    font-size:13.5px;
    color:var(--trl-text-secondary);
    transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .trl-pricing__toggle button.is-active{
    background:var(--trl-surface-panel);
    color:var(--trl-ink-graphite);
    box-shadow:var(--trl-shadow-card);
  }

  /* ---------- PANELS ---------- */
  .trl-pricing__panel{
    display:none;
  }
  .trl-pricing__panel.is-active{
    display:block;
    animation:trlPricingFade .35s ease;
  }
  @keyframes trlPricingFade{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ---------- TABLE ---------- */
  .trl-pricing__table-wrap{
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-xl);
    box-shadow:var(--trl-shadow-soft);
    overflow:hidden;
  }

  .trl-pricing__table{
    width:100%;
    border-collapse:collapse;
  }

  .trl-pricing__table thead th{
    text-align:left;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--trl-text-secondary);
    background:var(--trl-surface-muted);
    padding:18px 24px;
  }
  .trl-pricing__table thead th:last-child{ text-align:right; }

  .trl-pricing__table tbody tr{
    border-bottom:1px solid var(--trl-line-steel);
    transition:background .2s ease;
  }
  .trl-pricing__table tbody tr:last-child{ border-bottom:none; }
  .trl-pricing__table tbody tr:hover{
    background:rgba(43,182,115,.05);
  }

  .trl-pricing__table tbody td{
    padding:18px 24px;
    font-size:14.5px;
    color:var(--trl-text-primary);
    vertical-align:middle;
  }
  .trl-pricing__table tbody td:last-child{ text-align:right; }

  .trl-pricing__row--accent{
    background:rgba(43,182,115,.06);
  }

  .trl-pricing__name{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
  }
  .trl-pricing__badge{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#fff;
    background:var(--trl-gradient-brand);
    padding:4px 9px;
    border-radius:var(--trl-radius-pill);
    white-space:nowrap;
  }

  .trl-pricing__price{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:16px;
    color:var(--trl-brand-emerald-deep);
    white-space:nowrap;
  }

  /* ---------- FOOTER ---------- */
  .trl-pricing__foot{
    margin-top:32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .trl-pricing__note{
    max-width:520px;
    font-size:13px;
    line-height:1.55;
    color:var(--trl-text-secondary);
  }

  /* ============================================================
     RESPONSIVE — таблица → карточки на маленьких экранах
     ============================================================ */
  @media (max-width: 720px){
    .trl-pricing{ padding:64px 0 72px; }
    .trl-pricing__head{ margin-bottom:28px; }
    .trl-pricing__toggle{ max-width:100%; }
  }

  @media (max-width: 600px){
    .trl-pricing__table thead{
      position:absolute;
      width:1px; height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap;
    }

    .trl-pricing__table,
    .trl-pricing__table tbody,
    .trl-pricing__table tr,
    .trl-pricing__table td{
      display:block;
      width:100%;
    }

    .trl-pricing__table-wrap{
      border-radius:var(--trl-radius-lg);
    }

    .trl-pricing__table tbody tr{
      padding:16px 16px 4px;
      border-bottom:1px solid var(--trl-line-steel);
    }

    .trl-pricing__table tbody td{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 4px;
      text-align:right;
      border:none;
    }

    .trl-pricing__table tbody td::before{
      content:attr(data-label);
      font-size:11.5px;
      font-weight:600;
      letter-spacing:.03em;
      text-transform:uppercase;
      color:var(--trl-text-secondary);
      text-align:left;
    }

    .trl-pricing__table tbody td:last-child{
      padding-top:10px;
      padding-bottom:14px;
    }
    .trl-pricing__table tbody td:last-child::before{
      color:var(--trl-text-secondary);
    }

    .trl-pricing__price{ font-size:17px; }

    .trl-pricing__foot{
      flex-direction:column;
      align-items:stretch;
      text-align:center;
    }
    .trl-pricing__foot .trl-btn{
      width:100%;
      justify-content:center;
    }
  }

  @media (max-width: 360px){
    .trl-pricing__table tbody tr{ padding:14px 12px 2px; }
    .trl-pricing__toggle button{ font-size:12.5px; padding:11px 12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-pricing__panel.is-active{ animation:none !important; }
  }
  
  
  
  
  
  
  
  /* ============================================================
     GALLERY SECTION — белый фон
     ============================================================ */
  .trl-gallery{
    padding:100px 0;
    background:var(--trl-surface-panel);
  }

  .trl-gallery__head{
    max-width:640px;
    margin:0 auto 48px;
    text-align:center;
  }
  .trl-gallery__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(28px, 3.4vw, 42px);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--trl-text-primary);
  }
  .trl-gallery__desc{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  /* ---------- SLIDER SHELL ---------- */
  .trl-gallery__slider{
    position:relative;
  }

  .trl-gallery__swiper{
    overflow:hidden;
  }

  /* ---------- CARD — квадрат одинакового размера у всех ---------- */
  .trl-gallery-card__media{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:var(--trl-radius-lg);
    overflow:hidden;
    background:var(--trl-surface-muted);
    box-shadow:var(--trl-shadow-card);
    transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
  }
  .trl-gallery-card:hover .trl-gallery-card__media,
  .trl-gallery-card:focus-within .trl-gallery-card__media,
  .trl-gallery-card__media.is-open{
    transform:translateY(-4px);
    box-shadow:var(--trl-shadow-soft);
  }

  .trl-gallery-card__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .trl-gallery-card:hover .trl-gallery-card__media img,
  .trl-gallery-card__media.is-open img{
    transform:scale(1.06);
  }

  /* затемняющий градиент — база под заголовок, усиливается при hover */
  .trl-gallery-card__scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(16,24,32,0) 55%, rgba(10,16,23,.82) 100%);
    transition:background .3s ease;
  }
  .trl-gallery-card:hover .trl-gallery-card__scrim,
  .trl-gallery-card:focus-within .trl-gallery-card__scrim,
  .trl-gallery-card__media.is-open .trl-gallery-card__scrim{
    background:linear-gradient(180deg, rgba(16,24,32,.05) 0%, rgba(10,16,23,.88) 40%, rgba(6,9,13,.96) 100%);
  }

  /* ---------- INFO BLOCK — заголовок и описание в одном потоке,
       поэтому не могут наложиться друг на друга ---------- */
  .trl-gallery-card__info{
    position:absolute;
    left:18px; right:18px;
    bottom:18px;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .trl-gallery-card__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:15.5px;
    line-height:1.3;
    color:#fff;
    margin:0;
  }

  .trl-gallery-card__desc{
    font-size:12.5px;
    line-height:1.5;
    color:rgba(255,255,255,.85);
    margin:0;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.2,.8,.2,1),
               opacity .3s ease,
               margin-top .35s cubic-bezier(.2,.8,.2,1);
  }
  .trl-gallery-card:hover .trl-gallery-card__desc,
  .trl-gallery-card:focus-within .trl-gallery-card__desc,
  .trl-gallery-card__media.is-open .trl-gallery-card__desc{
    max-height:160px;
    opacity:1;
    margin-top:8px;
  }

  /* ---------- ARROWS — строго по центру картинки ---------- */
  .trl-gallery__arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:48px; height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--trl-surface-panel);
    border:1px solid var(--trl-line-steel);
    color:var(--trl-ink-graphite);
    box-shadow:var(--trl-shadow-card);
    transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .trl-gallery__arrow:hover{
    background:var(--trl-gradient-brand);
    border-color:transparent;
    color:#fff;
    box-shadow:var(--trl-shadow-btn);
    transform:translateY(-50%) scale(1.05);
  }
  .trl-gallery__arrow:active{
    transform:translateY(-50%) scale(.95);
  }
  .trl-gallery__arrow.swiper-button-disabled{
    opacity:.35;
    pointer-events:none;
  }
  .trl-gallery__arrow svg{
    width:19px; height:19px;
  }
  .trl-gallery__arrow--prev{ left:-24px; }
  .trl-gallery__arrow--next{ right:-24px; }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1240px){
    .trl-gallery__arrow--prev{ left:-6px; }
    .trl-gallery__arrow--next{ right:-6px; }
  }

  @media (max-width: 980px){
    .trl-gallery__arrow{ display:none; }
  }

  @media (max-width: 720px){
    .trl-gallery{ padding:72px 0; }
    .trl-gallery__head{ margin-bottom:32px; }
    .trl-gallery-card__title{ font-size:14.5px; }
    .trl-gallery-card__desc{ font-size:12px; }
  }

  @media (max-width: 480px){
    .trl-gallery{ padding:60px 0; }
    .trl-gallery-card__info{ left:14px; right:14px; bottom:14px; }
  }

  @media (max-width: 360px){
    .trl-gallery-card__title{ font-size:13.5px; }
    .trl-gallery-card__desc{ font-size:11.5px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-gallery-card__media,
    .trl-gallery-card__media img,
    .trl-gallery-card__scrim,
    .trl-gallery-card__desc,
    .trl-gallery__arrow{
      transition:none !important;
    }
  }
  
  
  
  
  
  
  
  
  /* ============================================================
     TEAM SECTION — фон и структура идентичны .trl-colors
     ============================================================ */
  .trl-team{
    position:relative;
    padding:80px 0;
    background:linear-gradient(165deg, #0b141a 0%, #13242f 50%, #0b141a 100%);
    overflow:hidden;
    isolation:isolate;
  }
  .trl-team__glow{
    position:absolute;
    top:-25%;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:700px;
    background:radial-gradient(ellipse at center, rgba(43,182,115,.12) 0%, transparent 65%);
    pointer-events:none;
    z-index:0;
  }

  .trl-team__head{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:640px;
    margin:0 auto 44px;
    padding:0 16px;
  }

  .trl-team__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(24px, 5vw, 42px);
    line-height:1.12;
    letter-spacing:-0.01em;
    color:#fff;
  }
  .trl-team__desc{
    margin-top:12px;
    font-size:clamp(14px, 2vw, 16px);
    line-height:1.6;
    color:rgba(255,255,255,.60);
  }

  /* ============================================================
     SLIDER
     ============================================================ */
  .trl-team__slider{
    position:relative;
    z-index:1;
    user-select:none;
    -webkit-user-select:none;
  }
  .trl-team__viewport{
    overflow:hidden;
    margin:0 56px;
    touch-action:pan-y;
  }
  .trl-team__track{
    display:flex;
    gap:16px;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }

  /* ============================================================
     TEAM CARD
     ============================================================ */
  .trl-team-card{
    flex:0 0 auto;
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-lg);
    overflow:hidden;
    box-shadow:var(--trl-shadow-card);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    /* ширина задаётся через JS */
  }
  .trl-team-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--trl-shadow-soft);
  }

  .trl-team-card__media{
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--trl-surface-muted);
  }
  .trl-team-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .trl-team-card:hover .trl-team-card__media img{
    transform:scale(1.06);
  }

  .trl-team-card__body{
    padding:18px 16px;
  }
  .trl-team-card__name{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:16px;
    line-height:1.3;
    color:var(--trl-text-primary);
    margin-bottom:4px;
  }
  .trl-team-card__role{
    font-size:13px;
    font-weight:500;
    color:var(--trl-brand-emerald-deep);
    line-height:1.35;
  }
  .trl-team-card__note{
    margin-top:8px;
    font-size:12px;
    line-height:1.45;
    color:var(--trl-text-secondary);
  }

  /* ============================================================
     ARROWS
     ============================================================ */
  .trl-team__arrow{
    position:absolute;
    top:40%;
    transform:translateY(-50%);
    z-index:2;
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.25);
    color:#fff;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .trl-team__arrow:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.45);
    transform:translateY(-50%) scale(1.05);
  }
  .trl-team__arrow:active{
    transform:translateY(-50%) scale(0.95);
  }
  .trl-team__arrow svg{
    width:18px;
    height:18px;
  }
  .trl-team__arrow--prev{ left:0; }
  .trl-team__arrow--next{ right:0; }

  /* ============================================================
     DOTS
     ============================================================ */
  .trl-team__dots{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    row-gap:6px;
    gap:10px;
    margin-top:32px;
    padding:0 16px;
  }
  .trl-team__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.25);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
    padding:0;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .trl-team__dot.is-active{
    background:var(--trl-brand-emerald);
    transform:scale(1.3);
  }
  .trl-team__dot:hover{
    background:rgba(255,255,255,.5);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1080px){
    .trl-team__viewport{ margin:0 52px; }
  }

  @media (max-width: 720px){
    .trl-team{ padding:64px 0; }
    .trl-team__head{ margin-bottom:36px; }
    .trl-team__viewport{ margin:0 48px; }
    .trl-team__arrow{
      width:40px;
      height:40px;
    }
    .trl-team__arrow svg{
      width:16px;
      height:16px;
    }
    .trl-team-card__body{ padding:14px 14px 16px; }
    .trl-team-card__name{ font-size:14.5px; }
  }

  @media (max-width: 480px){
    .trl-team{ padding:56px 0; }
    .trl-team__viewport{
      margin:0 16px;
      overflow:visible;
    }
    .trl-team__track{ gap:12px; }
    .trl-team__arrow{ display:none; }
    .trl-team__dots{
      margin-top:24px;
      gap:6px;
      row-gap:4px;
    }
    .trl-team__dot{
      width:7px;
      height:7px;
    }
    .trl-team-card__body{ padding:12px; }
    .trl-team-card__name{ font-size:14px; }
    .trl-team-card__role{ font-size:12px; }
    .trl-team-card__note{ font-size:11px; }
  }

  @media (max-width: 360px){
    .trl-team__viewport{ margin:0 12px; }
    .trl-team__track{ gap:10px; }
    .trl-team-card__body{ padding:10px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-team__track{ transition:none !important; }
    .trl-team-card, .trl-team-card__media img{ transition:none !important; }
  }
  
  
  
  
  
  
  
  
  
  /* ============================================================
     REVIEWS SECTION — белый фон, мозаичная сетка
     ============================================================ */
  .trl-reviews{
    padding:100px 0;
    background:var(--trl-surface-panel);
  }

  .trl-reviews__head{
    max-width:640px;
    margin:0 auto 48px;
    text-align:center;
  }
  .trl-reviews__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(28px, 3.4vw, 42px);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--trl-text-primary);
  }
  .trl-reviews__desc{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  /* ---------- MOSAIC ROWS — разные пропорции ширины ---------- */
  .trl-reviews__row{
    display:grid;
    gap:20px;
    margin-bottom:20px;
  }
  .trl-reviews__row:last-child{ margin-bottom:0; }

  .trl-reviews__row--1{ grid-template-columns: 25fr 35fr 40fr; }
  .trl-reviews__row--2{ grid-template-columns: 30fr 45fr 25fr; }
  .trl-reviews__row--3{ grid-template-columns: 45fr 25fr 30fr; }

  /* ---------- CARD ---------- */
  .trl-review-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--trl-surface-muted);
    border:1px solid var(--trl-line-steel);
    border-radius:var(--trl-radius-lg);
    padding:30px 26px 24px;
    overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  .trl-review-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--trl-shadow-soft);
    border-color:transparent;
    background:var(--trl-surface-panel);
  }

  .trl-review-card__quote{
    position:absolute;
    top:6px; right:20px;
    font-family:var(--trl-font-display);
    font-weight:800;
    font-size:76px;
    line-height:1;
    color:rgba(43,182,115,.14);
    pointer-events:none;
    user-select:none;
  }

  .trl-review-card__stars{
    position:relative;
    z-index:1;
    display:flex;
    gap:3px;
    margin-bottom:14px;
  }
  .trl-review-card__stars svg{
    width:16px; height:16px;
    color:var(--trl-brand-emerald);
    flex-shrink:0;
  }
  .trl-review-card__stars svg.is-empty{
    color:var(--trl-line-steel);
  }

  .trl-review-card__text{
    position:relative;
    z-index:1;
    font-size:14.5px;
    line-height:1.62;
    color:var(--trl-text-primary);
    flex:1;
  }

  .trl-review-card__author{
    position:relative;
    z-index:1;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--trl-line-steel);
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .trl-review-card__name{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:14.5px;
    color:var(--trl-text-primary);
  }
  .trl-review-card__loc{
    font-size:12.5px;
    color:var(--trl-text-secondary);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .trl-reviews__row--1,
    .trl-reviews__row--2,
    .trl-reviews__row--3{
      grid-template-columns: 1fr 1fr;
    }
    .trl-reviews__row--1 .trl-review-card:nth-child(3),
    .trl-reviews__row--2 .trl-review-card:nth-child(3),
    .trl-reviews__row--3 .trl-review-card:nth-child(3){
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 720px){
    .trl-reviews{ padding:72px 0; }
    .trl-reviews__head{ margin-bottom:32px; }
    .trl-reviews__row--1,
    .trl-reviews__row--2,
    .trl-reviews__row--3{
      grid-template-columns: 1fr;
      gap:16px;
      margin-bottom:16px;
    }
    .trl-reviews__row--1 .trl-review-card:nth-child(3),
    .trl-reviews__row--2 .trl-review-card:nth-child(3),
    .trl-reviews__row--3 .trl-review-card:nth-child(3){
      grid-column:auto;
    }
    .trl-review-card{ padding:24px 20px 20px; }
    .trl-review-card__quote{ font-size:60px; top:4px; right:16px; }
  }

  @media (max-width: 480px){
    .trl-reviews{ padding:60px 0; }
    .trl-review-card{ padding:22px 18px 18px; border-radius:var(--trl-radius-md); }
    .trl-review-card__text{ font-size:14px; }
    .trl-review-card__quote{ font-size:52px; }
    .trl-review-card__stars svg{ width:14px; height:14px; }
  }

  @media (max-width: 360px){
    .trl-review-card{ padding:18px 16px 16px; }
    .trl-review-card__name{ font-size:14px; }
    .trl-review-card__loc{ font-size:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-review-card{ transition:none !important; }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     FAQ SECTION — фон идентичен .trl-pricing
     ============================================================ */
  .trl-faq{
    position:relative;
    padding:80px 0 90px;
    background:
      radial-gradient(120% 140% at 12% 0%, rgba(43,182,115,.16) 0%, rgba(43,182,115,0) 55%),
      linear-gradient(180deg, #E6F6EE 0%, #DDF1E7 100%);
    overflow:hidden;
    isolation:isolate;
  }

  .trl-faq__texture{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.5;
    background-image:
      linear-gradient(120deg, rgba(31,138,87,.08) 1px, transparent 1px),
      linear-gradient(30deg, rgba(31,138,87,.08) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 75%);
  }

  .trl-faq__wrap{
    position:relative;
    z-index:1;
  }

  .trl-faq__head{
    text-align:center;
    max-width:620px;
    margin:0 auto 44px;
  }
  .trl-faq__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(28px, 3.2vw, 40px);
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--trl-text-primary);
  }
  .trl-faq__desc{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  /* ---------- TWO INDEPENDENT COLUMNS (flex, не grid) ---------- */
  .trl-faq__columns{
    display:flex;
    align-items:flex-start;
    gap:24px;
  }
  .trl-faq__column{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* ---------- ACCORDION ITEM ---------- */
  .trl-faq-item{
    background:var(--trl-surface-panel);
    border-radius:var(--trl-radius-md);
    box-shadow:var(--trl-shadow-card);
    overflow:hidden;
    transition:box-shadow .25s ease;
  }
  .trl-faq-item.is-open{
    box-shadow:var(--trl-shadow-soft);
  }

  .trl-faq-item__head{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    text-align:left;
    font-family:inherit;
  }

  .trl-faq-item__q{
    font-size:14.5px;
    font-weight:600;
    line-height:1.4;
    color:var(--trl-text-primary);
  }

  .trl-faq-item__icon{
    position:relative;
    flex:0 0 auto;
    width:26px; height:26px;
    border-radius:50%;
    background:var(--trl-surface-muted);
    transition:background .25s ease, transform .25s ease;
  }
  .trl-faq-item__icon::before,
  .trl-faq-item__icon::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    background:var(--trl-ink-graphite);
    transition:background .25s ease, transform .25s ease;
  }
  .trl-faq-item__icon::before{
    width:10px; height:2px;
    transform:translate(-50%,-50%);
  }
  .trl-faq-item__icon::after{
    width:2px; height:10px;
    transform:translate(-50%,-50%);
  }
  .trl-faq-item.is-open .trl-faq-item__icon{
    background:var(--trl-gradient-brand);
  }
  .trl-faq-item.is-open .trl-faq-item__icon::before,
  .trl-faq-item.is-open .trl-faq-item__icon::after{
    background:#fff;
  }
  .trl-faq-item.is-open .trl-faq-item__icon::after{
    transform:translate(-50%,-50%) rotate(90deg) scaleY(0);
  }

  .trl-faq-item__panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.2,.8,.2,1);
  }
  .trl-faq-item__a{
    padding:0 20px 20px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--trl-text-secondary);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 900px){
    .trl-faq__columns{
      flex-direction:column;
    }
  }

  @media (max-width: 720px){
    .trl-faq{ padding:64px 0 72px; }
    .trl-faq__head{ margin-bottom:32px; }
    .trl-faq__columns{ gap:14px; }
    .trl-faq__column{ gap:12px; }
    .trl-faq-item__head{ padding:16px 16px; gap:12px; }
    .trl-faq-item__q{ font-size:14px; }
    .trl-faq-item__a{ padding:0 16px 16px; font-size:13px; }
  }

  @media (max-width: 480px){
    .trl-faq-item__icon{ width:22px; height:22px; }
    .trl-faq-item__icon::before{ width:8px; }
    .trl-faq-item__icon::after{ height:8px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-faq-item,
    .trl-faq-item__icon,
    .trl-faq-item__icon::before,
    .trl-faq-item__icon::after,
    .trl-faq-item__panel{
      transition:none !important;
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     CTA SECTION — белый фон, акцентная карточка с градиентом
     ============================================================ */
  .trl-cta{
    padding:100px 0;
    background:var(--trl-surface-panel);
  }

  .trl-cta__card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-radius:var(--trl-radius-xl);
    background:var(--trl-gradient-brand);
    padding:64px 48px;
    text-align:center;
    box-shadow:var(--trl-shadow-soft);
    opacity:0;
    transform:translateY(24px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .trl-cta__card.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  .trl-cta__glow{
    position:absolute;
    z-index:0;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    filter:blur(2px);
    pointer-events:none;
  }
  .trl-cta__glow--a{ width:340px; height:340px; top:-140px; left:-80px; }
  .trl-cta__glow--b{ width:260px; height:260px; bottom:-120px; right:-60px; background:rgba(255,255,255,.10); }

  .trl-cta__content{
    position:relative;
    z-index:1;
    max-width:640px;
    margin:0 auto;
  }

  .trl-cta__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--trl-font-mono);
    font-size:12.5px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.3);
    padding:8px 16px 8px 12px;
    border-radius:var(--trl-radius-pill);
    margin-bottom:24px;
  }
  .trl-cta__eyebrow-dot{
    width:7px; height:7px; border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,255,255,.28);
  }

  .trl-cta__title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(26px, 3.4vw, 40px);
    line-height:1.18;
    letter-spacing:-0.01em;
    color:#fff;
  }

  .trl-cta__desc{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.6;
    color:rgba(255,255,255,.82);
  }

  .trl-cta__actions{
    margin-top:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }

  .trl-btn--onbrand{
    background:#fff;
    color:var(--trl-brand-emerald-deep);
    box-shadow:0 14px 30px -12px rgba(6,9,13,.35);
  }
  .trl-btn--onbrand:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 38px -12px rgba(6,9,13,.45);
  }

  .trl-btn--ghost-onbrand{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.5);
  }
  .trl-btn--ghost-onbrand:hover{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.8);
    transform:translateY(-2px);
  }

  @media (max-width: 720px){
    .trl-cta{ padding:72px 0; }
    .trl-cta__card{ padding:48px 28px; border-radius:var(--trl-radius-lg); }
    .trl-cta__actions{ flex-direction:column; align-items:stretch; }
    .trl-cta__actions .trl-btn{ width:100%; justify-content:center; }
  }

  @media (max-width: 480px){
    .trl-cta{ padding:56px 0; }
    .trl-cta__card{ padding:40px 22px; }
    .trl-cta__eyebrow{ font-size:11px; padding:7px 14px 7px 10px; margin-bottom:18px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trl-cta__card{ opacity:1 !important; transform:none !important; transition:none !important; }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ============================================================
     FOOTER — тёмный фон, идентичен .trl-colors / .trl-team
     ============================================================ */
  .trl-footer{
    position:relative;
    padding:80px 0 0;
    background:linear-gradient(165deg, #0b141a 0%, #13242f 50%, #0b141a 100%);
    overflow:hidden;
    isolation:isolate;
  }
  .trl-footer__glow{
    position:absolute;
    top:-20%;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:600px;
    background:radial-gradient(ellipse at center, rgba(43,182,115,.14) 0%, transparent 65%);
    pointer-events:none;
    z-index:0;
  }

  .trl-footer__wrap{
    position:relative;
    z-index:1;
  }

  /* ---------- ВЕРХНИЙ ПРИЗЫВАЮЩИЙ БЛОК ---------- */
  .trl-footer__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
    padding-bottom:56px;
    margin-bottom:56px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .trl-footer__top-text{ max-width:520px; }
  .trl-footer__top-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--trl-font-mono);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
    margin-bottom:14px;
  }
  .trl-footer__top-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--trl-brand-emerald);
    box-shadow:0 0 0 4px rgba(43,182,115,.25);
  }
  .trl-footer__top-title{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:clamp(22px, 2.6vw, 30px);
    line-height:1.25;
    letter-spacing:-0.01em;
    color:#fff;
  }
  .trl-footer__top .trl-btn{ flex-shrink:0; }

  /* ---------- ОСНОВНАЯ СЕТКА ---------- */
  .trl-footer__grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.1fr;
    gap:32px;
    padding-bottom:48px;
  }

  .trl-footer__brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:17px;
    color:#fff;
    margin-bottom:16px;
  }
  .trl-footer__brand-mark{
    width:34px; height:34px;
    border-radius:10px;
    background:var(--trl-gradient-brand);
    position:relative;
    flex-shrink:0;
  }
  .trl-footer__brand-mark::before,
  .trl-footer__brand-mark::after{
    content:"";
    position:absolute;
    left:8px; right:8px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.92);
  }
  .trl-footer__brand-mark::before{ top:11px; }
  .trl-footer__brand-mark::after{ top:19px; background:rgba(255,255,255,.55); }

  .trl-footer__about{
    font-size:13.5px;
    line-height:1.65;
    color:rgba(255,255,255,.55);
    max-width:280px;
  }

  .trl-footer__messengers{
    display:flex;
    gap:10px;
    margin-top:22px;
  }
  .trl-footer__messenger{
    width:40px; height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .trl-footer__messenger:hover{
    background:var(--trl-gradient-brand);
    border-color:transparent;
    transform:translateY(-3px);
  }
  .trl-footer__messenger svg{ width:18px; height:18px; }

  .trl-footer__heading{
    font-family:var(--trl-font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    margin-bottom:20px;
  }

  .trl-footer__links{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .trl-footer__links a{
    font-size:14.5px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    transition:color .2s ease;
  }
  .trl-footer__links a:hover{ color:#fff; }

  .trl-footer__contacts{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .trl-footer__contact-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
  .trl-footer__contact-icon{
    flex:0 0 auto;
    width:36px; height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(43,182,115,.14);
    color:var(--trl-brand-emerald);
    margin-top:2px;
  }
  .trl-footer__contact-icon svg{ width:17px; height:17px; }
  .trl-footer__contact-text{ display:flex; flex-direction:column; gap:2px; }
  .trl-footer__contact-text a{
    font-size:14.5px;
    font-weight:600;
    color:#fff;
    text-decoration:none;
  }
  .trl-footer__contact-text span{
    font-size:13px;
    line-height:1.5;
    color:rgba(255,255,255,.55);
  }

  /* ---------- НИЖНЯЯ ПОЛОСА ---------- */
  .trl-footer__bottom{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .trl-footer__copy{
    font-size:12.5px;
    color:rgba(255,255,255,.45);
  }
  .trl-footer__legal{
    display:flex;
    gap:20px;
    list-style:none;
    margin:0; padding:0;
  }
  .trl-footer__legal a{
    font-size:12.5px;
    color:rgba(255,255,255,.45);
    text-decoration:none;
    transition:color .2s ease;
  }
  .trl-footer__legal a:hover{ color:rgba(255,255,255,.8); }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px){
    .trl-footer__grid{
      grid-template-columns:1fr 1fr;
      row-gap:40px;
    }
    .trl-footer__brand-col{ grid-column:1 / -1; }
  }

  @media (max-width: 720px){
    .trl-color-card__media {
      height:180px
    }
   .trl-hero__desc{
      display: none;
    }
    .trl-footer{ padding-top:64px; }
    .trl-footer__top{
      flex-direction:column;
      align-items:flex-start;
      padding-bottom:40px;
      margin-bottom:40px;
    }
    .trl-footer__top .trl-btn{ width:100%; justify-content:center; }
    .trl-footer__grid{ padding-bottom:36px; gap:28px; }
  }

  @media (max-width: 560px){
    .trl-footer__grid{
      grid-template-columns:1fr;
      gap:32px;
    }
    .trl-footer__brand-col{ grid-column:auto; }
    .trl-footer__bottom{
      flex-direction:column;
      text-align:center;
      gap:12px;
    }
    .trl-footer__legal{ justify-content:center; flex-wrap:wrap; row-gap:8px; }
  }

  @media (max-width: 360px){
    .trl-footer__top-title{ font-size:20px; }
    .trl-footer__messengers{ gap:8px; }
    .trl-footer__messenger{ width:36px; height:36px; }
  }
  html{
  scroll-behavior:smooth;
  background:linear-gradient(165deg, #0b141a 0%, #13242f 50%, #0b141a 100%);
}
body.trl-body{
  background:var(--trl-surface-canvas);
  font-family:var(--trl-font-body);
  color:var(--trl-text-primary);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.trl-body > footer.trl-footer{
  margin-top:auto;
}


.trl-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.trl-logo img {
  width: 60px;
  height: auto;
}

.trl-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.trl-logo-text strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
}

.trl-logo-text small {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.trl-logo-text small + small {
  margin-top: 3px;
}

/* ============================================================
   ТЕРМАЛИТ
   SEO-блок: современный минималистичный дизайн
   ============================================================ */

   .trl-seo-showcase {
    position: relative !important;
    overflow: hidden !important;
    padding: 96px 0 86px !important;
    background: #caeddb !important;
    color: #18221e !important;
  }
  
  .trl-seo-showcase *,
  .trl-seo-showcase *::before,
  .trl-seo-showcase *::after {
    box-sizing: border-box;
  }
  
  .trl-seo-showcase__inner {
    max-width: var(--trl-container);
    margin: 0 auto;
    padding: 0 32px;
  }
  
  
  /* ============================================================
     HEADER
     ============================================================ */
  
  .trl-seo-showcase__header {
    max-width: 920px;
    margin: 0 0px 52px;
  }
  
  .trl-seo-showcase__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
  
    color: #26845a !important;
  
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  
  .trl-seo-showcase__eyebrow span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35b477;
    box-shadow: 0 0 0 5px rgba(53,180,119,.11);
  }
  
  .trl-seo-showcase__header h2 {
    max-width: 900px;
  
    margin: 0 0 20px !important;
  
    color: #18221e !important;
  
    font-size: clamp(34px, 4.2vw, 58px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }
  
  .trl-seo-showcase__lead {
    max-width: 790px;
  
    margin: 0 !important;
  
    color: #68756f !important;
  
    font-size: 17px !important;
    font-weight: 400;
    line-height: 1.68 !important;
  }
  
  
  /* ============================================================
     CARDS
     ============================================================ */
  
  .trl-seo-showcase__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  
  .trl-seo-showcase__card {
    position: relative;
  
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 22px;
  
    min-height: 235px;
  
    padding: 30px 32px;
  
    border: 1px solid rgba(24,34,30,.075);
    border-radius: 24px;
  
    background: #fff !important;
    color: #18221e !important;
  
    box-shadow:
      0 2px 3px rgba(24,34,30,.015),
      0 16px 45px rgba(24,34,30,.055);
  
    transition:
      transform .25s ease,
      box-shadow .25s ease,
      border-color .25s ease;
  }
  
  .trl-seo-showcase__card:hover {
    transform: translateY(-3px);
  
    border-color: rgba(38,132,90,.16);
  
    box-shadow:
      0 3px 5px rgba(24,34,30,.02),
      0 22px 55px rgba(24,34,30,.085);
  }
  
  .trl-seo-showcase__card-number {
    display: grid;
  
    width: 42px;
    height: 42px;
  
    place-items: center;
  
    border-radius: 13px;
  
    background: #e9f7ef !important;
    color: #277a55 !important;
  
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
  }
  
  .trl-seo-showcase__card-content {
    min-width: 0;
  }
  
  .trl-seo-showcase__card h3 {
    margin: 2px 0 12px !important;
  
    color: #18221e !important;
  
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -.025em !important;
  }
  
  .trl-seo-showcase__card p {
    max-width: 690px;
  
    margin: 0 !important;
  
    color: #68756f !important;
  
    font-size: 14px !important;
    line-height: 1.68 !important;
  }
  
  
  /* ============================================================
     PRICE CARD
     ============================================================ */
  
  .trl-seo-showcase__card--price {
    background:
      linear-gradient(135deg, #ffffff 0%, #f1faf5 100%) !important;
  }
  
  .trl-seo-showcase__card--price::after {
    content: "";
  
    position: absolute;
  
    width: 170px;
    height: 170px;
  
    right: -105px;
    bottom: -110px;
  
    border-radius: 50%;
  
    background: rgba(116,207,153,.13);
  
    pointer-events: none;
  }
  
  .trl-seo-showcase__price-link {
    position: relative;
    z-index: 2;
  
    display: inline-flex;
    align-items: center;
    gap: 10px;
  
    margin-top: 18px;
    padding: 11px 14px;
  
    border-radius: 11px;
  
    background: #1f9b67;
  
    color: #fff !important;
  
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  
    text-decoration: none;
  
    transition:
      background .2s ease,
      transform .2s ease;
  }
  
  .trl-seo-showcase__price-link:hover {
    transform: translateY(-2px);
  
    background: #167d51;
  
    color: #fff !important;
  }
  
  .trl-seo-showcase__price-link span {
    font-size: 16px;
    line-height: 1;
  }
  
  
  /* ============================================================
     ФОТОЛЕНТА
     Маленькие фотографии только как иллюстрация.
     ============================================================ */
  
  .trl-seo-showcase__photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
  
    margin-top: 18px;
  }
  
  .trl-seo-showcase__photo {
    position: relative;
  
    height: 112px;
  
    overflow: hidden;
  
    border-radius: 15px;
  
    background: #e4eae6;
  }
  
  .trl-seo-showcase__photo img {
    display: block;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    opacity: .94;
  
    transition:
      transform .45s ease,
      opacity .45s ease;
  }
  
  .trl-seo-showcase__photo:hover img {
    transform: scale(1.035);
    opacity: 1;
  }
  
  
  /* ============================================================
     TABLET
     ============================================================ */
  
  @media (max-width: 800px) {
  
    .trl-seo-showcase {
      padding: 76px 0 70px !important;
    }
  
    .trl-seo-showcase__header {
      margin-bottom: 38px;
    }
  
    .trl-seo-showcase__cards {
      grid-template-columns: 1fr;
    }
  
    .trl-seo-showcase__card {
      min-height: auto;
    }
  
    .trl-seo-showcase__photos {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .trl-seo-showcase__photo {
      height: 100px;
    }
  }
  
  
  /* ============================================================
     MOBILE
     ============================================================ */
  
  @media (max-width: 560px) {
  
    .trl-seo-showcase {
      padding: 58px 0 54px !important;
    }
  
    .trl-seo-showcase__inner {
      width: calc(100% - 30px);
    }
  
    .trl-seo-showcase__header {
      margin-bottom: 30px;
    }
  
    .trl-seo-showcase__header h2 {
      font-size: clamp(30px, 9vw, 42px) !important;
      line-height: 1.03 !important;
    }
  
    .trl-seo-showcase__lead {
      font-size: 14px !important;
      line-height: 1.6 !important;
    }
  
    .trl-seo-showcase__card {
      grid-template-columns: 40px minmax(0, 1fr);
  
      gap: 15px;
  
      padding: 23px 20px;
  
      border-radius: 20px;
    }
  
    .trl-seo-showcase__card-number {
      width: 38px;
      height: 38px;
    }
  
    .trl-seo-showcase__card h3 {
      font-size: 20px !important;
    }
  
    .trl-seo-showcase__card p {
      font-size: 14px !important;
      line-height: 1.62 !important;
    }
  
    .trl-seo-showcase__photos {
      gap: 5px;
      margin-top: 14px;
    }
  
    .trl-seo-showcase__photo {
      height: 64px;
      border-radius: 9px;
    }
  }
  
  
  /* ============================================================
     REDUCED MOTION
     ============================================================ */
  
  @media (prefers-reduced-motion: reduce) {
  
    .trl-seo-showcase__card,
    .trl-seo-showcase__photo img,
    .trl-seo-showcase__price-link {
      transition: none;
    }
  }