@import url('button-states.css?v=1');

/* Responsive hardening: keep all sections inside the viewport without relying on clipping alone. */
html,body{max-width:100%;overflow-x:clip}
body{min-width:0}
.shell,.header__bar,.hero__content,.section-head,.tech-panel,.sources,.dashboard,.direction-card,.direction-card__copy,.direction-card__visual,.timing-grid,.process-grid,.faq,.contact-card,.footer-grid,.footer-bottom,.modal,.mobile-menu{min-width:0;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
button,input,textarea,select{min-width:0;max-width:100%}
h1,h2,h3,h4,p,a,span,strong,label{overflow-wrap:anywhere}

/* Desktop hero: use the exact vertical rhythm from Figma instead of loose centering. */
@media(min-width:901px){
  .hero{padding-top:188px!important}
  .hero__content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .hero .eyebrow,.hero h1,.hero p,.hero__actions{margin:0!important}
  .hero__content{gap:32px}
  .hero__actions{display:flex;justify-content:center;align-items:center}
}

@media(max-width:1200px){
  .shell{width:calc(100% - 40px)}
  .header__bar{width:calc(100% - 40px)}
  .header__nav{gap:16px}
  .tech-panel{grid-template-columns:1fr 1fr}
  .source-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
}

@media(max-width:900px){
  .shell{width:calc(100% - 32px)}
  .header{top:16px}
  .header__bar{width:calc(100% - 32px);height:64px;padding:0 14px 0 16px;border-radius:18px;display:flex!important;position:relative!important}
  .header__bar>.brand{position:static!important;width:auto!important;height:auto!important;flex:0 1 auto!important;font-size:15px!important}
  .header__bar>.brand img{width:34px!important;height:42px!important;flex:0 0 34px!important}
  .header__nav,.header__phone,.header__cta{display:none!important}
  .header__actions{position:static!important;width:auto!important;height:auto!important;margin-left:auto!important;gap:8px!important}
  .menu-toggle{display:grid!important;place-items:center;width:40px;height:40px;flex:0 0 40px}

  .hero{height:auto;min-height:720px;padding:154px 0 96px}
  .hero__content{width:calc(100% - 32px)}
  .hero h1{font-size:clamp(46px,8vw,60px);line-height:1.06;letter-spacing:-.04em}
  .hero p{font-size:17px;line-height:1.6}
  .desktop-break{display:none}
  .hero__actions{flex-wrap:wrap}
  .hero__actions .button{width:min(252px,100%)}
  .orb--blue{left:-360px}.orb--pink{right:-350px}

  .companies{height:auto;padding:56px 0 72px}
  .company-logos{height:auto;max-width:760px;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}
  .company-logos img{height:72px;padding:15px}

  .section{padding:88px 0}
  .section-head{width:100%;margin-bottom:42px;padding:0 4px}
  .section-head h2{font-size:clamp(36px,6vw,46px);line-height:1.18}
  .section-head p{font-size:16px;line-height:1.6}

  .directions{min-height:0;padding-top:96px}
  .direction-tabs{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
  .direction-tabs::-webkit-scrollbar{display:none}
  .direction-tabs button{flex:0 0 auto}
  .direction-card{height:auto;grid-template-columns:1fr;max-width:100%}
  .direction-card__copy{padding:44px 36px}
  .direction-card__visual{height:360px}

  .tech{padding-top:72px}
  .tech-panel{grid-template-columns:1fr;gap:20px;padding:20px}
  .sources{padding:10px 0 0}
  .source-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard{width:100%}

  .timing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:720px!important}
  .timing-grid article{width:100%!important}
  .timing-grid article:last-child{grid-column:1/-1;max-width:340px;justify-self:center}
  .timing-grid h3,.timing-grid p{width:100%!important}

  .faq{width:100%!important}
  .faq-question span{min-width:0;max-width:calc(100% - 54px)!important}

  .contact-card,[data-theme="dark"] .contact-card{width:min(640px,calc(100% - 32px))!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .footer-bottom{gap:20px;flex-wrap:wrap}
}

@media(max-width:700px){
  .shell{width:calc(100% - 28px)}
  .header__bar{width:calc(100% - 24px);padding:0 12px}
  .brand{min-width:0}
  .brand span{white-space:nowrap}

  .mobile-menu{box-sizing:border-box;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
  .mobile-menu__head,.mobile-menu nav{min-width:0}

  .hero{min-height:650px;padding:138px 0 80px}
  .hero__content{width:calc(100% - 28px)}
  .eyebrow{max-width:100%;padding:10px 24px;white-space:normal;text-align:center}
  .hero h1{margin-top:24px;font-size:clamp(40px,12vw,54px);line-height:1.04}
  .hero p{font-size:16px;line-height:1.55}
  .hero__actions{width:100%;margin-top:28px;gap:12px}
  .hero__actions .button{width:100%;max-width:360px}

  .companies{padding:50px 0 60px}
  .companies__title{font-size:20px;line-height:1.35}
  .companies__copy{font-size:14px;line-height:1.55}
  .company-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-top:28px}
  .company-logos img{width:100%;height:64px;padding:12px}

  .section{padding:72px 0}
  .section-head{margin-bottom:36px}
  .section-head h2,.faq-section .section-head h2,.timing .section-head h2{font-size:clamp(32px,9vw,38px)!important;line-height:1.18!important}
  .section-head p,.timing .section-head p{font-size:15px!important;line-height:1.6!important}

  .direction-card__copy{padding:34px 24px}
  .direction-card h3{font-size:26px}
  .direction-card__visual{height:260px}

  .tech-panel{padding:14px;border-radius:18px}
  .sources>h3{font-size:22px;line-height:1.3}
  .source-list{grid-template-columns:1fr;gap:10px}
  .source-list article{padding:16px}
  .system-merge{padding:16px}
  .dashboard{padding:16px}
  .dashboard__head{gap:8px;align-items:flex-start}
  .dashboard__head span{text-align:right}
  .stages{grid-template-columns:1fr}
  .activity>p{align-items:flex-start}
  .report{align-items:flex-start}

  .timing{padding:72px 0 88px!important}
  .timing__haze{width:150vw!important;max-width:none!important;left:50%}
  .timing-grid{grid-template-columns:1fr!important;max-width:340px!important;width:100%;margin-top:44px!important}
  .timing-grid article,.timing-grid article:last-child{grid-column:auto;max-width:100%;width:100%!important;min-width:0}

  .process{padding-top:88px}
  .process-grid{grid-template-columns:1fr;gap:42px}

  .faq-section{padding:72px 0 88px!important}
  .faq-question{gap:12px!important}
  .faq-question span{max-width:calc(100% - 48px)!important}
  .faq-answer p{width:100%!important;padding-right:0!important}

  .contact{height:auto;min-height:940px}
  [data-theme="dark"] .contact{height:auto;min-height:1080px}
  .contact__photo,[data-theme="dark"] .contact__photo{height:360px}
  .contact-card,[data-theme="dark"] .contact-card{top:260px!important;left:14px!important;right:14px!important;transform:none!important;width:auto!important;height:auto!important;min-height:0;padding:28px 20px!important;border-radius:20px!important}
  .contact-card h2,[data-theme="dark"] .contact-card h2{font-size:30px!important;line-height:1.2!important}
  .form__row,[data-theme="dark"] .contact-card .form__row{grid-template-columns:1fr;gap:14px}
  .form input,.form textarea,.modal input{font-size:16px}

  .footer{padding-left:0;padding-right:0}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer .footer-logo{margin-left:0!important}
  .footer-bottom{display:flex;flex-direction:column;align-items:flex-start}
  .footer-legal{display:flex!important;flex-direction:column;gap:10px;min-width:0}
  .footer-legal>p,.developer-credit{white-space:normal!important;max-width:100%}

  .modal-backdrop{padding:12px}
  .modal{width:100%;max-height:calc(100dvh - 24px);overflow-y:auto;padding:22px 18px}
  .modal h2{font-size:24px;line-height:1.25}
  .contact-methods{grid-template-columns:1fr}

  .telegram-float{right:14px!important}
}

@media(max-width:430px){
  .shell{width:calc(100% - 24px)}
  .hero__content{width:calc(100% - 24px)}
  .hero h1{font-size:clamp(38px,11.5vw,48px)}
  .company-logos img{height:58px;padding:10px}
  .direction-tabs{margin-left:0;margin-right:0}
  .direction-card__copy{padding:30px 20px}
  .direction-card__visual{height:230px}
  .dashboard__head{flex-direction:column}
  .dashboard__head span{text-align:left}
  .contact-card,[data-theme="dark"] .contact-card{left:12px!important;right:12px!important;padding:24px 16px!important}
}

@media(max-width:360px){
  .shell{width:calc(100% - 20px)}
  .header__bar{width:calc(100% - 16px)}
  .header__bar>.brand{gap:7px!important;font-size:14px!important}
  .header__bar>.brand img{width:30px!important;height:38px!important;flex-basis:30px!important}
  .hero__content{width:calc(100% - 20px)}
  .hero h1{font-size:38px}
  .hero p{font-size:15px}
  .company-logos{gap:10px 6px}
  .company-logos img{height:54px;padding:8px}
  .section-head h2,.faq-section .section-head h2,.timing .section-head h2{font-size:30px!important}
  .direction-card__copy{padding:26px 16px}
  .tech-panel{padding:10px}
  .dashboard{padding:14px}
  .faq-question{font-size:16px!important;line-height:1.45!important}
  .contact-card,[data-theme="dark"] .contact-card{left:10px!important;right:10px!important;padding:22px 14px!important}
  .developer-credit{display:flex;flex-wrap:wrap}
}

/* Mobile header + menu — matched to Figma 3767:12553 / 3774:12581 and dark equivalents. */
@media(max-width:700px){
  .header{top:14px!important}
  .header__bar{
    width:calc(100% - 32px)!important;
    height:64px!important;
    padding:0 20px 0 16px!important;
    border:1px solid #e4e8f1!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 6px 20px rgba(13,32,94,.04)!important;
    backdrop-filter:none!important;
  }
  [data-theme="dark"] .header__bar{
    border-color:#2b3750!important;
    background:#141d2e!important;
    box-shadow:0 6px 20px rgba(0,0,0,.20)!important;
  }
  .header__bar>.brand{
    gap:2px!important;
    height:48px!important;
    font-size:16px!important;
    line-height:24px!important;
    font-weight:700!important;
    color:#121d48!important;
  }
  [data-theme="dark"] .header__bar>.brand{color:#edf2ff!important}
  .header__bar>.brand img{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    max-width:none!important;
  }
  .header__actions{margin-left:auto!important}
  .menu-toggle{
    position:relative!important;
    display:block!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    flex:0 0 24px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#66789f!important;
    font-size:0!important;
    line-height:0!important;
  }
  [data-theme="dark"] .menu-toggle{color:#91a0bd!important}
  .menu-toggle::before{
    content:"";
    position:absolute;
    left:3px;
    top:6px;
    width:18px;
    height:12px;
    background:
      linear-gradient(currentColor,currentColor) 0 0/18px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) 0 5.25px/18px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) 0 10.5px/18px 1.5px no-repeat;
  }

  .mobile-menu{
    display:block!important;
    position:fixed!important;
    z-index:80!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    width:min(390px,100vw)!important;
    max-width:100vw!important;
    height:510px!important;
    padding:0!important;
    border-radius:24px!important;
    background:#fcfdfe!important;
    overflow:hidden!important;
    transform:translate(-50%,-8px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease!important;
  }
  [data-theme="dark"] .mobile-menu{background:#141d2e!important}
  .mobile-menu.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate(-50%,0)!important;
  }
  .mobile-menu__head{
    position:absolute!important;
    left:24px!important;
    right:24px!important;
    top:16px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  .mobile-menu__head .brand{
    gap:2px!important;
    height:48px!important;
    font-size:16px!important;
    line-height:24px!important;
    font-weight:700!important;
    color:#121d48!important;
  }
  [data-theme="dark"] .mobile-menu__head .brand{color:#edf2ff!important}
  .mobile-menu__head .brand img{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    max-width:none!important;
  }
  .mobile-menu__head .icon-button{
    position:absolute!important;
    right:0!important;
    top:12px!important;
    width:24px!important;
    height:24px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#121d48!important;
    font-size:0!important;
    line-height:0!important;
  }
  [data-theme="dark"] .mobile-menu__head .icon-button{color:#91a0bd!important}
  .mobile-menu__head .icon-button::before,
  .mobile-menu__head .icon-button::after{
    content:"";
    position:absolute;
    left:11px;
    top:2px;
    width:1.5px;
    height:20px;
    border-radius:2px;
    background:currentColor;
  }
  .mobile-menu__head .icon-button::before{transform:rotate(45deg)}
  .mobile-menu__head .icon-button::after{transform:rotate(-45deg)}

  .mobile-menu nav{
    position:absolute!important;
    left:24px!important;
    top:76px!important;
    width:calc(100% - 48px)!important;
    height:280px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  .mobile-menu nav a{
    width:100%!important;
    height:56px!important;
    min-height:56px!important;
    display:flex!important;
    align-items:center!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#121d48!important;
    text-decoration:none!important;
    font-size:18px!important;
    line-height:25px!important;
    font-weight:500!important;
  }
  [data-theme="dark"] .mobile-menu nav a{color:#edf2ff!important}

  .mobile-menu>.button{
    position:absolute!important;
    left:24px!important;
    top:396px!important;
    width:calc(100% - 48px)!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 20px!important;
    border:0!important;
    border-radius:14px!important;
    background:#121d48!important;
    color:#fff!important;
    box-shadow:none!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:600!important;
    gap:10px!important;
  }
  [data-theme="dark"] .mobile-menu>.button{background:#027dfd!important;color:#fff!important}
  .mobile-menu>.button span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:18px!important;
    height:18px!important;
    font-size:18px!important;
    line-height:18px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu{transition:none!important}
}

/* Mobile hero — exact Figma 3767:12572 / 3788:12606 at 390px. */
@media(max-width:700px){
  .hero{
    height:610px!important;
    min-height:610px!important;
    padding:124px 24px 0!important;
    overflow:visible!important;
  }
  .hero__content{
    width:min(342px,100%)!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
  }
  .hero .eyebrow{
    width:246px!important;
    min-width:246px!important;
    height:38px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:19px!important;
    background:#f5f8fd!important;
    color:#027dfd!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:500!important;
    white-space:nowrap!important;
  }
  .hero h1{
    width:342px!important;
    max-width:100%!important;
    height:106px!important;
    margin:26px 0 0!important;
    color:#121d48!important;
    font-size:38px!important;
    line-height:53px!important;
    letter-spacing:0!important;
    font-weight:700!important;
  }
  .hero p{
    width:342px!important;
    max-width:100%!important;
    min-height:88px!important;
    margin:20px 0 0!important;
    color:#66789f!important;
    font-size:16px!important;
    line-height:22px!important;
    font-weight:400!important;
  }
  .hero__actions{
    width:342px!important;
    max-width:100%!important;
    height:116px!important;
    margin:28px 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }
  .hero__actions .button{
    width:342px!important;
    max-width:100%!important;
    height:52px!important;
    min-height:52px!important;
    padding:0!important;
    border-radius:14px!important;
    gap:10px!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:600!important;
  }
  .hero__actions .button--dark{
    border:0!important;
    background:#121d48!important;
    color:#fff!important;
  }
  .hero__actions .button--ghost{
    border:1px solid #dde3ee!important;
    background:#fff!important;
    color:#121d48!important;
  }
  [data-theme="dark"] .hero .eyebrow{background:#1c2840!important;color:#027dfd!important}
  [data-theme="dark"] .hero h1{color:#edf2ff!important}
  [data-theme="dark"] .hero p{color:#a2b1cf!important}
  [data-theme="dark"] .hero__actions .button--dark{background:#027dfd!important;color:#fff!important}
  [data-theme="dark"] .hero__actions .button--ghost{border-color:#2b3750!important;background:#141d2e!important;color:#edf2ff!important}
}

@media(max-width:360px){
  .hero{height:auto!important;min-height:590px!important;padding-left:20px!important;padding-right:20px!important}
  .hero__content,.hero h1,.hero p,.hero__actions,.hero__actions .button{width:100%!important}
  .hero h1{height:auto!important;font-size:36px!important;line-height:48px!important}
  .hero p{min-height:0!important}
}


/* Responsive composition — Figma mobile 390 light (3767:12550) and dark (3788:12582).
   Fixed pixel composition applies only to the 390px target; other sizes stay fluid. */
@media (max-width:700px){
  .header{
    position:relative!important;
    top:auto!important;
    height:92px!important;
    padding:0!important;
  }
  .header__bar{
    position:absolute!important;
    top:14px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  .hero{
    height:518px!important;
    min-height:0!important;
    padding:32px 24px 0!important;
    overflow:hidden!important;
  }
  .hero__content{gap:0!important}
  .hero .eyebrow{margin:0!important}
  .hero h1{
    height:106px!important;
    margin:26px 0 0!important;
  }
  .hero p{
    min-height:44px!important;
    margin:42px 0 0!important;
  }
  .hero__actions{
    height:116px!important;
    margin:50px 0 0!important;
  }
  .companies{
    height:auto!important;
    min-height:436px;
    padding:44px 24px 32px!important;
    overflow:visible!important;
  }
  .directions,.tech,.timing,.process,.faq-section,.footer{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .directions{padding:56px 0 72px!important}
  .tech{padding:56px 0 64px!important}
  .timing{padding:56px 0 64px!important}
  .process{padding:64px 0!important}
  .faq-section{padding:56px 0 72px!important}
  .contact{
    min-height:0!important;
    height:auto!important;
    padding:282px 20px 48px!important;
  }
  .contact-card,[data-theme="dark"] .contact-card{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:min(100%,342px)!important;
    margin:0 auto!important;
    transform:none!important;
  }
  .contact-card.reveal,.contact-card.reveal.is-visible{transform:none!important}
  .footer{padding:44px 0 24px!important}
}
@media (min-width:701px) and (max-width:900px){
  .header{top:16px!important}
  .hero{
    min-height:640px!important;
    height:auto!important;
    padding:144px 0 84px!important;
  }
  .hero__content{width:min(620px,calc(100% - 48px))!important}
  .hero__actions{display:flex!important;flex-direction:row!important;justify-content:center!important}
  .hero__actions .button{width:252px!important}
  .company-logos{width:min(640px,calc(100% - 48px))!important}
  .directions,.tech,.timing,.process,.faq-section{height:auto!important;min-height:0!important}
  .tech-panel{width:min(680px,calc(100% - 48px))!important;margin:0 auto!important}
  .contact{height:auto!important;min-height:0!important;padding:360px 24px 64px!important}
  .contact-card{position:relative!important;top:auto!important;left:auto!important;transform:none!important;margin:auto!important}
  .contact-card.reveal,.contact-card.reveal.is-visible{transform:none!important}
}
@media (max-width:360px){
  .header{height:88px!important}
  .hero{
    height:auto!important;
    min-height:534px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .hero h1{height:auto!important;min-height:96px;margin-top:24px!important;font-size:36px!important;line-height:48px!important}
  .hero p{min-height:0!important;margin-top:28px!important}
  .hero__actions{height:auto!important;margin-top:34px!important}
}