:root{
    --bg:#F6F7F9;
    --ink:#0E1A2B;
    --accent:#00B8A9;
    --accent-2:#FF8A3D;
    --blue:#4A6FA5;
    --violet:#6C63FF;
    --line:#D8DEE6;
    --paper:#FFFFFF;
    --muted:#5B6B7D;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    font-size:16.5px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.02em;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  :focus-visible{outline:2.5px solid var(--accent); outline-offset:3px;}

  /* NAV */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(246,247,249,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px;}
  .logo img{height:22px; width:auto; display:block;}
  .nav-links{display:flex; gap:26px; font-size:15.5px; font-weight:500; color:var(--muted);}
  .nav-links a:hover{color:var(--ink);}
  .nav-right{display:flex; align-items:center; gap:14px;}
  .nav-cta{
    background:var(--ink); color:#fff; padding:10px 20px; border-radius:6px;
    font-size:15.5px; font-weight:600;
  }
  .nav-toggle{
    display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--line);
    background:var(--paper); align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-toggle svg{width:20px; height:20px; stroke:var(--ink); stroke-width:2;}
  @media (max-width:840px){
    .nav-links{display:none;}
    .nav-toggle{display:flex;}
  }
  .mobile-menu{
    display:none; flex-direction:column; gap:2px; border-bottom:1px solid var(--line);
    background:var(--paper); padding:8px 0 14px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    padding:12px 32px; font-size:16px; font-weight:500; color:var(--ink); border-radius:8px;
  }
  .mobile-menu a:active{background:var(--bg);}
  .mobile-menu .nav-cta{margin:8px 32px 0; text-align:center;}

  /* HERO */
  .hero{
    background:var(--ink); color:#fff; position:relative; overflow:hidden;
    padding:110px 0 90px;
  }
  .hero .wrap{position:relative; z-index:2;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.12em;
    color:var(--accent); text-transform:uppercase; margin-bottom:20px; display:block;
  }
  .hero h1{
    font-size:clamp(38px,5.4vw,68px); font-weight:700; line-height:1.12; max-width:780px; margin-bottom:24px;
  }
  .hero h1 em{font-style:normal; color:var(--accent);}
  .hero p{font-size:19.5px; color:#B9C2CE; max-width:520px; margin-bottom:40px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--accent); color:var(--ink); padding:14px 26px; border-radius:6px;
    font-weight:700; font-size:16.5px; transition:transform .15s ease, box-shadow .15s ease;
    display:inline-block;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,184,169,0.35);}
  .btn-ghost{
    border:1px solid rgba(255,255,255,0.25); color:#fff; padding:14px 26px; border-radius:6px;
    font-weight:600; font-size:16.5px;
  }
  .btn-ghost:hover{border-color:rgba(255,255,255,0.55);}

  /* NETWORK SVG BACKDROP */
  .network-bg{
    position:absolute; top:0; right:-6%; width:64%; height:100%; z-index:1; opacity:0.9;
  }
  @media (max-width:900px){ .network-bg{opacity:0.35; width:100%; right:0;} }
  .node{fill:var(--accent);}
  .node-dim{fill:#4A6FA5;}
  .edge{stroke:rgba(0,184,169,0.35); stroke-width:1; fill:none;}
  .edge-pulse{
    stroke:var(--accent); stroke-width:1.6; fill:none;
    stroke-dasharray:6 240; animation:travel 3.6s linear infinite;
  }
  .edge-pulse.d1{animation-delay:0s;}
  .edge-pulse.d2{animation-delay:1s;}
  .edge-pulse.d3{animation-delay:2s;}
  .edge-pulse.d4{animation-delay:0.6s;}
  .edge-pulse.d5{animation-delay:1.8s;}
  @keyframes travel{
    from{stroke-dashoffset:0;}
    to{stroke-dashoffset:-320;}
  }
  @media (prefers-reduced-motion: reduce){
    .edge-pulse{animation:none;}
  }

  /* STAT STRIP */
  .stat-strip{border-top:1px solid rgba(255,255,255,0.12); margin-top:80px; padding-top:36px;}
  .stat-strip .wrap{display:flex; gap:48px; flex-wrap:wrap; position:relative; z-index:2;}
  .stat b{display:block; font-family:'Space Grotesk',sans-serif; font-size:28px; color:#fff;}
  .stat span{font-size:14px; color:#8B96A5;}

  /* SECTION SHARED */
  section{padding:88px 0;}
  .section-head{max-width:600px; margin-bottom:56px;}
  .section-head .eyebrow{color:var(--accent-2);}
  .section-head h2{font-size:clamp(30px,3.6vw,40px); font-weight:600; margin-bottom:14px;}
  .section-head p{color:var(--muted); font-size:17.5px;}
  @media (max-width:760px){ .section-head p{white-space:normal !important;} }

  /* ABOUT */
  .about-layout{display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:stretch;}

  .about-highlight{
    background:var(--ink); color:#fff; border-radius:16px; padding:44px 40px;
    display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
  }
  .about-highlight::before{
    content:'"'; position:absolute; top:-36px; left:24px; font-family:'Space Grotesk',sans-serif;
    font-size:150px; color:rgba(255,255,255,0.06); line-height:1; pointer-events:none;
  }
  .about-highlight p{color:#C7D0DB; font-size:17.5px; line-height:1.7; margin-bottom:16px; position:relative; z-index:1;}
  .about-highlight p:last-child{margin-bottom:0;}
  .about-highlight strong{color:#fff; font-weight:600;}

  .about-list{display:flex; flex-direction:column; justify-content:center;}
  .about-item{display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line);}
  .about-item:first-child{padding-top:4px;}
  .about-item:last-child{border-bottom:none; padding-bottom:4px;}
  .about-item .icon-circle{
    width:42px; height:42px; border-radius:50%; background:var(--cat); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .about-item .icon-circle svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8;}
  .about-item .txt h3{font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; margin-bottom:4px;}
  .about-item .txt p{color:var(--muted); font-size:14.5px;}
  @media (max-width:820px){ .about-layout{grid-template-columns:1fr;} }

  /* SERVICES */
  .services{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .service-card{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:0 24px 26px; position:relative; overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .service-card::before{
    content:''; display:block; height:4px; background:var(--cat); margin:0 -24px 26px;
  }
  .service-card:hover{
    transform:translateY(-5px); border-color:var(--cat);
    box-shadow:0 16px 28px rgba(14,26,43,0.10);
  }
  .service-card .tag{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--cat); font-weight:500; letter-spacing:0.04em; margin-bottom:14px; display:block;}
  .service-card .icon-badge{
    width:44px; height:44px; border-radius:11px; margin-bottom:16px;
    background:var(--cat); display:flex; align-items:center; justify-content:center;
  }
  .service-card .icon-badge svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8;}
  .service-card h3{font-size:19.5px; margin-bottom:9px;}
  .service-card p{color:var(--muted); font-size:15.5px;}
  .service-card--link{display:flex; flex-direction:column; height:100%;}
  .service-card-cta{
    display:flex; align-items:center; gap:5px; margin-top:16px; padding-top:14px;
    border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--cat);
  }
  .service-card-cta svg{width:15px; height:15px; stroke:var(--cat); fill:none; stroke-width:2.2; transition:transform .18s ease;}
  .service-card--link:hover .service-card-cta svg{transform:translateX(3px);}
  @media (max-width:980px){ .service-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .service-grid{grid-template-columns:1fr;} }

  /* PARTNER NETWORK DIAGRAM */
  .partner-diagram{
    background:var(--ink); border-radius:14px; padding:48px 40px; color:#fff; margin-top:12px;
    display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  }
  .partner-diagram .copy p{color:#AEB9C6; font-size:16.5px; margin-bottom:14px;}
  .partner-diagram .copy h3{font-size:22px; margin-bottom:14px;}
  .legend{display:flex; gap:20px; margin-top:20px; flex-wrap:wrap;}
  .legend-item{display:flex; align-items:center; gap:8px; font-size:14px; color:#B9C2CE;}
  .legend-dot{width:9px; height:9px; border-radius:50%;}
  @media (max-width:820px){ .partner-diagram{grid-template-columns:1fr;} }

  /* PROCESS */
  .process{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;}

  .process-track{
    position:relative; display:grid; grid-template-columns:repeat(4,1fr);
    margin-bottom:8px; height:48px;
  }
  .process-track::before{
    content:''; position:absolute; top:23px; left:12.5%; right:12.5%; height:2px;
    background:linear-gradient(90deg, var(--line), var(--accent), var(--line));
  }
  .process-track::after{
    content:''; position:absolute; top:19px; width:10px; height:10px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 10px var(--accent), 0 0 0 4px rgba(0,184,169,0.18);
    animation:trackMove 5s ease-in-out infinite;
  }
  @keyframes trackMove{
    0%{left:12.5%; opacity:0;}
    8%{opacity:1;}
    46%{left:calc(87.5% - 10px); opacity:1;}
    54%{opacity:0;}
    100%{left:calc(87.5% - 10px); opacity:0;}
  }
  .track-step{display:flex; justify-content:center; align-items:center; position:relative; z-index:2;}
  .track-step .dot{
    width:48px; height:48px; border-radius:50%; background:var(--paper);
    border:2px solid var(--accent); color:var(--accent); font-family:'Space Grotesk',sans-serif;
    font-weight:700; font-size:18.5px; display:flex; align-items:center; justify-content:center;
  }
  @media (max-width:820px){ .process-track{display:none;} }

  .process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .process-card{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:28px 22px 26px; position:relative; overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .process-card:hover{
    transform:translateY(-5px); border-color:var(--accent);
    box-shadow:0 16px 28px rgba(14,26,43,0.10);
  }
  .process-card .ghost-num{
    position:absolute; top:-14px; right:6px; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:76px; color:var(--bg); -webkit-text-stroke:1.5px var(--line); line-height:1;
    z-index:0; pointer-events:none; user-select:none;
  }
  .process-card .icon-badge{
    width:46px; height:46px; border-radius:12px; margin-bottom:18px; position:relative; z-index:1;
    background:linear-gradient(135deg, var(--accent), #00988c);
    box-shadow:0 8px 16px rgba(0,184,169,0.32);
    display:flex; align-items:center; justify-content:center;
  }
  .process-card .icon-badge svg{width:23px; height:23px; stroke:#fff; fill:none; stroke-width:1.8;}
  .process-card h3{font-size:18.5px; margin-bottom:8px; position:relative; z-index:1;}
  .process-card p{color:var(--muted); font-size:15.5px; position:relative; z-index:1;}
  @media (max-width:820px){
    .process-grid{grid-template-columns:1fr 1fr; gap:16px;}
  }
  @media (max-width:560px){
    .process-grid{grid-template-columns:1fr;}
  }

  /* FAQ */
  .faq-list{max-width:760px; margin:0 auto;}
  .faq-item{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:0 22px; margin-bottom:14px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .faq-item:hover{border-color:var(--cat);}
  .faq-item[open]{border-color:var(--cat); box-shadow:0 12px 24px rgba(14,26,43,0.07);}
  .faq-item summary{
    padding:19px 0; display:flex; align-items:center; gap:14px;
    cursor:pointer; list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-q-badge{
    width:30px; height:30px; border-radius:50%; background:var(--cat); color:#fff;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .faq-item summary .qtext{
    flex:1; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px;
  }
  .faq-item summary .chevron{
    width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform .25s ease, border-color .2s ease, background .2s ease;
  }
  .faq-item summary .chevron svg{width:12px; height:12px; stroke:var(--muted); fill:none; stroke-width:2;}
  .faq-item[open] summary .chevron{transform:rotate(180deg); border-color:var(--cat); background:var(--cat);}
  .faq-item[open] summary .chevron svg{stroke:#fff;}
  .faq-item .faq-answer{
    padding:0 0 22px 44px; margin-top:-2px; color:var(--muted); font-size:16px; max-width:600px;
  }

  /* CTA */
  .cta{
    text-align:center; padding:110px 0; background:var(--ink); color:#fff;
    position:relative; overflow:hidden;
  }
  .cta::before{
    content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
    width:640px; height:640px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,184,169,0.22) 0%, rgba(0,184,169,0) 70%);
    pointer-events:none;
  }
  .cta h2{font-size:clamp(30px,4.2vw,44px); margin-bottom:16px; color:#fff; position:relative; z-index:1;}
  .cta > .wrap > p{color:#B9C2CE; max-width:480px; margin:0 auto 0; position:relative; z-index:1;}

  /* CONTACT FORM */
  .contact-form-card{
    max-width:660px; margin:44px auto 0; background:var(--paper); border-radius:22px;
    padding:46px 44px 40px; text-align:left; position:relative; z-index:1;
    box-shadow:0 40px 80px rgba(0,0,0,0.35);
  }
  .contact-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .contact-form .form-field{margin-bottom:18px;}
  .contact-form .form-field label{
    display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:7px;
  }
  .contact-form .form-field input, .contact-form .form-field textarea{
    width:100%; border:1.5px solid var(--line); border-radius:10px; padding:14px 16px;
    font-family:'Inter',sans-serif; font-size:16.5px; color:var(--ink); background:var(--bg);
    resize:vertical; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .contact-form .form-field input:focus, .contact-form .form-field textarea:focus{
    outline:none; border-color:var(--accent); background:var(--paper);
    box-shadow:0 0 0 4px rgba(0,184,169,0.15);
  }
  .consent-field{
    display:flex; align-items:flex-start; gap:10px; margin:4px 0 22px; font-size:14px; color:var(--muted);
  }
  .consent-field input[type="checkbox"]{
    width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--accent);
  }
  .consent-field a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
  .consent-error{color:#C0392B; font-size:13px; margin-top:-14px; margin-bottom:14px; display:none;}
  .consent-error.show{display:block;}
  .contact-form .btn-primary{
    width:100%; text-align:center; margin-top:6px; padding:16px 26px; border-radius:11px;
    font-size:17px; transition:transform .18s ease, box-shadow .18s ease; border:none; cursor:pointer;
  }
  .contact-form .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 26px rgba(14,26,43,0.22);}
  .contact-form .btn-primary:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
  .form-note{font-size:13.5px; color:var(--muted); text-align:center; margin-top:16px;}
  /* honeypot: 스팸봇 방지용 — 실사용자에게는 보이지 않음 */
  .hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
  @media (max-width:640px){
    .contact-form-card{padding:34px 24px 30px; border-radius:18px;}
    .contact-form .form-row{grid-template-columns:1fr;}
  }

  /* FOOTER */
  footer{border-top:1px solid var(--line); padding:30px 0 0;}
  .footer-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-bottom:28px;}
  .footer-top .logo img{height:20px; width:auto; display:block;}
  .footer-top .flinks{display:flex; gap:22px; font-size:14.5px; color:var(--muted);}
  .footer-top .flinks a:hover{color:var(--ink);}
  .footer-biz{
    border-top:1px solid var(--line); padding:22px 0 28px;
    font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--muted); line-height:1.9;
  }
  .footer-biz .biz-row{display:flex; flex-wrap:wrap; gap:4px 10px;}
  .footer-biz .biz-row span:not(:last-child)::after{content:'·'; margin-left:10px; color:var(--line);}
  .footer-biz .copyright{margin-top:8px; color:#8B96A5;}

/* PRODUCT LANDING PAGES (e.g. ms-office.html) */
.breadcrumb{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted);
  padding:20px 0 0;
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--ink);}
.breadcrumb .sep{margin:0 8px; color:var(--line);}

.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.plan-card{
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px;
  padding:28px 24px 26px; position:relative; display:flex; flex-direction:column;
}
.plan-card.featured{border-color:var(--accent); box-shadow:0 16px 32px rgba(0,184,169,0.14);}
.plan-card .plan-badge{
  position:absolute; top:-13px; left:24px; background:var(--accent); color:var(--ink);
  font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:20px;
}
.plan-card h3{font-size:19px; margin-bottom:6px;}
.plan-card .plan-desc{color:var(--muted); font-size:14.5px; margin-bottom:18px; min-height:44px;}
.plan-card ul{list-style:none; margin-bottom:20px; flex:1;}
.plan-card ul li{
  font-size:14.5px; color:var(--ink); padding:8px 0 8px 24px; position:relative;
  border-bottom:1px solid var(--bg);
}
.plan-card ul li:last-child{border-bottom:none;}
.plan-card ul li::before{
  content:''; position:absolute; left:0; top:12px; width:14px; height:14px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 15%, transparent);
}
.plan-card ul li::after{
  content:''; position:absolute; left:4px; top:15px; width:6px; height:3px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);
}
.plan-card .plan-cta{
  text-align:center; padding:12px; border-radius:9px; font-weight:600; font-size:15px;
  border:1.5px solid var(--ink); color:var(--ink);
}
.plan-card.featured .plan-cta{background:var(--ink); color:#fff; border-color:var(--ink);}
@media (max-width:900px){ .plan-grid{grid-template-columns:1fr;} }

.usecase-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.usecase-card{
  background:var(--ink); color:#fff; border-radius:14px; padding:26px 24px;
}
.usecase-card h3{font-size:17px; margin-bottom:8px;}
.usecase-card p{color:#B9C2CE; font-size:14.5px;}
@media (max-width:820px){ .usecase-list{grid-template-columns:1fr;} }

/* BRAND HERO — for pages selling a product with its own strong brand identity (e.g. ZYXCAD) */
:root{ --brand-accent:#E31E24; --brand-accent-2:#FF5C5C; --brand-bg:#0A0A0A; }
.brand-hero{ background:var(--brand-bg); color:#fff; position:relative; overflow:hidden; padding:130px 0 60px; }
.brand-hero .wrap{position:relative; z-index:2;}
.brand-diagonal{position:absolute; top:0; right:0; height:100%; width:60%; z-index:1; opacity:0.9;}
@media (max-width:900px){ .brand-diagonal{opacity:0.35; width:100%;} }
.brand-eyebrow{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.12em; color:var(--brand-accent-2); text-transform:uppercase; margin-bottom:18px; display:block;}
.brand-hero h1{font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.15; max-width:740px; margin-bottom:14px;}
.brand-tagline{font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--brand-accent-2); margin-bottom:22px; letter-spacing:0.01em;}
.brand-hero p.lead{font-size:18px; color:#C7CBCF; max-width:560px; margin-bottom:36px;}
.brand-btn-primary{background:var(--brand-accent); color:#fff; padding:14px 26px; border-radius:6px; font-weight:700; font-size:16.5px; display:inline-block; transition:transform .15s ease, box-shadow .15s ease;}
.brand-btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(227,30,36,.35);}
.brand-btn-ghost{border:1px solid rgba(255,255,255,.25); color:#fff; padding:14px 26px; border-radius:6px; font-weight:600; font-size:16.5px; display:inline-block;}
.brand-btn-ghost:hover{border-color:rgba(255,255,255,.55);}
.brand-hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.brand-stat-strip{border-top:1px solid rgba(255,255,255,.12); margin-top:56px; padding-top:32px; position:relative; z-index:2;}
.brand-stat-strip .wrap{display:flex; gap:48px; flex-wrap:wrap;}
.brand-stat b{display:block; font-family:'Space Grotesk',sans-serif; font-size:30px; color:var(--brand-accent-2);}
.brand-stat span{font-size:13.5px; color:#8B8F93;}
.brand-footnote{font-size:12px; color:#6E7276; margin-top:18px; position:relative; z-index:2;}

.brand-compare{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.brand-compare .col{border-radius:14px; padding:28px 26px;}
.brand-compare .col.old{background:var(--bg); border:1px solid var(--line);}
.brand-compare .col.new{background:var(--brand-bg); color:#fff;}
.brand-compare h3{font-size:17px; margin-bottom:14px;}
.brand-compare ul{list-style:none;}
.brand-compare ul li{padding:8px 0; font-size:14.5px; border-bottom:1px solid rgba(0,0,0,.06); color:var(--muted);}
.brand-compare .col.new ul li{border-bottom:1px solid rgba(255,255,255,.08); color:#D7DADD;}
@media (max-width:820px){.brand-compare{grid-template-columns:1fr;}}

.brand-partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.brand-partner-col{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px;}
.brand-partner-col h4{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; color:var(--brand-accent); margin-bottom:14px;}
.brand-partner-col ul{list-style:none;}
.brand-partner-col ul li{font-size:15px; padding:7px 0; border-bottom:1px solid var(--bg); color:var(--ink);}
.brand-partner-col ul li:last-child{border-bottom:none;}
@media (max-width:820px){.brand-partner-grid{grid-template-columns:1fr;}}

.brand-support-card{
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:28px 26px;
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
}
.brand-support-card .icon-badge{background:var(--brand-accent);}
.brand-support-card dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14.5px;}
.brand-support-card dt{color:var(--muted);}
.brand-support-card dd{color:var(--ink); font-weight:600;}
@media (max-width:600px){ .brand-support-card{grid-template-columns:1fr;} }

/* LIGHT BRAND HERO — for pages selling a product with a light/colorful brand identity (e.g. Microsoft 365) */
.brand-hero-light{
  background:#F5F8FC; color:var(--ink); position:relative; overflow:hidden; padding:120px 0 90px;
  border-bottom:1px solid var(--line);
}
.brand-hero-light .wrap{position:relative; z-index:2;}
.brand-blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.5; z-index:1;}
.brand-hero-light h1{font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.15; max-width:740px; margin-bottom:16px; color:var(--ink);}
.brand-hero-light p.lead{font-size:18px; color:var(--muted); max-width:560px; margin-bottom:32px;}
.brand-pill{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--ink);
  margin-bottom:22px; box-shadow:0 4px 14px rgba(0,0,0,0.04);
}
.brand-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--brand-accent);}

.app-icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.app-icon-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.app-icon-card .app-badge{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;
}
.app-icon-card h4{font-size:15.5px; font-weight:600;}
.app-icon-card p{font-size:13.5px; color:var(--muted); line-height:1.5;}
@media (max-width:900px){ .app-icon-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .app-icon-grid{grid-template-columns:1fr;} }

.brand-callout{
  background:#EFF6FF; border:1px solid #CFE3FB; border-radius:12px; padding:18px 20px;
  font-size:14.5px; color:var(--ink); display:flex; gap:12px; align-items:flex-start;
}
.brand-callout .dot-icon{
  width:22px; height:22px; border-radius:50%; background:var(--brand-accent); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px;
}