/* =========================
   TwoBoat Public UI (clean)
   ========================= */

   :root{
    --bg:#ffffff;
    --ink:#0e1b2a;
    --muted:#5b6b7c;
  
    --navy:#1f3159;
    --navy2:#0b2545;
  
    --yellow:#ffc627;
    --line: rgba(11,37,69,.12);
  
    --glass: rgba(255,255,255,.78);
  
    --radius: 18px;
    --max: 1120px;
  
    --shadow-sm: 0 1px 0 rgba(11,37,69,.05);
    --shadow: 0 12px 30px rgba(11,37,69,.12);
  }
  
  /* Base reset */
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body.pub{
    margin:0;
    color:var(--ink);
    background:
      radial-gradient(900px 520px at 12% 0%, rgba(255,198,39,.16), transparent 62%),
      radial-gradient(900px 520px at 88% 8%, rgba(31,49,89,.14), transparent 60%),
      var(--bg);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }
  
  a{ color:inherit; }
  img{ max-width:100%; height:auto; display:block; }
  
  .pub-wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }
  .pub-main{ padding: 22px 0 44px; }
  
  /* =========================
     Topbar
     ========================= */
  
  .pub-topbar{
    position:sticky;
    top:0;
    z-index:9999;
    border-bottom:1px solid rgba(11,37,69,.08);
    background: var(--glass);
    backdrop-filter: saturate(180%) blur(14px);
  }
  
  .pub-topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 0;
    min-width:0;
  }
  
  /* Logo (wordmark) */
  .brand{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:54px;
    padding:10px 12px;
    border-radius:14px;
    text-decoration:none;
    overflow:hidden;
    max-width: 260px;
    transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
  }
  .brand__img{
    height:34px;
    width:auto;
    max-width:240px;
    object-fit:contain;
    transform-origin:left center;
    transition: transform .16s ease, filter .16s ease;
  }
  .brand:hover{
    background: rgba(31,49,89,.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11,37,69,.12);
  }
  .brand:hover .brand__img{
    transform: scale(1.03);
    filter: drop-shadow(0 10px 14px rgba(11,37,69,.12));
  }
  
  /* Desktop nav */
  .pub-nav{
    display:flex;
    align-items:center;
    gap:10px;
    color: var(--muted);
    min-width:0;
  }
  
  .nav-link{
    position:relative;
    text-decoration:none;
    font-weight:800;
    padding:10px 12px;
    border-radius:14px;
    transition: background .14s ease, color .14s ease, transform .14s ease;
  }
  .nav-link:hover{
    background: rgba(31,49,89,.06);
    color: var(--ink);
    transform: translateY(-1px);
  }
  .nav-link::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:7px;
    height:2px;
    border-radius:999px;
    background: linear-gradient(90deg,
      rgba(255,198,39,0),
      rgba(255,198,39,.95),
      rgba(255,198,39,0)
    );
    opacity:0;
    transform: scaleX(.65);
    transition: opacity .16s ease, transform .16s ease;
  }
  .nav-link:hover::after{
    opacity:1;
    transform: scaleX(1);
  }
  
  /* Actions */
  .pub-actions{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  
  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font-weight:850;
    text-decoration:none;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
    white-space:nowrap;
  }
  .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(11,37,69,.12);
  }
  .btn:active{ transform: translateY(0); }
  
  .btn-soft{
    background: rgba(255,255,255,.92);
  }
  .btn-primary{
    border-color: rgba(255,198,39,.70);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
    position:relative;
  }
  .btn-primary::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:14px;
    padding:1px;
    background: linear-gradient(180deg, rgba(255,198,39,.85), rgba(31,49,89,.18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
  }
  
  /* =========================
     Mobile drawer (checkbox)
     ========================= */
  
  .menu-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  
  .menu-btn{
    display:none;
    width:44px;
    height:42px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow: var(--shadow-sm);
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .14s ease;
  }
  .menu-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(11,37,69,.12);
  }
  .menu-btn span{
    display:block;
    width:18px;
    height:2px;
    border-radius:999px;
    background: var(--ink);
    opacity:.9;
    transition: transform .16s ease, opacity .16s ease;
  }
  
  /* Drawer container */
  .pub-drawer{
    display:none;
    border-bottom:1px solid rgba(11,37,69,.08);
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(14px);
  }
  
  /* Collapsible height */
  .pub-drawer{
    max-height:0;
    overflow:hidden;
    transition:max-height .18s ease;
  }
  
  .pub-drawer-inner{
    padding: 14px 0 16px;
    display:grid;
    gap:14px;
  }
  
  .pub-drawer-links{
    display:grid;
    gap:10px;
  }
  .drawer-link{
    text-decoration:none;
    font-weight:900;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid rgba(11,37,69,.10);
    background:#fff;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .14s ease;
  }
  .drawer-link:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(11,37,69,.12);
  }
  .pub-drawer-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* Toggle open state: input + label + drawer */
  #pubMenuToggle:checked ~ .menu-btn span:nth-child(2){ opacity:0; }
  #pubMenuToggle:checked ~ .menu-btn span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  #pubMenuToggle:checked ~ .menu-btn span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  #pubMenuToggle:checked ~ .pub-drawer{ max-height: 520px; }

  
  /* =========================
     Footer
     ========================= */
  
  .pub-footer{
    border-top:1px solid rgba(11,37,69,.08);
    color: var(--muted);
    padding: 18px 0 28px;
  }
  .pub-footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .pub-foot-links{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .pub-foot-links a{
    color:inherit;
    text-decoration:none;
  }
  .pub-foot-links a:hover{ text-decoration: underline; }
  .pub-foot-links .dot{ opacity:.7; }
  
  /* =========================
     Landing blocks
     ========================= */
  
  .pub-hero{ padding: 26px 0 10px; }
  .pub-hero-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:22px;
    align-items:start;
  }
  .pub-hero-copy,
  .pub-hero-media{ min-width:0; }
  
  .pub-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(11,37,69,.10);
    background: rgba(31,49,89,.06);
    color: var(--navy);
    font-weight:900;
  }
  .pub-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background: var(--yellow);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.15);
  }
  
  .pub-h1{
    margin:14px 0 10px;
    font-size: clamp(34px, 4.1vw, 52px);
    letter-spacing:-.6px;
    line-height:1.05;
  }
  .pub-sub{
    margin:0;
    max-width:62ch;
    color: var(--muted);
    font-weight:650;
  }
  .pub-cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
  }
  .pub-trust{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:14px;
    color: var(--muted);
    font-weight:650;
  }
  
  .pub-note{
    margin-top:14px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px;
    border-radius:18px;
    background: rgba(255,198,39,.16);
    border:1px solid rgba(255,198,39,.35);
    color:#1F3159;
    font-weight:750;
  }
  .pub-note-ic{
    width:34px;
    height:34px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background: linear-gradient(180deg, rgba(255,198,39,.95), rgba(255,198,39,.70));
    border:1px solid rgba(255,198,39,.55);
    color:#6A4A00;
    font-weight:950;
    flex:0 0 auto;
  }
  
  /* Sections / cards */
  .pub-section{ padding: 26px 0; }
  .pub-h2{
    margin:0 0 8px;
    font-size: clamp(24px, 2.2vw, 34px);
    letter-spacing:-.4px;
  }
  .pub-lead{
    margin:0;
    color: var(--muted);
    max-width:72ch;
    font-weight:650;
  }
  
  .pub-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:14px;
  }
  .pub-card{
    display:block;
    text-decoration:none;
    border-radius: var(--radius);
    background:#fff;
    border:1px solid rgba(11,37,69,.10);
    box-shadow: var(--shadow-sm);
    padding:18px;
    transition: transform .12s ease, box-shadow .14s ease;
  }
  .pub-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(11,37,69,.14);
  }
  .pub-card h3{ margin:0 0 6px; }
  .pub-card p{ margin:0; color: var(--muted); font-weight:650; }
  
  /* Video */
  .pub-video-card{
    border-radius: var(--radius);
    border:1px solid rgba(11,37,69,.10);
    background: rgba(255,255,255,.70);
    box-shadow: var(--shadow);
    padding:12px;
  }
  .pub-video-frame{
    border-radius:18px;
    overflow:hidden;
    background:#000;
    border:1px solid rgba(11,37,69,.10);
    aspect-ratio: 9/16;
    max-width: 440px;
    margin:0 auto;
  }
  .pub-video-frame video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .pub-video-caption{
    margin-top:10px;
    text-align:center;
    color: var(--muted);
    font-weight:650;
    font-size:14px;
  }
  
  /* CTA section */
  .pub-section--cta{ padding: 16px 0 54px; }
  .pub-cta-box{
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(31,49,89,.10), rgba(31,49,89,.03));
    border:1px solid rgba(11,37,69,.10);
    box-shadow: var(--shadow);
    padding:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }
  .pub-cta-box h3{ margin:0 0 6px; font-size:22px; }
  .pub-cta-box p{ margin:0; color: var(--muted); font-weight:650; }
  .pub-cta-row{ display:flex; gap:10px; flex-wrap:wrap; }
  
  /* =========================
     Responsive
     ========================= */
  
  @media (max-width: 920px){
    .pub-nav{ display:none; }
    .menu-btn{ display:flex; }
    .pub-drawer{ display:block; }
  
    .pub-hero-grid{ grid-template-columns: 1fr; }
    .pub-grid{ grid-template-columns: 1fr; }
  
    .pub-actions{ gap:8px; }
    .btn{ padding: 10px 12px; }
  }
  
  @media (max-width: 520px){
    .pub-topbar-inner{ padding: 12px 0; }
    .brand{ height:50px; padding: 9px 10px; }
    .brand__img{ height:32px; max-width: 220px; }
  }
  

  /* =========================
   COMPAT: stari layout classovi
   ========================= */

/* staro .wrap -> isto kao pub-wrap */
.wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* staro .section -> isto kao pub-section */
  .section{ padding: 26px 0; }
  
  /* staro .lead -> isto kao pub-lead */
  .lead{
    margin: 0;
    color: var(--muted);
    max-width: 72ch;
    font-weight: 650;
  }
  
  /* staro .lp wrapper da ne razvali pozadinu */
  .lp{ width:100%; }
  
  /* staro .grid-2 i .grid-3 fallback */
  .grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .grid-3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
  }
  
  /* responsivno kao landing */
  @media (max-width: 920px){
    .grid-2{ grid-template-columns: 1fr; }
    .grid-3{ grid-template-columns: 1fr; }
  }
  

  /* Ako company footer radi kaos, stavi ga u isti max-width */
footer .wrap,
#company-footer .wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}