/* ============================================================
   RoIntelliA — IT hospitality landing + Breaking_Intell blog
   Extends style.css tokens. Hospitality accent: gold + dusk.
   ============================================================ */

/* ---------- IT LANDING ---------- */
.it-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);padding:140px 0 90px}
.it-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 80% 20%,rgba(197,160,89,.12),transparent 60%),
             radial-gradient(ellipse 50% 60% at 15% 85%,rgba(255,77,46,.06),transparent 60%);
  pointer-events:none}
.it-hero .wrap{position:relative;z-index:2}
.it-kicker{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.it-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);animation:pulse 2.4s ease-in-out infinite}
.it-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.it-hero h1 .gold{color:var(--gold);font-style:italic}
.it-hero .lead{margin-top:28px;max-width:52ch;color:var(--mist);font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.65;font-family:var(--display)}
.it-hero .segments{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap}
.it-hero .segments span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);border:1px solid rgba(197,160,89,.4);padding:8px 14px;border-radius:30px}

/* showcase: CSS-built hotel mockup in a browser frame */
.showcase{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.showcase-copy h2{font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.06}
.showcase-copy p{margin-top:20px;color:var(--mist);max-width:44ch;line-height:1.7}
.browser{border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--ink-soft);box-shadow:0 50px 100px -40px rgba(0,0,0,.75);transform:rotate(-1deg);transition:transform .6s var(--ease)}
.browser:hover{transform:rotate(0)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--graphite);opacity:.5}
.browser-bar i:nth-child(1){background:#ff5f57;opacity:.9}
.browser-bar i:nth-child(2){background:#febc2e;opacity:.9}
.browser-bar i:nth-child(3){background:#28c840;opacity:.9}
.browser-bar .url{margin-left:10px;font-family:var(--mono);font-size:.62rem;color:var(--graphite);background:rgba(199,205,214,.06);padding:5px 12px;border-radius:5px;flex:1}
/* mini hotel site inside */
.mock{background:linear-gradient(180deg,#141a26,#0d1119)}
.mock-hero{position:relative;height:190px;overflow:hidden;
  background:linear-gradient(135deg,#1a2438 0%,#2a3550 45%,#8a6d3f 100%)}
.mock-hero::after{content:"";position:absolute;right:-30px;bottom:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(197,160,89,.55),rgba(197,160,89,0) 65%)}
.mock-hero .m-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.mock-hero .m-logo{font-family:var(--serif);font-style:italic;color:#fff;font-size:.9rem}
.mock-hero .m-links{display:flex;gap:12px}
.mock-hero .m-links i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.mock-hero .m-title{padding:26px 18px 0}
.mock-hero .m-title b{display:block;font-family:var(--serif);font-weight:400;color:#fff;font-size:1.25rem;line-height:1.2}
.mock-hero .m-title s{display:inline-block;text-decoration:none;margin-top:10px;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;color:rgba(255,255,255,.75);text-transform:uppercase}
.mock-book{display:flex;gap:8px;padding:14px 18px;background:rgba(10,14,20,.5);backdrop-filter:blur(4px)}
.mock-book i{flex:1;height:30px;border-radius:5px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}
.mock-book u{flex:0 0 84px;height:30px;border-radius:5px;background:var(--gold);display:grid;place-items:center;text-decoration:none;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;color:#1a1408;text-transform:uppercase;font-weight:600}
.mock-rooms{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:16px 18px}
.mock-rooms figure{border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.mock-rooms .ph{height:52px}
.mock-rooms figure:nth-child(1) .ph{background:linear-gradient(135deg,#3d4a63,#8a6d3f)}
.mock-rooms figure:nth-child(2) .ph{background:linear-gradient(135deg,#2c3b57,#5d7290)}
.mock-rooms figure:nth-child(3) .ph{background:linear-gradient(135deg,#514062,#8a6d3f)}
.mock-rooms figcaption{padding:8px}
.mock-rooms figcaption i{display:block;height:5px;border-radius:3px;background:rgba(199,205,214,.25);margin-bottom:5px}
.mock-rooms figcaption i:last-child{width:60%}
.mock-badge{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(197,160,89,.5);padding:5px 9px;border-radius:20px;background:rgba(10,14,20,.55)}

/* why-custom trio */
.it-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.it-trio .t{background:var(--ink);padding:36px 30px;transition:background .4s var(--ease)}
.it-trio .t:hover{background:var(--ink-soft)}
.it-trio .t .no{font-family:var(--mono);font-size:.7rem;color:var(--gold);display:block;margin-bottom:22px}
.it-trio .t h3{font-size:1.22rem;margin-bottom:12px}
.it-trio .t p{color:var(--mist);font-size:.93rem;line-height:1.6}

/* segments band */
.seg-band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.seg{border:1px solid var(--line-strong);border-radius:6px;padding:26px 22px;transition:all .35s var(--ease);position:relative;overflow:hidden}
.seg::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.seg:hover{transform:translateY(-4px);border-color:rgba(197,160,89,.5)}
.seg:hover::before{transform:scaleX(1)}
.seg .s-ico{font-size:1.4rem;margin-bottom:14px;display:block}
.seg h4{font-size:1.05rem;margin-bottom:8px}
.seg p{color:var(--mist);font-size:.85rem;line-height:1.55}

/* CTA italian */
.it-cta{padding:clamp(90px,13vw,160px) 0;text-align:center;position:relative;overflow:hidden}
.it-cta .glow-gold{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80vw;height:80vw;max-width:800px;max-height:800px;background:radial-gradient(circle,rgba(197,160,89,.12),transparent 60%);pointer-events:none}
.it-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5.5vw,4rem);letter-spacing:-.02em;max-width:22ch;margin:0 auto;line-height:1.12}
.btn-gold{background:var(--gold);color:#1a1408}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(197,160,89,.55)}

/* ---------- BLOG: Breaking_Intell ---------- */
.blog-hero{padding:170px 0 60px;border-bottom:1px solid var(--line)}
.blog-hero .b-brand{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:18px}
.blog-hero h1{font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:-.04em;line-height:1}
.blog-hero p{margin-top:20px;color:var(--mist);max-width:56ch;font-size:1.05rem}
.blog-filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.blog-filters a{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 15px;border:1px solid var(--line-strong);border-radius:20px;color:var(--mist);transition:all .3s var(--ease)}
.blog-filters a:hover,.blog-filters a.on{border-color:var(--signal);color:var(--signal)}

/* lead story */
.lead-story{display:block;padding:54px 0;border-bottom:1px solid var(--line-strong);transition:padding-left .4s var(--ease)}
.lead-story:hover{padding-left:14px}
.lead-story .ls-meta{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.prio{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:3px}
.prio.signal{color:var(--signal);border:1px solid rgba(255,77,46,.45)}
.prio.cobalt{color:var(--cobalt-soft);border:1px solid rgba(43,91,255,.45)}
.prio.context{color:var(--graphite);border:1px solid var(--line-strong)}
.lead-story h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1.12;max-width:26ch;transition:color .3s}
.lead-story:hover h2{color:#fff}
.lead-story .deck{margin-top:16px;color:var(--mist);max-width:64ch;font-size:1.02rem;line-height:1.6}
.lead-story .go{margin-top:22px;display:inline-flex;align-items:center;gap:10px;color:var(--signal);font-weight:600;font-size:.9rem}

/* wire list */
.wire{display:flex;flex-direction:column}
.wire-item{display:grid;grid-template-columns:150px 1fr auto;gap:26px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.wire-item:hover{padding-left:12px}
.wire-item .w-meta{display:flex;flex-direction:column;gap:8px}
.wire-item .w-date{font-family:var(--mono);font-size:.64rem;color:var(--graphite);letter-spacing:.1em}
.wire-item h3{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.25;font-weight:600;transition:color .3s}
.wire-item:hover h3{color:#fff}
.wire-item .w-deck{margin-top:8px;color:var(--mist);font-size:.9rem;max-width:60ch}
.wire-item .w-go{color:var(--graphite);transition:all .3s var(--ease);font-size:1.1rem}
.wire-item:hover .w-go{color:var(--signal);transform:translate(3px,-3px)}

/* ---------- ARTICLE ---------- */
.art-head{padding:170px 0 50px;border-bottom:1px solid var(--line)}
.art-head .a-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.art-head .a-meta .m{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.art-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5.5vw,3.8rem);line-height:1.1;max-width:24ch}
.art-head .a-deck{margin-top:22px;color:var(--mist);font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:56ch;line-height:1.6}

.art-body{max-width:760px;margin:0 auto;padding:56px var(--gut) 30px}
.bluf{border:1px solid rgba(255,77,46,.4);border-left:3px solid var(--signal);border-radius:4px;padding:26px 28px;margin-bottom:48px;background:rgba(255,77,46,.03)}
.bluf .bluf-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:16px}
.bluf ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.bluf li{display:flex;gap:12px;font-size:.96rem;color:var(--bone);line-height:1.55}
.bluf li::before{content:"—";color:var(--signal);flex:none}
.art-body h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:52px 0 18px;line-height:1.15}
.art-body h2 .h-no{font-family:var(--mono);font-size:.68rem;color:var(--graphite);display:block;margin-bottom:8px;letter-spacing:.14em}
.art-body p{color:var(--mist);line-height:1.8;margin-bottom:20px;font-size:1rem}
.art-body strong{color:var(--bone)}
.pullquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--cobalt-soft);line-height:1.35;border-left:2px solid var(--cobalt);padding:6px 0 6px 26px;margin:40px 0}
.art-cta{border:1px solid var(--line-strong);border-radius:6px;padding:30px;margin:52px 0 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink-soft)}
.art-cta p{margin:0;color:var(--mist);max-width:44ch}
.related{max-width:760px;margin:0 auto;padding:30px var(--gut) 90px}
.related h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);font-weight:500;margin-bottom:22px}
.related a{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);color:var(--mist);transition:color .3s}
.related a:hover{color:var(--bone)}
.related a span{font-family:var(--mono);font-size:.6rem;color:var(--graphite);flex:none}

@media(max-width:900px){
  .showcase{grid-template-columns:1fr;gap:44px}
  .it-trio{grid-template-columns:1fr}
  .seg-band{grid-template-columns:1fr 1fr}
  .wire-item{grid-template-columns:1fr;gap:8px}
  .wire-item .w-go{display:none}
}
@media(max-width:560px){
  .seg-band{grid-template-columns:1fr}
  .browser{transform:none}
  .mock-rooms{grid-template-columns:1fr 1fr}
  .mock-rooms figure:nth-child(3){display:none}
}
@media(hover:none) and (pointer:coarse){
  .lead-story:hover,.wire-item:hover{padding-left:0}
  .seg:hover,.browser:hover{transform:none}
}
